/* ==========================================================
   DALLAS MEDIA GROUP
   WEBSITE → APP PROMOTION
   ========================================================== */

.dm-app-promo {
    position:
        fixed;

    z-index:
        9500;

    left:
        50%;

    bottom:
        20px;

    width:
        min(
            1180px,
            calc(
                100vw
                - 36px
            )
        );

    transform:
        translateX(
            -50%
        );

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

    border-radius:
        18px;

    background:
        linear-gradient(
            105deg,
            #111516 0%,
            #18191a 48%,
            #290b0d 100%
        );

    box-shadow:
        0
        20px
        55px
        rgba(
            0,
            0,
            0,
            .30
        );

    color:
        #fff;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translate(
            -50%,
            22px
        );

    transition:
        opacity
        .28s
        ease,
        transform
        .28s
        ease,
        visibility
        .28s
        ease;
}


.dm-app-promo.is-visible {
    opacity:
        1;

    visibility:
        visible;

    transform:
        translate(
            -50%,
            0
        );
}


.dm-app-promo-inner {
    display:
        grid;

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

    align-items:
        center;

    gap:
        28px;

    min-height:
        190px;

    padding:
        25px
        70px
        25px
        28px;
}


.dm-app-promo-main {
    display:
        grid;

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

    align-items:
        center;

    gap:
        24px;
}


.dm-app-promo-logo {
    display:
        grid;

    place-items:
        center;

    width:
        108px;

    height:
        108px;

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            .04
        );
}


.dm-app-promo-logo img {
    width:
        94px;

    height:
        94px;

    object-fit:
        contain;
}


.dm-app-promo-copy h2 {
    margin:
        0;

    color:
        #fff;

    font-size:
        clamp(
            22px,
            2.2vw,
            31px
        );

    line-height:
        1.08;
}


.dm-app-promo-copy > p {
    margin:
        8px
        0
        17px;

    color:
        #d9dcde;

    font-size:
        15px;

    line-height:
        1.45;
}


.dm-app-promo-benefits {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        15px
        25px;
}


.dm-app-promo-benefit {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #f1f2f2;

    font-size:
        11px;
}


.dm-app-promo-benefit svg {
    width:
        21px;

    height:
        21px;

    flex:
        0 0
        21px;

    fill:
        none;

    stroke:
        #ed1c24;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.dm-app-promo-benefit span {
    display:
        grid;
}


.dm-app-promo-benefit strong {
    color:
        #fff;

    font-size:
        10px;
}


.dm-app-promo-benefit small {
    margin-top:
        1px;

    color:
        #aeb4b8;

    font-size:
        8px;
}


.dm-app-promo-action {
    width:
        min(
            300px,
            28vw
        );

    padding:
        22px;

    border-left:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );
}


.dm-app-promo-action h3 {
    margin:
        0
        0
        7px;

    font-size:
        18px;

    line-height:
        1.2;
}


.dm-app-promo-action p {
    margin:
        0
        0
        14px;

    color:
        #adb2b5;

    font-size:
        10px;

    line-height:
        1.5;
}


.dm-app-promo-install {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        47px;

    padding:
        0
        18px;

    border:
        0;

    border-radius:
        24px;

    background:
        linear-gradient(
            90deg,
            #ef1b24,
            #cf001f
        );

    color:
        #fff;

    font-weight:
        850;

    font-size:
        12px;

    text-decoration:
        none;

    cursor:
        pointer;
}


.dm-app-promo-install:hover {
    background:
        linear-gradient(
            90deg,
            #fa242d,
            #de0022
        );
}


.dm-app-promo-secondary {
    display:
        block;

    width:
        100%;

    margin-top:
        10px;

    border:
        0;

    background:
        transparent;

    color:
        #aeb3b6;

    font-size:
        9px;

    cursor:
        pointer;
}


.dm-app-promo-close {
    position:
        absolute;

    top:
        16px;

    right:
        16px;

    display:
        grid;

    place-items:
        center;

    width:
        33px;

    height:
        33px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .45
        );

    border-radius:
        50%;

    background:
        rgba(
            0,
            0,
            0,
            .20
        );

    color:
        #fff;

    font-size:
        20px;

    line-height:
        1;

    cursor:
        pointer;
}


.dm-app-promo-close:hover {
    background:
        rgba(
            255,
            255,
            255,
            .10
        );
}


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

@media (
    max-width:
    760px
) {

    .dm-app-promo {
        left:
            10px;

        right:
            10px;

        bottom:
            10px;

        width:
            auto;

        max-width:
            none;

        transform:
            translateY(
                20px
            );

        border-radius:
            15px;
    }


    .dm-app-promo.is-visible {
        transform:
            translateY(
                0
            );
    }


    .dm-app-promo-inner {
        display:
            block;

        min-height:
            0;

        padding:
            17px
            16px
            15px;
    }


    .dm-app-promo-main {
        grid-template-columns:
            58px
            minmax(
                0,
                1fr
            );

        gap:
            12px;

        padding-right:
            28px;
    }


    .dm-app-promo-logo {
        width:
            56px;

        height:
            56px;
    }


    .dm-app-promo-logo img {
        width:
            52px;

        height:
            52px;
    }


    .dm-app-promo-copy h2 {
        font-size:
            16px;
    }


    .dm-app-promo-copy > p {
        margin:
            5px
            0
            0;

        font-size:
            10px;

        line-height:
            1.4;
    }


    .dm-app-promo-benefits {
        grid-column:
            1 / -1;

        display:
            grid;

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

        gap:
            8px;

        margin-top:
            14px;
    }


    .dm-app-promo-benefit {
        gap:
            6px;

        font-size:
            9px;
    }


    .dm-app-promo-benefit svg {
        width:
            18px;

        height:
            18px;
    }


    .dm-app-promo-benefit strong {
        font-size:
            8px;
    }


    .dm-app-promo-benefit small {
        display:
            none;
    }


    .dm-app-promo-action {
        width:
            100%;

        margin-top:
            14px;

        padding:
            13px
            0
            0;

        border-top:
            1px solid
            rgba(
                255,
                255,
                255,
                .10
            );

        border-left:
            0;
    }


    .dm-app-promo-action h3,
    .dm-app-promo-action p {
        display:
            none;
    }


    .dm-app-promo-install {
        min-height:
            43px;

        border-radius:
            10px;

        font-size:
            11px;
    }


    .dm-app-promo-secondary {
        margin-top:
            7px;
    }


    .dm-app-promo-close {
        top:
            10px;

        right:
            10px;

        width:
            28px;

        height:
            28px;

        font-size:
            17px;
    }

}


/* Never show website promotion inside the app. */

body:has(#dallasNativeApp)
.dm-app-promo {
    display:
        none !important;
}