/* ==========================================================
   KROK GPS - APP DOWNLOAD LOGIN V1
   ========================================================== */

.krok-login-app{

    margin-top:18px;

    padding:14px;

    border:
        1px solid #e1e7ed;

    border-radius:15px;

    background:
        linear-gradient(
            145deg,
            #f9fbfc,
            #f3f7f9
        );

    box-shadow:
        0 8px 24px
        rgba(
            17,
            32,
            51,
            .05
        );
}


.krok-login-app-head{

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:12px;
}


.krok-login-app-brand{

    display:flex;

    align-items:center;

    gap:10px;

    min-width:0;
}


.krok-login-app-icon{

    width:39px;
    height:39px;

    min-width:39px;

    display:grid;
    place-items:center;

    border-radius:11px;

    background:
        linear-gradient(
            145deg,
            #30bfcb,
            #1a9ca8
        );

    color:#fff;

    font-size:18px;
    font-weight:950;

    box-shadow:
        0 8px 18px
        rgba(
            26,
            156,
            168,
            .18
        );
}


.krok-login-app-title{

    color:#172033;

    font-size:12px;
    font-weight:900;

    line-height:1.2;
}


.krok-login-app-subtitle{

    margin-top:3px;

    color:#7b8797;

    font-size:9px;

    line-height:1.35;
}


.krok-login-app-more{

    min-height:34px;

    padding:
        0
        11px;

    border:
        1px solid #d8e1e7;

    border-radius:9px;

    background:#fff;

    color:#21394d;

    font-size:9px;
    font-weight:900;

    white-space:nowrap;

    cursor:pointer;
}


.krok-login-app-platforms{

    display:grid;

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

    gap:7px;

    margin-top:11px;
}


.krok-login-app-platform{

    min-width:0;

    min-height:41px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:7px;

    padding:
        7px
        9px;

    border-radius:10px;

    box-sizing:border-box;

    font-size:9px;

    font-weight:850;

    text-align:center;
}


.krok-login-app-platform.android{

    border:
        1px solid #cfe9da;

    background:#edf9f2;

    color:#157347;

    cursor:pointer;
}


.krok-login-app-platform.android:hover{

    background:#e4f7ec;
}


.krok-login-app-platform.ios{

    border:
        1px solid #e1e5e9;

    background:#f3f5f6;

    color:#7a8792;
}


.krok-login-app-platform strong{

    font-size:10px;
}


.krok-login-app-dot{

    width:7px;
    height:7px;

    min-width:7px;

    border-radius:50%;
}


.krok-login-app-platform.android
.krok-login-app-dot{

    background:#19a663;
}


.krok-login-app-platform.ios
.krok-login-app-dot{

    background:#d29a31;
}


/* ==========================================================
   MODAL
   ========================================================== */

