/*
 * Styles for the app download flow.
 *
 * Used by two surfaces:
 *   - download_app_template.html: the standalone /download page (full page).
 *   - selection_template.html: the inline QR panel toggled on desktop when the
 *     user clicks "Download App" inside the iframe. The panel is pre-rendered
 *     server-side to avoid iframe navigation, which broke third-party embeddings.
 *
 * All #download-panel rules are scoped to that id to avoid conflicts with
 * selection.css rules (e.g. .content, .head-text) loaded on the same page.
 */

#qr-image,
.desktop-flow {
    display: flex;
}

#download-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 28px;
}

#download-panel .head-text {
    font-weight: 700;
    font-size: 20px;
    line-height: 28px
}

#download-panel #qr-image {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin: auto;
}

#download-panel .qrcode {
    height: 100%;
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#download-panel .rounded_corners {
    border-radius: 16px;
}

#download-panel .text-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media screen and (min-width: 760px) {
    #download-panel {
        height: 100%;
        display: grid;
        grid-template-areas: "part1 part2";
        grid-template-columns: auto 1fr;
        grid-template-rows: 1fr;
        gap: 48px;
        text-align: left;
        padding: 48px;
    }

    #download-panel #part1 {
        display: flex;
        flex-direction: column;
        grid-area: part1;
        max-height: 100%;
        margin: auto 0px;
    }

    #download-panel #part2 {
        display: flex;
        flex-direction: column;
        grid-area: part2;
        overflow-y: scroll;
        max-height: 100%;
        margin: auto 0px;
    }

    #download-panel .text-block {
        align-items: start;
    }
}