/* =========================================================
   LIVIGO
   CUSTOMER PWA INSTALL BANNER

   Path:
   /assets/css/components/pwa-install-banner.css

   Scope:
   - Public mobile website only
   - Promotes the Minha Livigo Customer PWA
   - Does not control install behavior
   - Does not belong to the installed Customer PWA
   - Does not belong to Livigo Pro

   Behavior:
   /assets/js/pwa-install.js

   Markup:
   /partials/pwa-install-banner.php
   ========================================================= */


/* =========================================================
   COMPONENT TOKENS
   ========================================================= */

.lv-pwa-install,
.lv-pwa-install-help {
    --lv-pwa-blue:
        var(
            --livigo-navy,
            #0a2c72
        );

    --lv-pwa-blue-deep:
        #061d4f;

    --lv-pwa-lime:
        var(
            --livigo-lime,
            #c6f31e
        );

    --lv-pwa-lime-hover:
        #b8df5a;

    --lv-pwa-text:
        #10263c;

    --lv-pwa-muted:
        #607080;

    --lv-pwa-border:
        rgba(
            8,
            38,
            69,
            .10
        );

    --lv-pwa-shadow:
        0
        8px
        26px
        rgba(
            3,
            20,
            42,
            .13
        );
}


/* =========================================================
   HIDDEN STATE

   Important:
   Keep [hidden] authoritative.

   JavaScript removes the hidden attribute only after
   determining that this browser / presentation is eligible.
   ========================================================= */

.lv-pwa-install[hidden],
.lv-pwa-install-help[hidden] {
    display:
        none !important;
}


/* =========================================================
   INSTALL BANNER
   ========================================================= */

.lv-pwa-install {
    position:
        relative;

    z-index:
        850;

    display:
        grid;

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

    align-items:
        center;

    gap:
        10px;

    width:
        100%;

    min-width:
        0;

    min-height:
        76px;

    margin:
        0;

    padding:
        9px
        12px
        9px
        8px;

    border-bottom:
        1px solid
        var(--lv-pwa-border);

    background:
        #ffffff;

    color:
        var(--lv-pwa-text);

    box-shadow:
        var(--lv-pwa-shadow);

    box-sizing:
        border-box;
}


.lv-pwa-install *,
.lv-pwa-install *::before,
.lv-pwa-install *::after {
    box-sizing:
        border-box;
}


/* =========================================================
   CLOSE
   ========================================================= */

.lv-pwa-install__close {
    display:
        grid;

    place-items:
        center;

    width:
        30px;

    height:
        42px;

    margin:
        0;

    padding:
        0;

    border:
        0;

    border-radius:
        9px;

    background:
        transparent;

    color:
        #617083;

    font:
        inherit;

    cursor:
        pointer;

    -webkit-tap-highlight-color:
        transparent;
}


.lv-pwa-install__close:hover,
.lv-pwa-install__close:focus-visible {
    background:
        rgba(
            8,
            38,
            69,
            .06
        );

    color:
        var(--lv-pwa-blue);
}