.krok-login-app-backdrop{

    position:fixed;

    inset:0;

    z-index:50000;

    display:none;

    align-items:center;
    justify-content:center;

    padding:20px;

    background:
        rgba(
            8,
            18,
            31,
            .64
        );

    backdrop-filter:
        blur(7px);

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


.krok-login-app-backdrop.show{

    display:flex;
}


.krok-login-app-modal{

    width:
        min(
            620px,
            100%
        );

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

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border:
        1px solid #dfe6eb;

    border-radius:19px;

    background:#fff;

    box-shadow:
        0 30px 100px
        rgba(
            0,
            0,
            0,
            .28
        );
}


.krok-login-app-modal-head{

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:12px;

    padding:
        15px
        17px;

    border-bottom:
        1px solid #e5eaee;
}


.krok-login-app-modal-brand{

    display:flex;

    align-items:center;

    gap:11px;
}


.krok-login-app-modal-logo{

    width:43px;
    height:43px;

    display:grid;

    place-items:center;

    border-radius:12px;

    background:
        linear-gradient(
            145deg,
            #30bfcb,
            #1a9ca8
        );

    color:#fff;

    font-size:21px;

    font-weight:950;
}


.krok-login-app-modal-title{

    color:#172033;

    font-size:16px;

    font-weight:900;
}


.krok-login-app-modal-subtitle{

    margin-top:3px;

    color:#7d8998;

    font-size:9px;
}


.krok-login-app-close{

    width:40px;
    height:40px;

    display:grid;

    place-items:center;

    padding:0;

    border:0;

    border-radius:10px;

    background:#f0f3f5;

    color:#253b4e;

    font-size:23px;

    cursor:pointer;
}


.krok-login-app-modal-body{

    padding:17px;

    overflow-y:auto;
}


.krok-login-app-intro{

    margin:
        0
        0
        14px;

    color:#637482;

    font-size:11px;

    line-height:1.55;
}


.krok-login-app-cards{

    display:grid;

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

    gap:10px;
}


.krok-login-app-card{

    padding:15px;

    border:
        1px solid #e1e7eb;

    border-radius:14px;

    background:#f9fbfc;
}


.krok-login-app-card-top{

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:8px;

    margin-bottom:9px;
}


.krok-login-app-card-title{

    color:#20384b;

    font-size:13px;

    font-weight:900;
}


.krok-login-app-badge{

    min-height:23px;

    display:inline-flex;

    align-items:center;

    padding:
        0
        8px;

    border-radius:999px;

    font-size:8px;

    font-weight:900;

    text-transform:uppercase;
}


.krok-login-app-badge.available{

    background:#e8f8ef;

    color:#16814f;
}


.krok-login-app-badge.soon{

    background:#fff4df;

    color:#9d6911;
}


.krok-login-app-card-text{

    min-height:45px;

    color:#697987;

    font-size:10px;

    line-height:1.5;
}


.krok-login-app-download{

    width:100%;

    min-height:45px;

    display:flex;

    align-items:center;
    justify-content:center;

    margin-top:11px;

    padding:
        0
        10px;

    border:0;

    border-radius:11px;

    background:#14283d;

    color:#fff;

    font-size:10px;

    font-weight:900;

    text-decoration:none;

    box-sizing:border-box;
}


.krok-login-app-download.disabled{

    background:#e7ebee;

    color:#89959e;

    cursor:not-allowed;
}


.krok-login-app-apk-warning{

    margin-top:7px;

    color:#9d6911;

    font-size:8px;

    line-height:1.4;

    text-align:center;
}


/* ==========================================================
   INSTRUCCIONES
   ========================================================== */

.krok-login-app-steps{

    margin-top:13px;

    padding:14px;

    border:
        1px solid #e1e7eb;

    border-radius:14px;

    background:#fff;
}


.krok-login-app-steps-title{

    margin-bottom:10px;

    color:#273f52;

    font-size:11px;

    font-weight:900;
}


.krok-login-app-step{

    display:grid;

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

    gap:9px;

    align-items:start;

    margin-top:8px;

    color:#657684;

    font-size:10px;

    line-height:1.5;
}


.krok-login-app-step:first-of-type{

    margin-top:0;
}


.krok-login-app-step-number{

    width:27px;
    height:27px;

    display:grid;

    place-items:center;

    border-radius:8px;

    background:#edf2f5;

    color:#1c364b;

    font-size:9px;

    font-weight:900;
}


.krok-login-app-ios-info{

    margin-top:12px;

    padding:
        10px
        11px;

    border-radius:10px;

    background:#f4f6f8;

    color:#687986;

    font-size:9px;

    line-height:1.5;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:600px){

    .krok-login-app-backdrop{

        padding:0;
    }


    .krok-login-app-modal{

        width:100%;

        height:100dvh;

        max-height:none;

        border:0;

        border-radius:0;
    }


    .krok-login-app-modal-head{

        padding:
            max(
                12px,
                env(
                    safe-area-inset-top
                )
            )
            13px
            11px;
    }


    .krok-login-app-modal-body{

        padding:
            13px
            13px
            calc(
                18px +
                env(
                    safe-area-inset-bottom
                )
            );
    }


    .krok-login-app-cards{

        grid-template-columns:1fr;
    }

}


@media(max-width:380px){

    .krok-login-app-platforms{

        grid-template-columns:1fr;
    }

}