/* CRUSHRUNNER PWA INSTALL V1 */

.cp-pwa-install {
    position: fixed;
    inset: 0;

    z-index: 100000;

    display: none;
    align-items: flex-end;
    justify-content: center;

    padding: 12px;

    background:
        rgba(5, 10, 30, .56);

    backdrop-filter:
        blur(7px);

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

.cp-pwa-install.is-open {
    display: flex;
}

.cp-pwa-card {
    position: relative;

    width: 100%;
    max-width: 480px;

    padding:
        20px
        19px
        18px;

    border:
        1px solid
        rgba(8,17,47,.07);

    border-radius:
        27px 27px 21px 21px;

    background:
        radial-gradient(
            circle at 90% 2%,
            rgba(255,45,103,.12),
            transparent 34%
        ),
        #fff;

    box-shadow:
        0 30px 90px
        rgba(5,10,30,.28);

    animation:
        cpPwaIn
        .26s
        ease-out;
}

@keyframes cpPwaIn {

    from {
        opacity: 0;
        transform:
            translateY(34px)
            scale(.985);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

.cp-pwa-handle {
    width: 44px;
    height: 4px;

    margin:
        -5px
        auto
        19px;

    border-radius:
        999px;

    background:
        #d9dde6;
}

.cp-pwa-close {
    position: absolute;
    right: 17px;
    top: 17px;

    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    border:
        1px solid #e8eaf0;

    border-radius:
        50%;

    background:
        #fff;

    color:
        #08112f;

    font-size:
        23px;

    cursor:
        pointer;
}

.cp-pwa-brand {
    width:
        min(
            145px,
            43vw
        );

    height: auto;

    display: block;

    margin:
        5px
        0
        22px;
}

.cp-pwa-eyebrow {
    display: block;

    margin-bottom:
        7px;

    color:
        #ff2d67;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        2.4px;

    text-transform:
        uppercase;
}

.cp-pwa-title {
    margin: 0;

    padding-right:
        40px;

    color:
        #08112f;

    font-size:
        clamp(
            26px,
            8vw,
            34px
        );

    font-weight:
        900;

    letter-spacing:
        -1.4px;

    line-height:
        1.02;
}

.cp-pwa-description {
    margin:
        11px
        0
        18px;

    color:
        #6c7384;

    font-size:
        14px;

    line-height:
        1.55;
}

.cp-pwa-benefits {
    display: grid;

    gap: 8px;

    margin:
        0
        0
        20px;

    padding: 0;

    list-style: none;
}

.cp-pwa-benefits li {
    display: flex;
    align-items: center;

    gap: 9px;

    color:
        #30384e;

    font-size:
        13px;

    font-weight:
        650;
}

.cp-pwa-benefits li::before {
    content: "✓";

    width: 21px;
    height: 21px;

    display: grid;
    place-items: center;

    flex:
        0 0 21px;

    border-radius:
        50%;

    background:
        #fff0f4;

    color:
        #ff2d67;

    font-size:
        11px;

    font-weight:
        900;
}

.cp-pwa-actions {
    display: grid;

    gap: 9px;
}

.cp-pwa-primary,
.cp-pwa-secondary {
    width: 100%;

    border: 0;
    border-radius:
        999px;

    padding:
        15px
        18px;

    cursor: pointer;

    font:
        inherit;

    font-size:
        14px;

    font-weight:
        850;
}

.cp-pwa-primary {
    background:
        #ff2d67;

    color:
        #fff;

    box-shadow:
        0 12px 25px
        rgba(255,45,103,.22);
}

.cp-pwa-secondary {
    background:
        #f4f5f8;

    color:
        #697083;
}

.cp-pwa-ios {
    display: none;

    margin:
        6px
        0
        19px;

    padding:
        14px;

    border:
        1px solid #e8eaf0;

    border-radius:
        16px;

    background:
        #f8f9fb;

    color:
        #444c61;

    font-size:
        13px;

    line-height:
        1.55;
}

.cp-pwa-ios strong {
    color:
        #08112f;
}

.cp-pwa-install.is-ios
.cp-pwa-ios {
    display: block;
}

.cp-pwa-install.is-ios
.cp-pwa-primary {
    display: none;
}

body.cp-pwa-modal-open {
    overflow: hidden;
}


@media (min-width: 640px) {

    .cp-pwa-install {
        align-items: center;

        padding:
            24px;
    }

    .cp-pwa-card {
        padding:
            30px;

        border-radius:
            28px;
    }

    .cp-pwa-handle {
        display: none;
    }

}

/* CRUSHRUNNER_PWA_IOS_TUTORIAL_V2 */

.cp-pwa-ios-main {
    display: none;
}

.cp-pwa-install.is-ios
.cp-pwa-ios-main {
    display: block;
}

.cp-pwa-install.is-ios
.cp-pwa-ios {
    display: none;
}

.cp-pwa-ios-guide {
    display: none;
}

.cp-pwa-install.is-ios.is-guide
.cp-pwa-ios-main {
    display: none;
}

.cp-pwa-install.is-ios.is-guide
.cp-pwa-ios-guide {
    display: block;
}

.cp-pwa-ios-browser {
    margin:
        3px
        0
        14px;

    color:
        #7b8292;

    font-size:
        12px;

    font-weight:
        700;
}

.cp-pwa-ios-help-btn {
    width: 100%;

    border: 0;
    border-radius: 999px;

    padding:
        15px
        18px;

    background:
        #ff2d67;

    color:
        #fff;

    font:
        inherit;

    font-size:
        14px;

    font-weight:
        850;

    cursor: pointer;

    box-shadow:
        0 12px 25px
        rgba(255,45,103,.22);
}

.cp-pwa-ios-steps {
    display: grid;

    gap: 12px;

    margin-top:
        18px;
}

.cp-pwa-ios-step {
    display: grid;

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

    gap: 12px;

    align-items: center;

    padding:
        13px;

    border:
        1px solid #e9ebf1;

    border-radius:
        17px;

    background:
        #fff;
}

.cp-pwa-ios-step-number {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border-radius:
        14px;

    background:
        #fff0f4;

    color:
        #ff2d67;

    font-size:
        18px;

    font-weight:
        900;
}

.cp-pwa-ios-step-copy strong {
    display: block;

    margin-bottom:
        3px;

    color:
        #08112f;

    font-size:
        13px;

    font-weight:
        850;
}

.cp-pwa-ios-step-copy span {
    display: block;

    color:
        #737a8b;

    font-size:
        12px;

    line-height:
        1.45;
}

.cp-pwa-ios-browser-tip {
    margin-top:
        14px;

    padding:
        13px;

    border-radius:
        15px;

    background:
        #f7f8fa;

    color:
        #5e6575;

    font-size:
        12px;

    line-height:
        1.5;
}

.cp-pwa-ios-browser-tip strong {
    color:
        #08112f;
}

.cp-pwa-ios-guide-actions {
    display: grid;

    gap: 9px;

    margin-top:
        17px;
}

.cp-pwa-ios-back,
.cp-pwa-ios-done {
    width: 100%;

    border: 0;

    border-radius:
        999px;

    padding:
        14px 18px;

    font:
        inherit;

    font-size:
        13px;

    font-weight:
        800;

    cursor: pointer;
}

.cp-pwa-ios-done {
    background:
        #ff2d67;

    color:
        #fff;
}

.cp-pwa-ios-back {
    background:
        #f3f4f7;

    color:
        #687083;
}

@media (min-width: 640px) {

    .cp-pwa-ios-steps {
        gap: 10px;
    }

}