/*
|--------------------------------------------------------------------------
| ONLY_MEMBERS_APP_FEED_V1_CSS
|--------------------------------------------------------------------------
|
| Nur installierter Only-Members-App-Feed.
| Browser-Feed bleibt unverändert.
|
*/


/*
|--------------------------------------------------------------------------
| Feed-Inhalt volle Breite
|--------------------------------------------------------------------------
*/

html.member-app-feed-v1
.member-feed-content-layout {
    width:
        min(
            1180px,
            calc(100% - 24px)
        );

    margin-top: 14px;

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

    gap: 14px;
}


/*
 * Die feste Web-Regelbox im App-Feed ausblenden.
 */
html.member-app-feed-v1
.member-feed-content-layout
> .member-feed-rules-card {
    display: none !important;
}


/*
|--------------------------------------------------------------------------
| Kleine App-Aktionsleiste
|--------------------------------------------------------------------------
*/

.member-app-feed-actions-v1 {
    display: flex;

    width:
        min(
            1180px,
            calc(100% - 24px)
        );

    margin:
        0
        auto
        10px;

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

    gap: 8px;
}


.member-app-feed-rules-button-v1 {
    min-height: 38px;

    display: inline-flex;

    padding:
        8px
        13px;

    border:
        1px solid
        rgba(0, 140, 255, .30);

    border-radius: 11px;

    background:
        rgba(0, 140, 255, .07);

    color:
        rgba(255, 255, 255, .82);

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

    gap: 7px;

    font: inherit;
    font-size: .74rem;
    font-weight: 900;

    cursor: pointer;
}


.member-app-feed-rules-button-v1
i {
    color: #1598ff;
}


/*
|--------------------------------------------------------------------------
| Regel-Dialog
|--------------------------------------------------------------------------
*/

.member-app-feed-rules-dialog-v1 {
    position: fixed;

    inset: 0;

    z-index: 7000;

    display: flex;

    padding: 20px;

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

    box-sizing: border-box;
}


.member-app-feed-rules-dialog-v1[hidden] {
    display: none !important;
}


.member-app-feed-rules-backdrop-v1 {
    position: absolute;

    inset: 0;

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

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


.member-app-feed-rules-panel-v1 {
    position: relative;

    z-index: 1;

    width: min(620px, 100%);

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

    overflow-y: auto;

    padding: 20px;

    border:
        1px solid
        rgba(0, 140, 255, .34);

    border-radius: 20px;

    background:
        radial-gradient(
            circle at top right,
            rgba(0, 140, 255, .09),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #07131e,
            #03080c
        );

    box-shadow:
        0
        28px
        80px
        rgba(0, 0, 0, .66);

    box-sizing: border-box;
}


.member-app-feed-rules-head-v1 {
    position: sticky;

    top: -20px;

    z-index: 2;

    display: flex;

    margin:
        -20px
        -20px
        16px;

    padding:
        16px
        18px;

    border-bottom:
        1px solid
        rgba(0, 140, 255, .14);

    background:
        rgba(4, 12, 18, .96);

    align-items: center;

    gap: 10px;

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


.member-app-feed-rules-head-v1
i {
    color: #1598ff;
}


.member-app-feed-rules-head-v1
strong {
    min-width: 0;

    flex: 1;

    color: #fff;

    font-size: .95rem;
}


.member-app-feed-rules-close-v1 {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: inline-flex;

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

    border-radius: 10px;

    background:
        rgba(255, 255, 255, .045);

    color: #fff;

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

    cursor: pointer;
}


/*
 * Geklonte bestehende Regelbox im Dialog.
 */
.member-app-feed-rules-dialog-v1
.member-feed-rules-card {
    display: block !important;

    position: static !important;

    width: 100%;

    margin: 0;

    padding: 0;

    border: 0;

    background: transparent;

    box-shadow: none;
}


.member-app-feed-rules-dialog-v1
.member-feed-rules-head {
    display: none;
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1000px) {

    html.member-app-feed-v1
    .member-feed-content-layout,

    .member-app-feed-actions-v1 {
        width: calc(100% - 20px);
    }

}


/*
|--------------------------------------------------------------------------
| Smartphone
|--------------------------------------------------------------------------
*/

@media (max-width: 650px) {

    html.member-app-feed-v1
    .member-feed-content-layout,

    .member-app-feed-actions-v1 {
        width: calc(100% - 12px);
    }


    .member-app-feed-actions-v1 {
        margin-bottom: 7px;
    }


    .member-app-feed-rules-button-v1 {
        min-height: 36px;

        padding:
            7px
            11px;

        font-size: .69rem;
    }


    .member-app-feed-rules-dialog-v1 {
        padding:
            8px
            8px
            calc(
                76px
                +
                env(
                    safe-area-inset-bottom,
                    0px
                )
            );

        align-items: flex-end;
    }


    .member-app-feed-rules-panel-v1 {
        width: 100%;

        max-height: 82vh;

        padding: 17px;

        border-radius: 20px;
    }


    .member-app-feed-rules-head-v1 {
        top: -17px;

        margin:
            -17px
            -17px
            14px;

        padding:
            14px
            15px;
    }

}