.prk-mobile-app-banner[hidden] {
    display: none !important;
}

.prk-mobile-app-banner {
    display: none;
}

@media (max-width: 767px) {
    .prk-mobile-app-banner {
        position: fixed;
        inset-inline: 16px;
        bottom: calc(var(--prk-mab-bottom, 84px) + env(safe-area-inset-bottom));
        z-index: 99990;
        direction: rtl;
        box-sizing: border-box;
        opacity: 0;
        visibility: hidden;
        transform: translate3d(0, 14px, 0) scale(.985);
        pointer-events: none;
        transition: opacity .24s ease, transform .24s ease, visibility .24s ease;
    }

    .prk-mobile-app-banner.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translate3d(0, 0, 0) scale(1);
        pointer-events: auto;
    }

    .prk-mobile-app-banner.is-leaving {
        opacity: 0;
        visibility: hidden;
        transform: translate3d(0, 12px, 0) scale(.985);
        pointer-events: none;
    }

    .prk-mobile-app-banner,
    .prk-mobile-app-banner *,
    .prk-mobile-app-banner *::before,
    .prk-mobile-app-banner *::after {
        box-sizing: border-box;
    }

    .prk-mobile-app-banner__inner {
        position: relative;
        display: flex;
        align-items: center;
        gap: 9px;
        width: min(100%, 560px);
        min-height: 58px;
        margin-inline: auto;
        padding: 7px 8px;
        border: 1px solid rgba(255, 255, 255, .07);
        border-radius: var(--prk-mab-radius, 14px);
        background: var(--prk-mab-bg, #252a32);
        color: var(--prk-mab-text, #fff);
        box-shadow: 0 14px 34px rgba(17, 24, 39, .28);
        isolation: isolate;
        overflow: hidden;
    }

    .prk-mobile-app-banner__inner::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background:
            radial-gradient(circle at 12% 50%, rgba(255, 255, 255, .08), transparent 34%),
            linear-gradient(135deg, rgba(255, 255, 255, .025), transparent 55%);
        pointer-events: none;
    }

    .prk-mobile-app-banner__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 11px;
        background: rgba(255, 255, 255, .06);
        color: currentColor;
        cursor: pointer;
        opacity: .9;
        appearance: none;
        transition: background-color .2s ease, opacity .2s ease, transform .2s ease;
    }

    .prk-mobile-app-banner__close:hover,
    .prk-mobile-app-banner__close:focus-visible {
        background: rgba(255, 255, 255, .13);
        opacity: 1;
    }

    .prk-mobile-app-banner__close:active {
        transform: scale(.94);
    }

    .prk-mobile-app-banner__close:focus-visible,
    .prk-mobile-app-banner__button:focus-visible {
        outline: 2px solid rgba(255, 255, 255, .9);
        outline-offset: 2px;
    }

    .prk-mobile-app-banner__close svg {
        display: block;
        width: 21px;
        height: 21px;
    }

    .prk-mobile-app-banner__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        border-radius: 13px;
        background: rgba(255, 255, 255, .06);
        color: var(--prk-mab-button-bg, var(--prk-color-link, #1687f8));
        overflow: hidden;
    }

    .prk-mobile-app-banner__icon img,
    .prk-mobile-app-banner__icon svg {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .prk-mobile-app-banner__content {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        flex-direction: column;
        justify-content: center;
        gap: 1px;
    }

    .prk-mobile-app-banner__title,
    .prk-mobile-app-banner__subtitle {
        display: block;
        min-width: 0;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .prk-mobile-app-banner__title {
        color: inherit;
        font-size: 12px;
        font-weight: 750;
        line-height: 1.8;
    }

    .prk-mobile-app-banner__subtitle {
        color: rgba(255, 255, 255, .66);
        color: color-mix(in srgb, var(--prk-mab-text, #fff) 66%, transparent);
        font-size: 10px;
        font-weight: 500;
        line-height: 1.6;
    }

    .prk-mobile-app-banner__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        min-width: 58px;
        height: 38px;
        margin: 0;
        padding: 0 15px;
        border: 0;
        border-radius: 10px;
        background: var(--prk-mab-button-bg, var(--prk-color-link, #1687f8));
        color: var(--prk-mab-button-text, #fff);
        font-size: 12px;
        font-weight: 750;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
        box-shadow: 0 7px 16px rgba(22, 135, 248, .22);
        box-shadow: 0 7px 16px color-mix(in srgb, var(--prk-mab-button-bg, #1687f8) 24%, transparent);
        transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
    }

    .prk-mobile-app-banner__button:hover,
    .prk-mobile-app-banner__button:focus-visible {
        color: var(--prk-mab-button-text, #fff);
        filter: brightness(1.06);
        transform: translateY(-1px);
        text-decoration: none;
        box-shadow: 0 9px 20px rgba(22, 135, 248, .28);
        box-shadow: 0 9px 20px color-mix(in srgb, var(--prk-mab-button-bg, #1687f8) 30%, transparent);
    }
}

@media (max-width: 420px) {
    .prk-mobile-app-banner {
        inset-inline: 12px;
    }

    .prk-mobile-app-banner__inner {
        gap: 7px;
        min-height: 56px;
        padding: 6px;
    }

    .prk-mobile-app-banner__close {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }

    .prk-mobile-app-banner__icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    .prk-mobile-app-banner__title {
        font-size: 11px;
    }

    .prk-mobile-app-banner__button {
        min-width: 54px;
        height: 36px;
        padding-inline: 12px;
        font-size: 11px;
    }
}

@media (max-width: 350px) {
    .prk-mobile-app-banner__icon,
    .prk-mobile-app-banner__subtitle {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .prk-mobile-app-banner,
    .prk-mobile-app-banner *,
    .prk-mobile-app-banner *::before,
    .prk-mobile-app-banner *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}