.lv-pwa-install__close svg {
    display:
        block;

    width:
        19px;

    height:
        19px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =========================================================
   CUSTOMER APP ICON
   ========================================================= */

.lv-pwa-install__icon-wrap {
    display:
        grid;

    place-items:
        center;

    width:
        52px;

    height:
        52px;

    min-width:
        52px;

    overflow:
        hidden;

    border-radius:
        13px;

    background:
        var(--lv-pwa-blue);
}


.lv-pwa-install__icon {
    display:
        block;

    width:
        52px;

    height:
        52px;

    max-width:
        none;

    object-fit:
        cover;

    border-radius:
        13px;
}


/* =========================================================
   APP COPY
   ========================================================= */

.lv-pwa-install__content {
    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    min-width:
        0;

    padding:
        1px
        0;
}


.lv-pwa-install__title {
    display:
        block;

    min-width:
        0;

    margin:
        0;

    overflow:
        hidden;

    color:
        var(--lv-pwa-blue);

    font-size:
        15px;

    font-weight:
        800;

    line-height:
        1.2;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.lv-pwa-install__text {
    display:
        block;

    min-width:
        0;

    margin-top:
        4px;

    overflow:
        hidden;

    color:
        var(--lv-pwa-muted);

    font-size:
        11.5px;

    font-weight:
        550;

    line-height:
        1.3;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =========================================================
   INSTALL ACTION
   ========================================================= */

.lv-pwa-install__action {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0
        0
        auto;

    min-width:
        82px;

    min-height:
        42px;

    margin:
        0;

    padding:
        0
        14px;

    border:
        0;

    border-radius:
        11px;

    background:
        var(--lv-pwa-lime);

    color:
        #10200c;

    -webkit-text-fill-color:
        #10200c;

    font:
        inherit;

    font-size:
        13px;

    font-weight:
        850;

    line-height:
        1;

    white-space:
        nowrap;

    cursor:
        pointer;

    -webkit-tap-highlight-color:
        transparent;

    transition:
        background-color
        .16s
        ease,
        transform
        .16s
        ease;
}


.lv-pwa-install__action:hover,
.lv-pwa-install__action:focus-visible {
    background:
        var(--lv-pwa-lime-hover);
}


.lv-pwa-install__action:active {
    transform:
        translateY(
            1px
        );
}


/* =========================================================
   FOCUS
   ========================================================= */

.lv-pwa-install__close:focus-visible,
.lv-pwa-install__action:focus-visible {
    outline:
        3px solid
        rgba(
            10,
            44,
            114,
            .28
        );

    outline-offset:
        2px;
}


/* =========================================================
   IOS INSTALL HELP
   ========================================================= */

.lv-pwa-install-help {
    position:
        fixed;

    z-index:
        1500;

    inset:
        0;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        center;

    width:
        100%;

    height:
        100%;

    min-height:
        100vh;

    min-height:
        100dvh;

    color:
        var(--lv-pwa-text);
}


.lv-pwa-install-help *,
.lv-pwa-install-help *::before,
.lv-pwa-install-help *::after {
    box-sizing:
        border-box;
}


/* =========================================================
   HELP BACKDROP
   ========================================================= */

.lv-pwa-install-help__backdrop {
    position:
        absolute;

    inset:
        0;

    background:
        rgba(
            2,
            14,
            32,
            .62
        );

    backdrop-filter:
        blur(
            3px
        );

    -webkit-backdrop-filter:
        blur(
            3px
        );
}


/* =========================================================
   HELP PANEL
   ========================================================= */

.lv-pwa-install-help__panel {
    position:
        relative;

    z-index:
        1;

    width:
        min(
            100%,
            520px
        );

    max-height:
        calc(
            100dvh
            - 24px
        );

    margin:
        0;

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

    overflow-y:
        auto;

    border-radius:
        24px
        24px
        0
        0;

    background:
        #ffffff;

    color:
        var(--lv-pwa-text);

    box-shadow:
        0
        -18px
        50px
        rgba(
            0,
            0,
            0,
            .22
        );
}


/* =========================================================
   HELP CLOSE
   ========================================================= */

.lv-pwa-install-help__close {
    position:
        absolute;

    top:
        16px;

    right:
        16px;

    display:
        grid;

    place-items:
        center;

    width:
        38px;

    height:
        38px;

    margin:
        0;

    padding:
        0;

    border:
        0;

    border-radius:
        50%;

    background:
        rgba(
            8,
            38,
            69,
            .06
        );

    color:
        #607080;

    font:
        inherit;

    cursor:
        pointer;
}


.lv-pwa-install-help__close:hover,
.lv-pwa-install-help__close:focus-visible {
    background:
        rgba(
            8,
            38,
            69,
            .10
        );

    color:
        var(--lv-pwa-blue);
}


.lv-pwa-install-help__close svg {
    display:
        block;

    width:
        19px;

    height:
        19px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =========================================================
   HELP APP ICON
   ========================================================= */

.lv-pwa-install-help__app {
    display:
        grid;

    place-items:
        center;

    width:
        68px;

    height:
        68px;

    margin:
        4px
        auto
        18px;

    overflow:
        hidden;

    border-radius:
        17px;

    background:
        var(--lv-pwa-blue);
}


.lv-pwa-install-help__app img {
    display:
        block;

    width:
        68px;

    height:
        68px;

    object-fit:
        cover;

    border-radius:
        17px;
}


/* =========================================================
   HELP COPY
   ========================================================= */

.lv-pwa-install-help__title {
    max-width:
        360px;

    margin:
        0
        auto;

    color:
        var(--lv-pwa-blue);

    font-size:
        23px;

    font-weight:
        850;

    line-height:
        1.15;

    letter-spacing:
        -.025em;

    text-align:
        center;
}


.lv-pwa-install-help__text {
    max-width:
        360px;

    margin:
        10px
        auto
        0;

    color:
        var(--lv-pwa-muted);

    font-size:
        14px;

    line-height:
        1.5;

    text-align:
        center;
}


/* =========================================================
   IOS STEPS
   ========================================================= */

.lv-pwa-install-help__steps {
    display:
        grid;

    gap:
        10px;

    max-width:
        390px;

    margin:
        22px
        auto
        0;

    padding:
        0;

    list-style:
        none;

    counter-reset:
        lv-pwa-install-step;
}


.lv-pwa-install-help__steps li {
    position:
        relative;

    min-height:
        48px;

    padding:
        14px
        14px
        14px
        52px;

    border:
        1px solid
        var(--lv-pwa-border);

    border-radius:
        14px;

    background:
        #f6f8fb;

    color:
        #42546b;

    font-size:
        13px;

    line-height:
        1.45;

    counter-increment:
        lv-pwa-install-step;
}


.lv-pwa-install-help__steps li::before {
    content:
        counter(
            lv-pwa-install-step
        );

    position:
        absolute;

    top:
        50%;

    left:
        14px;

    display:
        grid;

    place-items:
        center;

    width:
        27px;

    height:
        27px;

    transform:
        translateY(
            -50%
        );

    border-radius:
        50%;

    background:
        var(--lv-pwa-lime);

    color:
        #10200c;

    font-size:
        12px;

    font-weight:
        850;
}


.lv-pwa-install-help__steps strong {
    color:
        var(--lv-pwa-blue);

    font-weight:
        800;
}


/* =========================================================
   HELP DONE ACTION
   ========================================================= */

.lv-pwa-install-help__done {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        min(
            100%,
            390px
        );

    min-height:
        48px;

    margin:
        20px
        auto
        0;

    padding:
        0
        18px;

    border:
        0;

    border-radius:
        13px;

    background:
        var(--lv-pwa-blue);

    color:
        #ffffff;

    -webkit-text-fill-color:
        #ffffff;

    font:
        inherit;

    font-size:
        14px;

    font-weight:
        800;

    cursor:
        pointer;
}


.lv-pwa-install-help__done:hover,
.lv-pwa-install-help__done:focus-visible {
    background:
        var(--lv-pwa-blue-deep);
}


.lv-pwa-install-help__close:focus-visible,
.lv-pwa-install-help__done:focus-visible {
    outline:
        3px solid
        rgba(
            198,
            243,
            30,
            .55
        );

    outline-offset:
        2px;
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (
    max-width: 380px
) {

    .lv-pwa-install {
        grid-template-columns:
            26px
            46px
            minmax(
                0,
                1fr
            )
            auto;

        gap:
            8px;

        min-height:
            70px;

        padding:
            8px
            8px
            8px
            5px;
    }


    .lv-pwa-install__close {
        width:
            26px;
    }


    .lv-pwa-install__icon-wrap,
    .lv-pwa-install__icon {
        width:
            46px;

        height:
            46px;
    }


    .lv-pwa-install__icon-wrap,
    .lv-pwa-install__icon {
        border-radius:
            12px;
    }


    .lv-pwa-install__title {
        font-size:
            14px;
    }


    .lv-pwa-install__text {
        font-size:
            10.5px;
    }


    .lv-pwa-install__action {
        min-width:
            72px;

        min-height:
            39px;

        padding:
            0
            11px;

        font-size:
            12px;
    }

}


/* =========================================================
   TABLET WEBSITE
   ========================================================= */

@media (
    min-width: 720px
)
and (
    max-width: 1023px
) {

    .lv-pwa-install {
        grid-template-columns:
            34px
            56px
            minmax(
                0,
                1fr
            )
            auto;

        gap:
            13px;

        min-height:
            82px;

        padding:
            10px
            20px;
    }


    .lv-pwa-install__icon-wrap,
    .lv-pwa-install__icon {
        width:
            56px;

        height:
            56px;

        border-radius:
            14px;
    }


    .lv-pwa-install__content {
        max-width:
            520px;
    }


    .lv-pwa-install__title {
        font-size:
            16px;
    }


    .lv-pwa-install__text {
        font-size:
            12px;
    }


    .lv-pwa-install__action {
        min-width:
            94px;

        min-height:
            44px;
    }

}


/* =========================================================
   DESKTOP

   This component is intentionally unavailable on the
   desktop public website.

   JavaScript also enforces eligibility, but CSS provides
   another presentation boundary.
   ========================================================= */

@media (
    min-width: 1024px
) {

    .lv-pwa-install,
    .lv-pwa-install-help {
        display:
            none !important;
    }

}


/* =========================================================
   PRINT
   ========================================================= */

@media print {

    .lv-pwa-install,
    .lv-pwa-install-help {
        display:
            none !important;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .lv-pwa-install *,
    .lv-pwa-install-help * {
        transition:
            none !important;

        animation:
            none !important;
    }

}