body.is-mobile-layout {
    #payment_order {
        & .table {
            grid-template-columns: 2.4rem minmax(0, 1fr) max-content max-content 1.4rem;
        }

        & .payment_order_container > div:nth-child(5n + 2) {
            grid-column: 2 / 4;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        & .payment_order_container > div:nth-child(5n + 3) {
            display: none;
        }
    }

    #payment_container {
        display: block;

        & .betalingsbetingelser {
            width: 100%;
            border-right: 0;
            margin-top: 0.75rem;
        }
    }

    #payment_submit {
        width: 100%;
        margin-top: 0.75rem;
        padding: 0;
    }
}

#payment_container {
    display: flex;
    gap: 1rem;

    & .betalingsbetingelser {
        width: 50%;
        padding: 0.5em 0em 0.25em 0em;
        border-right: 0.62rem solid var(--white);
        float: none;
        line-height: 0.94rem;
        background-color: var(--white);
    }
}

#payment_submit {
    float: none;
    width: 50%;
    padding: 1em 0;
    margin-top: 1em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;

    & > div {
        margin: 0;
        min-width: 0;
    }

    & .payment-method-cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        min-height: 4.7rem;
        padding: 0.45rem;
        border: 1px solid var(--blue-dark);
        border-radius: 0.19rem;
        background: var(--blue-light);
        color: var(--surface-dark);
        text-decoration: none;
        transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
        text-align: center;
    }

    & .payment-method-cta:hover {
        border-color: var(--steel);
        background: var(--white);
        box-shadow: 0 0.12rem 0.38rem var(--trans-a10);
    }

    & .payment-method-logo-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        min-height: 1.25rem;
        width: 100%;
    }

    & .payment-method-prefix {
        font-size: 0.72rem;
        line-height: 1.1;
        font-weight: 600;
    }

    & .payment-method-logo {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 0;
        padding: 0;
        overflow: visible;
    }

    & .payment-method-logo svg {
        display: block;
        width: auto;
        height: 1.05rem;
        max-width: 4.7rem;
    }

    & .payment-method-item--card .payment-method-logo svg {
        height: 0.92rem;
        max-width: 2.9rem;
    }

    & .payment-method-text {
        font-size: 0.82rem;
        font-weight: bold;
        line-height: 1.2;
    }
}

.profiles_former {
    & > div {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        margin-bottom: 2em;
            

        & > div {
            padding: 1em;
            & div:nth-child(1) {
                font-weight: bold;
            }
        }
    }
}

.admin_backend_front .admin-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1em;
    margin-top: 2em;
}

.admin-card {
    border: 1px solid var(--blue-dark);
    border-radius: 0.38rem;
    overflow: hidden;
    background-color: var(--white);
}

.admin-card > .header {
    background-color: var(--blue-dark);
    padding: 1em;
    font-weight: bold;
}

.admin-card .admin-card-links {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: 1em;
}

.admin-card .admin-card-links a {
    text-decoration: none;
}

.admin_backend_front .admin-intro {
    max-width: 60em;
}

.admin_backend_front .admin-actions a {
    display: inline-block;
    padding: 0.6em 1em;
    border: 1px solid var(--blue-dark);
    border-radius: 0.25rem;
    background-color: var(--white);
    text-decoration: none;
}

.admin-section-block {
    margin-top: 2em;
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    margin: 1em 0;
}

.admin-edit-panel {
    margin: 1em 0 2em 0;
}

.admin-form-card {
    margin-top: 1em;
}

.admin-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1em;
}

.admin-form.two-cols {
    padding: 1em;
}

.admin-form label {
    display: block;
    margin-bottom: 0.4em;
    font-weight: bold;
}

.admin-form input[type='text'], .admin-form textarea, .admin-form select {
    width: 100%;
}

.admin-form-errors {
    padding: 1em;
    color: var(--brand-pink);
    font-weight: bold;
}

.admin-checks {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    justify-content: center;
}

.admin-note {
    padding: 1em;
    background-color: var(--white);
    border-radius: 0.25rem;
}

.admin-two-col {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1em;
}

.admin-moderation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1em;
    margin-top: 1em;
}

.admin-moderation-card {
    border: 1px solid var(--blue-dark);
    border-radius: 0.38rem;
    overflow: hidden;
    background-color: var(--white);
}

.admin-moderation-card > div {
    padding: 0.8em;
}

.admin-moderation-card .header {
    background-color: var(--blue-dark);
    font-weight: bold;
}

.admin-moderation-card img, .admin-moderation-card video {
    max-width: 100%;
    height: auto;
}

.admin-banner-editor {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1em;
}

.admin-banner-preview {
    padding: 1em;
    text-align: center;
}

.admin-banner-preview img {
    max-width: 100%;
    height: auto;
}

.admin-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1em;
}

.admin-media-grid .admin-card img,
.admin-media-grid .admin-card video {
    width: 100%;
    height: auto;
}

.date-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5em;
}

.pick-date {
    min-width: 2.7em;
}

.admin-modal {
    width: min(60rem, 95vw);
    max-height: 90vh;
}

.profile_notes { 
    & > div {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        margin-bottom: 2em;

        & > div {
            padding: 1em;
            & div:nth-child(1) {
                font-weight: bold;
            }
        }
    }
}

.admprofile_sidepanel {

    & .profile_sidepanel {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        margin-bottom: 2em;

        & > div {
            padding: 0.4em;
        }

        & .header {
            background-color: var(--blue-dark);
            grid-column: span 3;
            padding: 1em;
            font-weight: bold;
        }

    }

    & .profile_doubles {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        margin-bottom: 2em;

        & > div {
            padding: 0.6em;
        }

        & .m1 {
            font-weight: bold;
        }

        & .header {
            background-color: var(--blue-dark);
            grid-column: span 5;
            padding: 1em;
            font-weight: bold;
            
        }
    
    }

    & .active {
        border: 1px solid var(--black);
        padding: 0.31rem;
    }

    & .deleted {
        background-color:var(--accent-orange);
    }

    & .exists {
        background-color:var(--icon-online);
    }
}

.admprofile_birthdays {

    & .profile_birthdays {
        display: grid;
        grid-template-columns: 1fr 3fr 1fr;
        margin-bottom: 2em;

        & > div {
            display: contents;
        }

        & > div > div {
            padding: 0.4em;
        }

    }
}

.admprofile_debat {

    & .debat_list {
        display: grid;
        grid-template-columns: 1fr 3fr 1fr;
        margin: 2em 0 2em 0;

        & > div {
            display: contents;
        }

        & div[data-debat='reason'] {
            margin-bottom: 2em;
        }

        & > div > div {
            padding: 0.4em;
        }
    }
}

:is(.admprofile_sidepanel .profile_sidepanel, .admprofile_birthdays .profile_birthdays, .admprofile_debat .debat_list) {
    & .header {
        background-color: var(--blue-dark);
        padding: 1em;
        font-weight: bold;
    }

    & :is(.fakelevel, .funktioner) > button {
        margin: 0.3em;
        border: 0.12rem solid var(--gray-line-soft);
    }
}


.bf-trash-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--steel-dark);
    text-decoration: none;
    line-height: 1;

    & svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    &:hover {
        color: var(--brand-pink);
    }
}

.form-setup {
    display: grid;
    grid-template-columns: 1fr 4fr;
    gap: 1em;
    margin: 2em 0 1em 0;

    & input, select {
        width: 100%;
    }

    & div:nth-child(odd) {
        font-weight: bold;
    }
}

.header {
    font-weight: bold;
    padding: 1em 0 1.2em 2em;
	background-color: var(--blue-dark);
	color: var(--gray-text);
    margin-top: 1em;
}

.lounges_merge, .lounge2_details {
    .title_box {
        padding: 2em;
        border: 1px solid var(--white);
    }

    & div {
        padding: 0.75rem;
        white-space: pre-line;
    }
}

#lounge_description {
    padding: 0.75rem;
    white-space: pre-line;
	line-height: 0.94rem;
	padding: 0.25rem;
	background-color: var(--white);
}

#lounges_error {
    color: var(--red);
}

.search_save {
    & input {
        width: 100%;
    }
}

.pictures_edit {
    max-width: 100%;
    max-height: 100%;
    border: 0.94rem solid var(--gray-line-soft);
}

.payment_payment {
    & .spacing {
        margin-top: 2em;
    }
}

#show_report {
    background-color: var(--blue-dark);
    clear: both;
    display: flex;
    align-items: flex-start;
    gap: 0.62rem;

    & > .bf-report-cta__icon {
        margin: 0.5rem 0 0 0.38rem;
    }

    & > .bf-report-cta__link {
        margin: 0.5rem 1rem 1rem 0;
        width: auto;
        min-width: 0;
        flex: 1 1 auto;
        color: inherit;
    }
}

/* Vis-toggle: ikon-knapper erstatter "vis Oversigt/Galleri"-labelen
   og samler Nulstil i samme pille. Ikonet viser den modsatte tilstand
   (klik = skift). De originale <a>'s og .qsort_optionbox_options
   beholdes (klik-targets) men skjules. */
.bf-vis-icons {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.31rem 0.31rem 0;
}
.bf-vis-btn {
    background: var(--trans-a00);
    border: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bf-vis-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}

/* ====================================================================
   Messenger compose dock in mobile status-pane bottombar.
    Migrated from legacy mobile stylesheet wrapper.
   ==================================================================== */
body.is-mobile-layout #bf_mobile_swiper > .bf-pane--status > #bf_status_bottombar > .msgr_compose {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border-top: 1px solid var(--gray-soft);

    & .msgr_attach_dropzone {
        display: none;
    }
    & .upload-queue:not(:empty) {
        padding: 0.25rem 0.5rem;
        font-size: 11px;
        color: var(--gray-text);
        background: var(--white);
        border-bottom: 1px solid var(--gray-soft);
    }

    & .msgr_compose_row {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.38rem;
    }
    & .msgr_compose_row.is-focused {
        align-items: stretch;
    }

    & .msgr_tools {
        display: flex;
        align-items: center;
        gap: 0;
        flex-shrink: 0;

        & .msgr_tool {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.75rem;
            height: 2rem;
            color: var(--gray-line-soft);
            text-decoration: none;
            font-size: 18px;
            line-height: 1;
        }
        & .msgr_tool:hover {
            color: var(--surface-dark);
        }
        & .msgr_tool [data-auto="icon"] {
            display: inline-flex;
            width: 1.12rem;
            height: 1.12rem;
        }
        & .msgr_tool [data-auto="icon"] svg {
            width: 100%;
            height: 100%;
            display: block;
        }
    }

    & .msgr_compose_row.is-focused .msgr_tools {
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        & .msgr_tool {
            width: 1.75rem;
            height: 1.5rem;
            font-size: 16px;
        }
    }

    & textarea {
        flex: 1 1 auto;
        min-width: 0;
        height: 2rem;
        min-height: 2rem;
        max-height: 7.5rem;
        padding: 0.38rem 0.62rem;
        border: 1px solid var(--gray-soft);
        border-radius: 1rem;
        resize: none;
        font: inherit;
        line-height: 1.12rem;
    }
    & textarea:focus {
        outline: none;
        border-color: var(--gray-soft);
        box-shadow: none;
    }
    & .msgr_compose_row.is-focused textarea {
        min-height: 6.5rem;
        height: 6.5rem;
    }

    & .msgr_send {
        flex-shrink: 0;
        background: var(--accent-blue);
        color: var(--white);
        border: 0;
        height: 2rem;
        padding: 0 0.88rem;
        border-radius: 1rem;
        font-weight: 600;
        cursor: pointer;
        font: inherit;
        line-height: 2rem;
    }
    & .msgr_compose_row.is-focused .msgr_send {
        height: auto;
        line-height: 1;
        align-self: flex-end;
    }

    & .msgr_actions {
        display: contents;
    }
    & .msgr_actions .msgr_report_inline {
        display: none;
    }
    & .msgr_compose_row.is-focused .msgr_actions {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        width: 3.5rem;
        gap: 0.25rem;
    }
    & .msgr_compose_row.is-focused .msgr_actions .msgr_report_inline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 50%;
        color: var(--accent-blue);
        background: var(--white);
        border: 1px solid var(--gray-soft);
        border-radius: 0.75rem;
        font-size: 18px;
        line-height: 1;
        text-decoration: none;

        & [data-auto="icon"] {
            display: inline-flex;
            width: 1.12rem;
            height: 1.12rem;
        }
        & [data-auto="icon"] svg {
            width: 100%;
            height: 100%;
            display: block;
        }
    }
    & .msgr_compose_row.is-focused .msgr_actions .msgr_report_inline:hover {
        color: var(--surface-dark);
        background: var(--gray-soft);
    }
    & .msgr_compose_row.is-focused .msgr_actions .msgr_send {
        flex: 1 1 50%;
        height: auto;
        line-height: 1;
        align-self: stretch;
        width: 100%;
    }
    & .msgr_send:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
}

body.is-mobile-layout {
& #bf_mobile_swiper > .bf-pane--content:has(> #bf_content_bottombar) > .bf-content-scroll {
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--bf-bottomnav-h, 3.5rem);
}

/* ====================================================================
    Mobile status-pane: mail inbox + messenger visning.
    Migreret fra legacy mobil-stylesheet wrapper.
    ==================================================================== */
& #bf_mobile_swiper #bf_status_tab_body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    display: flex;
    flex-direction: column;

    /* I tab-bodyen er fanen selv overskriften — drop H1
       ("Post") og stram .innerdiv-padding så listen får
       plads i den smalle status-pane. */
    & .innerdiv {
        padding: 0;
    }

    & .section_mail_show > .innerdiv h1 {
        display: none;
    }

    /* Skjul desktop heading i mobil; mobil-listen bruger eget layout. */
    & #mail_heading {
        display: none;
    }

    /* Vis kun selve H1 ("Post") i toppen — settings-strippen
       (lyd-toggle) er noisy i den smalle pane og hører ellers
       hjemme et andet sted (måske i et settings-tab senere). */
    & .section_mail_inbox > .top {
        display: block;
        padding: 0.38rem 0.5rem 0;
    }
    & .section_mail_inbox > .top > div:not(:first-child),
    & .section_mail_inbox > .top [data-template="mail_settings"],
    & .section_mail_inbox > .top #mail_settings {
        display: none;
    }

        /* Mobil-rækker vises kompakt i to tekstlinjer:
             [ avatar + navn ] og dato under navnet.
             Matcher nuværende DOM hvor icon+username ligger i samme wrapper. */
    & #mail_lines > div {
        display: block;
        min-height: 0;
        padding: 0.44rem 0.56rem 0.38rem;
        /* Long-press må ikke trigge native tekst-selektion /
           callout-menu på iOS+Android. */
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
    }

    & #mail_lines > div > div:first-child {
        display: flex;
        align-items: center;
        gap: 0.62rem;
        min-width: 0;
    }

    & #mail_lines .mail_icon {
        width: 2rem;
        height: 2rem;
        flex: 0 0 2rem;
        margin: 0;
        padding: 0;

        & img, & svg {
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            object-fit: cover;
        }
    }

    /* Username på første tekstlinje, dato på anden. */
    & #mail_lines .mail_username {
        flex: 1 1 auto;
        min-width: 0;
        font-weight: 600;
        line-height: 1.15;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    & #mail_lines .mail_date {
        display: block;
        margin: 0;
        margin-left: 2.62rem;
        padding: 0.12rem 0 0 0;
        font-size: 11px;
        color: var(--gray-text);
        line-height: 1.15;
    }

    /* Status-icon og PDF/SLET hører til tråd-visning, ikke listen. */
    & #mail_lines .mail_status,
    & #mail_lines .mail_options {
        display: none;
    }

    /* Ulæst: bold username + venstre-stribe fra shared #mail_lines. */
    & #mail_lines .mail_unread {
        & .mail_username {
            color: var(--surface-dark);
            font-weight: 700;
        }
    }

    /* === Mobil messenger (egen template) ===
       .section_mail_messenger har 4 børn: header, blocked, messages, compose.
       Flex-column: header top, messages flex:1 + scroll, compose pinned. */
    & .section_mail_messenger {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        background: var(--trans-a00);
    }
    & .section_mail_messenger > * { flex-shrink: 0; }

    & .msgr_header {
        display: flex;
        gap: 0.62rem;
        padding: 0.12rem 0.88rem 0.75rem;
        color: var(--white);
        font-weight: 600;
        border-bottom: 1px solid var(--trans-a10);

        & .msgr_back_row {
            display: flex;
            align-items: center;

            & .msgr_back {
                color: var(--white);
                align-items: center;
                gap: 0.25rem;

                & .msgr_back_arrow {
                    display: inline-flex;
                    width: 2rem;
                    height: 2rem;

                    & svg {
                        width: 2rem;
                        height: 2rem;
                        display: block;
                    }
                }
            }
        }

        & .msgr_profile {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;

            & a {
                color: var(--white);
                text-decoration: none;
            }

            & .msgr_title {
                flex: 1 1 auto;
                overflow: hidden;
            }
    
            & .msgr_icon {
                flex: 0 0 auto;
                display: inline-flex;
                align-items: center;
            }
    
            & .msgr_icon img {
                width: 1.5rem;
                height: 1.5rem;
                border-radius: 50%;
                object-fit: cover;
                display: block;
            }

        }
        & .msgr_report {
            color: var(--white);
            text-decoration: none;
            font-size: 16px;
            padding: 0 0.25rem;
            opacity: 0.8;
        }
        & .msgr_report:hover { opacity: 1; }
    }

    & .msgr_blocked {
        padding: 0.5rem 0.62rem;
        font-size: 12px;
        color: var(--gray-text);
        background: var(--yellow-light);
        display: none;
    }

    & .msgr_messages {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.5rem 0.38rem;
        display: flex;
        flex-direction: column;
        background: var(--white);
    }

    & .msgr_presence,
    & #mail_presence {
        margin: 0;
        padding: 0 0.5rem 0.25rem;
        font-size: 11px;
        display: none;
        color: var(--gray-text);
        font-style: italic;
    }
    /* Override desktop's rainbow-on-transparent som ellers
       gør teksten usynlig i den smalle mobil-pane. */
    & #mail_presence > span,
    & #mail_presence > span > span {
        background: none;
        -webkit-background-clip: initial;
        background-clip: initial;
        color: var(--gray-text);
        animation: none;
        font-weight: normal;
        font-size: 11px;
    }
    /* Compose-rækken er nu altid docket i #bf_status_bottombar.
       Header-report skjules via JS-class på .section_mail_messenger når
       compose får fokus. */
    .section_mail_messenger.bf-compose-focused .msgr_header .msgr_report {
        visibility: hidden;
    }

    /* Beskedstack — newest nederst. JS prepender, så reverse. */
    & #mail_read {
        display: flex;
        flex-direction: column-reverse;
    }

    & #mail_read > .mail_msg {
        display: flex;
        flex-direction: column;
        max-width: 80%;
        min-width: 0;

        &.mail_from_me {
            align-self: flex-end;
            align-items: flex-end;
        }
        &.mail_from_them {
            align-self: flex-start;
            align-items: flex-start;
        }
    }

    & #mail_read .mail_header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        padding: 0 0.5rem 0.5rem 0.5rem;
        background: var(--trans-a00);
        color: var(--gray-text);

        & div {
            background: var(--trans-a00);
            color: inherit;
            padding: 0;
        }

        & div:nth-child(2) a {
            color: var(--surface-dark);
            font-weight: 600;
            text-decoration: none;
        }
    }

    & .mail_from_me .mail_header {
        flex-direction: row-reverse;
    }

    & #mail_read .mail_options {
        display: inline-flex;
        gap: 0.25rem;

        /* Per-message delete flyttes til long-press sheet på
           .mail_msg i mobil trådvisning. "FORTRYD" (hvis sat)
           forbliver inline. */
        & .mail_opt_delete_single {
            display: none;
        }
    }

    & #mail_read .mail_body {
        display: block;
        width: auto;
        max-width: 100%;
        margin: 0;
        padding: 0.75rem 1rem 0.75rem 1rem;
        border-radius: 1rem;
        line-height: 1.35;
        word-wrap: break-word;
        overflow-wrap: anywhere;

        & div {
            width: auto;
            margin: 0;
            padding: 0;
            background: var(--trans-a00);
        }
    }

    & .mail_from_me .mail_body {
        background: var(--surface-mid);
        color: var(--white);
        border-bottom-right-radius: 0.25rem;
    }
    & .mail_from_them .mail_body {
        background: var(--blue-dark);
        color: var(--surface-dark);
        border-bottom-left-radius: 0.25rem;
    }

    & #mail_read .mail_attachment {
        width: auto;
        margin: 0.25rem 0 0;
        font-size: 11px;
    }
    /* Skjul desktop's header-kolonnetitler ("Vedhæftet fil" /
       "Størrelse") i den smalle mobil-boble. */
    & #mail_read .mail_attachment .header {
        display: none;
    }
    /* Kompakt chip-stil pr. vedhæftning: paperclip + navn + størrelse
       i én linje, i stedet for desktop's 4-kolonne grid. */
    & #mail_read .mail_attachment .attachment {
        display: flex;
        align-items: center;
        gap: 0.38rem;
        padding: 0.25rem 0.5rem;
        margin-top: 0.25rem;
        background: var(--white);
        border-radius: 0.62rem;
        width: fit-content;
        max-width: 100%;
    }
    & #mail_read .mail_attachment .attachment > div {
        width: auto;
        padding: 0;
        border: 0;
    }
    & #mail_read .mail_attachment .attachment > div:nth-child(1)::before {
        content: '📎';
        font-size: 13px;
    }
    & #mail_read .mail_attachment .attachment > div:nth-child(2) {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 0 1 auto;
    }
    & #mail_read .mail_attachment .attachment > div:nth-child(2) a {
        color: var(--accent-blue);
        text-decoration: underline;
    }
    & #mail_read .mail_attachment .attachment > div:nth-child(3) {
        color: var(--steel-dark);
        flex: 0 0 auto;
    }
    & #mail_read .mail_attachment .attachment > div:nth-child(4) {
        display: none;
    }
    /* Begræns embeds (img/iframe/table) i bobler så HTML-mail
       med store billeder eller tabeller ikke skubber hele
       messenger-pane'en horisontalt. */
    & #mail_read .mail_body img,
    & #mail_read .mail_body iframe,
    & #mail_read .mail_body video {
        max-width: 100%;
        height: auto;
    }
    & #mail_read .mail_body table {
        max-width: 100%;
        table-layout: auto;
    }
    & #mail_read .mail_msg {
        max-width: 100%;
        overflow: hidden;
    }
    & #mail_read .mail_attachment .attachment img {
        max-width: 100%;
        height: auto;
    }
}
/* Skjul legacy status container i mobile swiper. */
& #bf_mobile_swiper #bf_status_legacy {
    display: none;
}
}
/* ====================================================================
   Mobile diary form, chat layout, chat editor and chat box.
    Migrated from legacy mobile stylesheet wrapper.
   ==================================================================== */
body.is-mobile-layout .section_diary {
    & .innerdiv > .box_outer_blue_gradient[data-template="diary_write"],
    & > .box_outer_blue_gradient[data-template="diary_write"] {
        padding: 0.5rem;
    }
    & #dbed {
        & > b {
            color: var(--surface-dark);
        }

        & [data-auto="txt-input"], & textarea {
            margin-top: 0.38em;
            border-radius: 0.62rem;
        }

        & textarea {
            background: var(--white);
            padding: 0.75em;
            min-height: 4em;
            width: 100%;
        }
    }

    & .edit_options {
        grid-template-columns: 3fr 2fr;

        & > div {
            font-size: var(--fs-xs);
            color: var(--steel-dark);
            text-transform: uppercase;
        }

        & > div:nth-child(3) {
            grid-column: 1 / -1;
            justify-self: stretch;
            text-transform: none;
            letter-spacing: 0;
            min-width: 0;

            & > a,
            & [data-submit] {
                display: block;
                width: 100%;
                text-align: center;
                padding: 0.62rem 0.88rem;
                border-radius: 0.62rem;
                background: linear-gradient(180deg, var(--c-6666ff) 0%, var(--c-6666ff) 100%);
                color: var(--white);
                font-weight: 600;
                font-size: var(--fs-body);
                text-decoration: none;
                box-shadow: 0 1px 2px var(--trans-a30);
                margin: 0.19rem 0 0;
            }
            & > a:active {
                background: linear-gradient(180deg, var(--c-6666ff) 0%, var(--c-2c46c8) 100%);
            }
        }
    }
    /* "Du har endnu ikke skrevet ..." og indlæg-listen ligger pænere
       med lidt padding. */
    & > .innerdiv:last-child {
        padding: 0.25rem 0.5rem 0.75rem;
    }
    & [data-template="diary_none"] {
        color: var(--steel-dark);
        font-size: var(--fs-body);
        padding: 0.62rem 0.25rem;
    }

    /* Diary list: keep existing palette, but reduce legacy spacing and
       improve scanability on narrow screens. */
    & #diary-container .diary-item {
        margin-bottom: 0.62rem;
        border: 1px solid var(--gray-soft);
        border-radius: var(--radius-card);
        background: var(--white);
        overflow: hidden;
    }

    & #diary-container .diary-item .diary-header {
        padding: 0.62rem 0.75rem;
    }

    & #diary-container .diary-item .diary-header .diary-actions a {
        margin: 0 0 0 0.5rem;
    }

    & #diary-container .diary-item .diary-note {
        padding: 0.62rem 0.75rem;
    }

    & #diary-container .diary-item .diary-text {
        padding: 0.88rem 0.75rem;
        line-height: 1.38;
    }

    & #diary-container .diary-item .diary-likedata {
        padding: 0.62rem 0.75rem 0.75rem;
    }
}

body.is-pwa .section_diary {
    & #diary-container .diary-item {
        margin-bottom: 0.62rem;
        border: 1px solid var(--gray-soft);
        border-radius: var(--radius-card);
        background: var(--white);
        overflow: hidden;
    }

    & #diary-container .diary-item .diary-header {
        padding: 0.62rem 0.75rem;
    }

    & #diary-container .diary-item .diary-header .diary-actions a {
        margin: 0 0 0 0.5rem;
    }

    & #diary-container .diary-item .diary-note {
        padding: 0.62rem 0.75rem;
    }

    & #diary-container .diary-item .diary-text {
        padding: 0.88rem 0.75rem;
        line-height: 1.38;
    }

    & #diary-container .diary-item .diary-likedata {
        padding: 0.62rem 0.75rem 0.75rem;
    }
}

body:is(.is-mobile-layout, .is-pwa) .section_diary {
    & #diary_subscribe {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        line-height: 1.3;
        border-radius: var(--radius-card);
    }

    & #diary_subscribe input[type='checkbox'] {
        margin-top: 0.12rem;
        transform: scale(1.12);
    }

    & #diary-container .diary-item .diary-header .diary-actions {
        display: flex;
        align-items: center;
        gap: 0.38rem;
    }

    & #diary-container .diary-item .diary-header .diary-actions a.diary_action_icon {
        margin: 0;
        min-width: 1.72rem;
        min-height: 1.72rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.44rem;
    }

    & #diary-container .diary-item .diary-header .diary-actions a.diary_action_icon [data-auto='icon'] {
        display: inline-flex;
        width: 0.9rem;
        height: 0.9rem;
    }

    & #diary-container .diary-item .diary-header .diary-actions a.diary_action_icon [data-auto='icon'] svg {
        width: 100%;
        height: 100%;
    }

    /* Diary comment composer is rendered by thumb_show() with desktop
       fixed widths; override here so textarea/button stay visible on mobile. */
    & .thumb_comment_box {
        width: auto;
        max-width: 100%;
        margin: 0.38rem 0;
        overflow: visible;
    }

    & .thumb_comment_box#combox {
        margin: 0;
        padding: 0;
        background: transparent;
    }

    & .thumb_textarea {
        width: 100%;
        max-width: 100%;
        display: block;
        background: var(--white);
        color: var(--surface-dark);
        border: 1px solid var(--gray-soft);
        border-radius: 0.62rem;
        padding: 0.62rem;
    }

    & .thumb_comment_box > .fright {
        float: none;
        display: flex;
        justify-content: flex-end;
        padding-top: 0.38rem;
    }

    & .thumb_comment_box#combox > .fright {
        padding-top: 0.5rem;
    }

    & .thumb_comment_box#combox > .fright .btn_normal {
        width: auto;
        min-width: 5.5rem;
        min-height: 2rem;
        padding: 0.38rem 0.75rem;
        border-radius: var(--radius-card);
        border: 1px solid var(--gray-soft);
        background: var(--steel);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;
    }

    & .thumb_comment_box#combox > .fright .btn_normal .left_arrow {
        display: none;
    }

    & .thumb_comment_box#combox > .fright .btn_normal .clear {
        display: none;
    }

    & .thumb_comment_box#combox > .fright .btn_normal > span:nth-child(2) {
        transform: none;
        color: var(--surface-dark);
        font-weight: 700;
        line-height: 1;
    }
}

/* ---------------------------------------------------------------
   Mobil chat: Layoutet skal fylde scroll-containeren med
   #chat_editor klistret i bunden — desktop'ens recalcHeight-JS
   (chat.js) sætter min-height baseret på window.innerHeight,
   hvilket kun virker når chatten ER viewport. På mobil lever
   chatten inde i .bf-pane--content's scroll-container, så vi
   short-circuit'er JS'en (matchMedia-guard i chat.js) og lader
   CSS klare layoutet med flex.

   Indgangen er .section_chat > div (template-roden), som vi gør
   til en flex-column med #chat_content_container som flex:1.
   --------------------------------------------------------------- */
body.is-mobile-layout {
& .section_chat {
    display: flex;
    flex-direction: column;
    min-height: 100%;

    & > div {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }

    & #chat_content_container {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 0.5em;
        height: auto;
    }

    /* Linje-grid: navn-kolonne må gerne wrappe — ellers tvinger en
       lang username horizontal overflow. min-width: 0 nulstiller
       grid-children's "min-content"-default. word-break på selve
       tekst-cellen håndterer ord uden mellemrum (URL'er etc.).
       Bemærk: boyfriend.css sætter overflow:hidden + max-height:100%
       på #chat_content — det clipper indholdet til containerens
       højde, så scroll-containeren har intet at scrolle. På mobil
       scroller vi på #chat_content_container, så indre clip skal
       væk og indholdet vokse naturligt. */
    & #chat_content_container #chat_content {
        grid-template-columns: 30vw 1fr;
        max-width: 100%;
        max-height: none;
        overflow: visible;

        & > div > div {
            min-width: 0;
            word-break: break-word;
            overflow-wrap: anywhere;
        }
    }
}

/* #chat_editor + #chat_box: ligger UDEN for .section_chat fordi
   mobile.js flytter editor-r\u00e6kken op i #bf_status_bottombar (samme
   container som qsort-dock + bottom-nav). De skal styles uafh\u00e6ngigt
   af scope. */

/* Editor-r\u00e6kken bliver flyttet ind i #bf_status_bottombar af mobile.js,
   s\u00e5 den stakker som flex-item over qsort-dock og bottom-nav. Ingen
   background eller top-streg \u2014 lader bottombar'ens gradient skinne
   igennem og integrerer den visuelt med dock + nav. */
& #chat_editor {
    flex: 0 0 auto;
    padding: 0;
    background: transparent;
    border-top: 0;
}

/* #chat_box: messenger-look. Tre kolonner ligesom .msgr_compose_row
   (tools | input | send), og 'Send til' under inputtet i fuld bredde.
   Inputtet er en input[type=text] (ikke textarea) — Enter sender, men
   visuelt fylder den 2 linjer for at matche post-compose-look'et.
   Skjuler desktop-labels ('Besked', smiley|history-tekstlinje, gamle
   Send besked-link). */
& #chat_box {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "tools input send"
            "tools to    send";
        align-items: stretch;
        gap: 0.38rem;
        padding: 0.5rem;
        width: 100%;
        min-width: 0;
        height: auto;
        background: transparent;

        /* Privat-rum: pink baggrund (klassen toggles fra chat.js
           boxcolor / renderRoom). Mobil-tonen er en blødere semi-
           transparent pink end desktop's flade pink — passer bedre
           med messenger-look'et og lader bottombar-gradient skinne
           igennem. */
        &.private {
            background-color: rgba(255, 39, 244, 0.3);
            cursor: pointer;
        }

        /* Privat uden valgt modtager: dim send-knap + textarea, og
           disable klik på send. Klassen toggles fra #updateSendState
           (chat.js); textarea har også prop disabled, men styling
           her sikrer visuel parity med send-knappen. */
        &.no-recipient {
            & textarea {
                opacity: 0.55;
                cursor: not-allowed;
            }
            & [data-submit="#msg"] {
                opacity: 0.45;
                pointer-events: none;
                cursor: not-allowed;
            }
        }

        /* div 1 (msg_name + form + .bf-chat-tools) går til contents
           så form og tools-kolonnen kan placeres direkte i grid'en. */
        & > div:nth-child(1) {
            display: contents;
        }
        /* Skjul 'Besked'-label + br — pladsen ejes nu af textareaen. */
        & > div:nth-child(1) > [data-template="msg_name"],
        & > div:nth-child(1) > [data-template="msg_name"] + br {
            display: none;
        }
        /* Skjul gammel '<b>Send til</b>' label + br i kolonne 2. */
        & > div:nth-child(2) > br,
        & > div:nth-child(2) > b {
            display: none;
        }

        & form[data-template="msg"] {
            grid-area: input;
            margin: 0;
            display: flex;
            min-width: 0;
        }
        & form[data-template="msg"] textarea {
            flex: 1 1 auto;
            width: 100%;
            min-width: 0;
            height: 3rem;
            min-height: 3rem;
            padding: 0.38rem 0.75rem;
            border: 1px solid var(--gray-soft);
            border-radius: 0.88rem;
            font: inherit;
            line-height: 1.12rem;
            outline: none;
            resize: none;
            overflow-y: auto;
        }
        & form[data-template="msg"] textarea:focus {
            border-color: var(--accent-blue);
        }

        /* Tools-kolonne: smiley + history som ikon-knapper, stablet
           lodret i venstre side ligesom .msgr_tools.is-focused. Top-
           alignet så de følger textarea'ens topkant ligesom .msgr_compose. */
        &::before,
        &::after { display: none; }
        & .bf-chat-tools {
            grid-area: tools;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            gap: 0.12rem;
            flex-shrink: 0;
            margin: 0;
            align-self: stretch;
            padding: 0.25rem 0;

            & a {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 1.75rem;
                height: 1.5rem;
                color: var(--gray-line-soft);
                text-decoration: none;
                font-size: 18px;
                line-height: 1;
            }
            /* SVG'en arvet fra template_icon_chat-* — sizet eksplicit
               så den renderer konsistent på desktop, mobil og PWA. */
            & a [data-auto="icon"] {
                display: inline-flex;
                width: 1.12rem;
                height: 1.12rem;
            }
            & a [data-auto="icon"] svg {
                width: 100%;
                height: 100%;
                display: block;
            }
            & a:active {
                color: var(--white);
            }
            /* Filter-toggle i 'off'-tilstand: dæmpet farve så brugeren
               kan se at filterbar'en er skjult (filtrene er stadig aktive). */
            & a.bf-chat-tool-filter.is-off {
                color: var(--gray-text);
                opacity: 0.55;
            }
        }

        /* Send-knap: data-auto="knap" har erstattet <a> med
           <span class="btn_normal"> indeholdende .left_arrow (pil),
           tekst-span og .clear. Vi targeter [data-submit] (attribut
           bevares af knap_make) så både a og span rammes, og skjuler
           .left_arrow / .arrow / .clear så det bliver en ren pille. */
        & > div:nth-child(2) {
            grid-area: send;
            display: flex;
            align-items: stretch;
            justify-content: center;
            min-width: 0;
            & > br {
                display: none;
            }
            & [data-submit] {
                flex: 0 0 auto;
                align-self: stretch;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: var(--accent-blue);
                color: var(--white);
                border: 0;
                width: 3.25rem;
                padding: 0 0.5rem;
                border-radius: 0.62rem;
                font-weight: 600;
                font: inherit;
                font-size: var(--fs-sm);
                line-height: 1;
                text-decoration: none;
                white-space: nowrap;
                cursor: pointer;

                & img,
                & .left_arrow,
                & .arrow,
                & .clear { display: none; }
            }
        }

        /* 'Send til' under inputtet — sidder i kolonne 2 (tools- og
           send-kolonner spænder begge rækker), så ingen manuel indrykning. */
        & > div:nth-child(3) {
            grid-area: to;
            font-size: var(--fs-sm);
            color: var(--gray-line-soft);
            padding: 0.12rem 0.25rem 0;
            & b {
                color: var(--gray-line-soft);
                font-weight: 600;
                margin-right: 0.25rem;
            }
            & b::after {
                content: ':';
            }
            /* Inline'er to_container så 'Send til: Alle brugere' står
               på én linje i stedet for at bryde efter labelen.
               Tving font-size til at arve fra forwrapperen — desktop-CSS
               sætter line-height/font på #to_name som ellers sætter en
               større tekst der ikke matcher labelen. */
            & > [data-template="to_container"] {
                display: inline;
                font-size: inherit;
                line-height: inherit;
            }
            & #to_name,
            & [data-template="to_name"] {
                font-size: inherit;
                line-height: inherit;
            }
            & a {
                color: var(--accent-blue);
                text-decoration: none;
            }
            /* '(vælg alle)' som lille pille ved siden af brugernavnet. */
            & [data-template="to_name_clear"] {
                font-size: 0;          /* skjul ' (' og ')' tekstnoder */
                margin-left: 0.31rem;
            }
            & [data-template="to_name_clear"] a {
                font-size: 0.69rem;
                display: inline-block;
                padding: 0.05rem 0.5rem;
                background: var(--accent-blue);
                color: var(--white);
                border-radius: 0.62rem;
                line-height: 1.25;
                text-decoration: none;
            }
        }
    }

} /* end body.is-mobile-layout (chat section) */

/* ====================================================================
   Mobile qsort filter UI, list-head, age slider, pager dock, vis-toggle.
    Migrated from legacy mobile stylesheet wrapper.
   ==================================================================== */
/* === Mobil: lister & qsort-filter (bund-sheet) === */
body.is-mobile-layout {
    /* qsort-grid skjules som standard — erstattet af Filter-knappen
       (mobile.js injicerer .bf-qsort-filter-btn lige før). */
    & #qsort_filter_display { display: none; }

    /* Sortbar-rækken — brugeren kan altid bruge filter-sheet'et. */
    & #qsort_sortbar { display: none; }

    /* Chat: wrapperen #qsort_filter ligger stadig som tomt element
       øverst i .section_chat — dock'en i bottombar overtager UI'en. */
    & .section_chat #qsort_filter { display: none; }
}

/* Filter-dock: lever inde i #bf_content_bottombar (lister) eller
   #bf_status_bottombar (chat scor) SOM FLEX-ITEM lige over bund-
   nav'en — stakker naturligt, ingen risiko for gap pga. safe-area,
   URL-bar eller målefejl. Selve docken er grid-containeren; lister
   har 6 celler (alder/køn/område/søger/vis/nulstil), chat har 4. */
:is(#bf_content_bottombar, #bf_status_bottombar) > .bf-qsort-filter-dock {
    padding: 0.5rem 0.38rem 0.31rem;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.12rem;
    color: var(--gray-soft);
    line-height: 1.1;
    background: var(--trans-a00);
}
/* Chat scor's dock har 4 filter-celler + nulstil = 5 kolonner. */
#bf_status_bottombar > .bf-qsort-filter-dock {
    grid-template-columns: repeat(5, 1fr);
}
/* Filter-toggle (3. ikon i .bf-chat-tools) skjuler dock'en visuelt
   mens filter-state'en (#qsort_filter) består — ResizeObserver på
   bottombar'en justerer --bf-status-bottomnav-h automatisk. */
body.bf-chat-qsort-hidden #bf_status_bottombar > .bf-qsort-filter-dock {
    display: none;
}

/* Profil-pager: vises som første barn INDE i #if_profile_menu
   (JS injicerer/fjerner den) — stakker dermed naturligt OVEN
   PÅ profil-sub-menuen og deler dens show/hide-state. Samme
   6-kolonne grid som qsort-dock'en, men kolonne 1–3 er én
   tekst-celle ("Du ser nu resultater for: <listenavn>") og
   4–6 er ikon-knapper (liste / forrige / næste). */
#if_profile_menu > .bf-profile-pager-dock {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.12rem;
    padding: 0 0 0.38rem;
    margin: 0 0 0.38rem;
    color: var(--gray-soft);
    line-height: 1.1;
    background: var(--trans-a00);
    border-bottom: 1px solid var(--trans-a10);

    & > .bf-pager-text {
        grid-column: 1 / span 3;
        align-self: center;
        padding-left: 0.5rem;
        font-size: var(--fs-xs);
        line-height: 1.25;
        text-align: left;
        opacity: 0.85;
        min-width: 0;

        & b {
            display: block;
            color: var(--white);
            font-size: 1.15em;
            font-weight: 600;
            opacity: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    & .bf-qsort-iconcell[disabled] {
        opacity: 0.3;
        pointer-events: none;
    }
}
/* Scroll-container-h\u00f8jden styres allerede via --bf-bottomnav-h
   (m\u00e5lt p\u00e5 hele bottombar'en inkl. dock) \u2014 ingen
   ekstra-override n\u00f8dvendig her. */

/* Vis/reset-celler er <button> uden default-styling, samme look som
   de fire helper-celler. */
.bf-qsort-iconcell {
    background: var(--trans-a00);
    border: 0;
    padding: 0;
    margin: 0;
    line-height: inherit;
    color: inherit;
    cursor: pointer;
}
.bf-qsort-iconcell:active {
    background: var(--trans-a10);
}

/* Filter-kort: 4 helper-celler + vis-toggle + reset = 6 inline ikoner.
   Dock'en er grid-containeren; .bf-qsort-filter-btn er display:contents. */
.bf-qsort-filter-btn {
    display: contents;
    text-align: center;
    cursor: pointer;
    max-width: 100%;
}
.bf-qsort-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.19rem;
    padding: 0.25rem 0.12rem;
    border-radius: 0.5rem;
    min-width: 0;
    color: var(--gray-soft);
    line-height: 1.1;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}
.bf-qsort-ic {
    display: inline-block;
    line-height: 0;
    color: var(--gray-soft);
    position: relative;

    & svg {
        width: 1.5rem;
        height: 1.5rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
        display: block;
    }
}

/* Sort-indikator (Option B): lille hvid pille i øverste højre
   hjerne af ikonet når kolonnen er aktivt sort-key. Visuelt look
   lånt fra profil-menuens .count: hvid pille med skygge.
   Inde i pillen tegner vi en CSS-pil (samme teknik som .left_arrow
   / .btn_big .arrow) roteret -90° (op) eller +90° (ned). */
.bf-qsort-sort {
    position: absolute;
    top: -0.12rem;
    right: -0.62rem;
    width: 0.88rem;
    height: 0.88rem;
    background: var(--white);
    border-radius: 999px;
    box-shadow: 0 0 0 1px var(--white);
    display: none;
    pointer-events: none;

    &.is-active {
        display: inline-block;
    }

    &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 60%;
        transform: translate(-50%, -50%);
        width: 0;
        height: 0;
        border-top: 0.31rem solid var(--trans-a00);
        border-bottom: 0.31rem solid var(--trans-a00);
        border-left: 0.31rem solid var(--rgb-14-41-84);
    }

    &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 18%;
        transform: translateY(-50%);
        width: 0.25rem;
        height: 0.12rem;
        background: var(--rgb-14-41-84);
    }

    /* Op = roter hele pilen -90°; ned = +90°. */
    &.is-up { transform: rotate(-90deg); }
    &.is-down { transform: rotate(90deg); }
}

/* Bund-sheet: når body har .bf-qsort-open vises filteret som
   en sub-sub-menu der sidder lige oven på .bf-qsort-filter-dock
   (samme look/position som dock'en, bare et lag højere). Ingen
   backdrop — klik udenfor lukker stadig via JS. */
/* Bund-sheet: når body har .bf-qsort-open vises filteret som
   flex-item i #bf_content_bottombar (lister) eller #bf_status_bottombar
   (chat scor) lige over .bf-qsort-filter-dock.
   Højden indgår automatisk i --bf-bottomnav-h via ResizeObserver. */
body.bf-qsort-open {
    & :is(#bf_content_bottombar, #bf_status_bottombar) > #qsort_filter_display {
        display: flex !important;
        flex-direction: column;
        max-height: 50vh;
        overflow-y: auto;
        background: var(--trans-a00);
        color: var(--white);
        border-radius: 0;
        border-bottom: 1px solid var(--trans-a25);
        padding: 0.5rem 0.62rem;
        margin: 0;
        gap: 0;
    }
}
body.bf-qsort-open #qsort_filter_display {
    & .qsort_optionbox {
        background: var(--trans-a00);
        border-radius: 0;
        padding: 0;
        margin: 0;
        border-bottom: 0;
        position: static;
        display: block;
        min-width: 0;
        color: var(--white);
        width: 100%;

        &:last-of-type {
            border-bottom: 0;
        }

        & > div {
            float: none;
            padding: 0;
        }

        & > div:nth-child(1) {
            display: none; /* skjul left_arrow ikon i sheet'et */
        }

        & > div:nth-child(2) {
            display: block;
            font-size: var(--fs-sm);
            color: var(--white);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin: 0 0 0.5rem 0;
            font-weight: 600;
            opacity: 0.85;

            & br,
            & b {
                display: none; /* værdien står allerede i dock-cellen */
            }
        }

        & > div:nth-child(3) {
            float: none;
            width: 100%;
            clear: both;
        }
    }

    & .qsort_optionbox div,
    & .qsort_optionbox_options div {
        float: none;
    }

    & .qsort_optionbox_options {
        display: block;
        position: static;
        padding: 0;
        border: 0;
        background: var(--trans-a00);
        white-space: normal;
        z-index: auto;
        width: 100%;

        & > label:not(.bf-age-side) {
            display: flex;
            align-items: flex-start;
            gap: 0.38rem;
            white-space: normal;
            padding: 0.12rem 0;
            min-width: 0;
            color: var(--white);
            text-transform: lowercase;
            font-size: var(--fs-body);

            & > input[type="checkbox"] {
                flex: 0 0 auto;
                margin-top: 0.12rem;
            }

            &.qsort-all {
                margin-bottom: 0.25rem;
                font-weight: 600;
                grid-column: 1 / -1;
            }
        }

        & select {
            font-size: 16px; /* undgå iOS-zoom */
            padding: 0.25rem 0.38rem;
            margin-right: 0.38rem;
        }

        & a {
            display: inline-block;
            padding: 0.25rem 0;
            color: var(--white);
        }
    }

    /* Checkbox-lister: 'Alle' på egen linje, sub-options i et auto-fit grid
       så kolonner er lige brede og labels altid flugter lodret. */
    & #qsort_area_div,
    & #qsort_target_div,
    & .qsort_optionbox:has(input[name="qsort_gender_all"]) .qsort_optionbox_options {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
        column-gap: 0.5rem;
        row-gap: 0;
    }
}
/* Per-cell sheet (auto-submit on change): vis kun den valgte
   sektion. Body får data-bf-qsort-only="age|gender|area|target". */
body.bf-qsort-open[data-bf-qsort-only="age"] #qsort_filter_display .qsort_optionbox:not(:nth-child(1)),
body.bf-qsort-open[data-bf-qsort-only="gender"] #qsort_filter_display .qsort_optionbox:not(:nth-child(2)),
body.bf-qsort-open[data-bf-qsort-only="area"] #qsort_filter_display .qsort_optionbox:not(:nth-child(3)),
body.bf-qsort-open[data-bf-qsort-only="target"] #qsort_filter_display .qsort_optionbox:not(:nth-child(4)) {
    display: none !important;
}
/* Den synlige sektion må gerne fylde uden top-knap-padding. */
body.bf-qsort-open[data-bf-qsort-only] #qsort_filter_display .qsort_optionbox:first-child {
    padding-right: 0;
}
/* To separate alder-slidere i qsort bund-sheet'en (mørk baggrund,
   hvid tekst). Søg-formularens slider tilføjer .bf-age-slider--desktop
   og styles i stedet af de regler i boyfriend.css. */
.bf-age-slider:not(.bf-age-slider--desktop) {
    padding: 0.25rem 0 0.38rem;
    width: 100%;
    display: block;

    & .bf-age-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.88rem;
        width: 100%;
    }

    & .bf-age-side {
        display: grid;
        grid-template-columns: 4.5em 1fr;
        align-items: center;
        gap: 0.62rem;
        min-width: 0;
        width: 100%;
        padding: 0;

        & > * {
            min-width: 0;
        }
    }

    & .bf-age-side-label {
        color: var(--white);
        font-size: var(--fs-body);
        text-transform: lowercase;
        white-space: nowrap;

        & b {
            font-weight: 600;
        }
    }

    & input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        max-width: none;
        min-width: 0;
        height: 1.5rem;
        background: var(--trans-a00);
        margin: 0;
        padding: 0;
        display: block;

        &::-webkit-slider-runnable-track {
            height: 0.25rem;
            background: var(--trans-a25);
            border-radius: 999px;
        }

        &::-moz-range-track {
            height: 0.25rem;
            background: var(--trans-a25);
            border-radius: 999px;
            border: 0;
        }

        &::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 1.38rem;
            height: 1.38rem;
            border-radius: 50%;
            background: var(--white);
            border: 0.12rem solid var(--brand-pink);
            box-shadow: 0 1px 3px var(--trans-a30);
            cursor: pointer;
            margin-top: -0.56rem;
        }

        &::-moz-range-thumb {
            width: 1.38rem;
            height: 1.38rem;
            border-radius: 50%;
            background: var(--white);
            border: 0.12rem solid var(--brand-pink);
            box-shadow: 0 1px 3px var(--trans-a30);
            cursor: pointer;
        }
    }
}

/* H1 + (vis-toggle + Filter-knap) på samme linje. mobile.js
   pakker dem i .bf-list-head så Filter sidder højre-justeret inline
   med listenavnet. */
.bf-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 0.62rem;
    margin: 0.88rem 0 0.62rem 0;

    & > h1 {
        margin: 0;
        flex: 1 1 auto;
    }
}
.qsort_optionbox.bf-qsort-vis {
    background: var(--white);
    padding: 0.19rem;
    margin: 0;
    position: static;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;

    & > div:nth-child(1),
    & > div:nth-child(2) {
        display: none;
    }

    & .qsort_optionbox_options {
        display: inline-flex;
        position: static;
        padding: 0;
        background: var(--trans-a00);
        border: 0;
        white-space: nowrap;
        font-size: 0;
        gap: 0;

        & a {
            color: var(--steel-dark);
            text-decoration: none;
            padding: 0.31rem 0.62rem;
            border-radius: 999px;
            font-weight: 500;
            font-size: 0;
            line-height: 0;
            transition: background 0.15s, color 0.15s;
            display: inline-flex;
            align-items: center;
            justify-content: center;

            &.bold {
                background: var(--brand-pink);
                color: var(--white);
                font-weight: 600;
            }
        }
    }
}

/* =====================================================================
    Mobile-first UI Layers — Migrated from legacy mobile stylesheet
   =====================================================================
   All rules below are mobile-first (apply on all sizes by default).
   Desktop overrides can be added with @media (min-width: 64em) as needed.
    Consolidation: merged into this file to achieve single-source
   mobile-first CSS architecture.
   ===================================================================== */

/* ====================================================================
   Profile menu — grid-based icon layout with icon and count styling.
   ==================================================================== */
body.is-mobile-layout {
    #bf_content_bottombar > #if_profile_menu {
        padding: 0.5rem 0.38rem 0.31rem;
        background: var(--trans-a00);
        border-bottom: 0;
        border-radius: 0;

        & .menu_sub {
            display: block !important;
            height: auto;
            background: var(--trans-a00);

            & > ul {
                display: grid;
                grid-template-columns: repeat(6, 1fr);
                gap: 0.12rem;
                list-style: none;
                margin: 0;
                padding: 0;
                position: static;
            }

            & > ul > li {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 0.19rem;
                height: auto;
                padding: 0.25rem 0.12rem;
                background: var(--trans-a00);
                border-radius: 0.5rem;
                color: var(--gray-line-soft);
                cursor: pointer;
                text-align: center;

                &.selected {
                    background: var(--trans-a10);
                }

                & .text {
                    text-align: center;
                }

                /* Profile menu icon wrapper and icon styling */
                & > .bf-pm-icon {
                    position: relative;
                    display: inline-block;
                    line-height: 0;

                    & svg {
                        width: 1.5rem;
                        height: 1.5rem;
                        fill: none;
                        stroke: currentColor;
                        stroke-width: 1.7;
                        stroke-linecap: round;
                        stroke-linejoin: round;
                        display: block;
                    }

                    & .count {
                        display: inline-block !important;
                        position: absolute;
                        top: -0.25rem;
                        right: -0.5rem;
                        padding: 0.05em 0.35em;
                        background: var(--white);
                        color: var(--rgb-14-41-84);
                        border-radius: 999px;
                        font-size: var(--fs-xs);
                        font-weight: bold;
                        line-height: 1.3;
                    }
                }
            }
        }
    }

    .section_profile:has(#profile_picture .picture_container :is(img, .no_picture)) {
        & > .innerdiv {
            position: relative;
            padding-inline: 0;
            padding-top: 0;

            & > .top,
            & > .top > *:not(#profile_picture) {
                padding-inline: 0.75em;
            }
            & > .top > #profile_picture {
                padding-inline: 0;
                margin-inline: -0.75em;
            }

            & > #profile_txt,
            & > #profile_lounges {
                padding-inline: 1em;
                line-height: 1.45;
            }
            & > #profile_txt {
                overflow-wrap: anywhere;
                word-break: break-word;
                width: 100% ! important;
            }

            & > #pager {
                display: none;
            }

            & > h1#profile_username {
                position: absolute;
                top: 0;
                left: 0;
                right: 6.88rem;
                z-index: 5;
                padding: 0.5em 0.75em;
                margin: 0;
                color: var(--white);
                text-shadow: 0 1px 4px var(--trans-a70);
                background: var(--trans-a00);

                & svg {
                    filter: drop-shadow(0 1px 2px var(--trans-a20));
                }
            }
        }

        & #profile_picture .picture_container {
            padding: 0;
            background: var(--trans-a00);
            border-radius: 0;
            height: 75vw;
            min-height: 0;
            margin: 0;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;

            &::after {
                content: '';
                position: absolute;
                top: 0; left: 0; right: 0;
                height: 5em;
                background: linear-gradient(180deg, var(--trans-a30) 0%, var(--trans-a00) 100%);
                pointer-events: none;
                z-index: 1;
            }

            & > a {
                display: block;
                width: 100%;
                height: 100%;
                overflow: visible;
                position: relative;

                & > img {
                    display: block;
                    width: 100%;
                    height: auto;
                    max-width: none;
                    max-height: none;
                    border-radius: 0;
                    --profile-hero-mask: linear-gradient(
                        to bottom,
                        var(--black) 0,
                        var(--black) calc(75vw - 2em),
                        var(--trans-a20) calc(75vw + 50px),
                        var(--trans-a20) calc(100% - 2em),
                        var(--trans-a00) 100%
                    );
                    -webkit-mask-image: var(--profile-hero-mask);
                    mask-image: var(--profile-hero-mask);
                }
            }

            & .btn_normal {
                position: absolute;
                right: 0.75em;
                z-index: 5;
                margin: 0;

                &:nth-of-type(1) { bottom: 3.25em; }
                &:nth-of-type(2) { bottom: 0.75em; }
            }

            &:has(> .no_picture) {
                height: 140vw;
                margin-bottom: calc(75vw - 140vw);
                align-items: flex-start;
                background: linear-gradient(140deg, var(--name-pink) 0%, var(--steel-dark) 100%);
                --profile-hero-mask: linear-gradient(
                    to bottom,
                    var(--black) 0,
                    var(--black) calc(75vw - 2em),
                    var(--trans-a20) calc(75vw + 50px),
                    var(--trans-a20) calc(100% - 2em),
                    var(--trans-a00) 100%
                );
                -webkit-mask-image: var(--profile-hero-mask);
                mask-image: var(--profile-hero-mask);
            }

            &.no-pic-bg-1:has(> .no_picture) {
                background:
                    repeating-linear-gradient(45deg, var(--trans-a10) 0 8px, var(--trans-a00) 8px 24px),
                    linear-gradient(135deg, var(--c-b5ead7) 0%, var(--yellow-light) 100%);
            }
            &.no-pic-bg-2:has(> .no_picture) {
                background:
                    radial-gradient(var(--trans-a40) 2px, var(--trans-a00) 3px) 0 0 / 22px 22px,
                    linear-gradient(45deg, var(--c-c7ceea) 0%, var(--pink-soft) 100%);
            }
            &.no-pic-bg-3:has(> .no_picture) {
                background:
                    repeating-linear-gradient(0deg, var(--trans-a20) 0 1px, var(--trans-a00) 1px 28px),
                    repeating-linear-gradient(90deg, var(--trans-a20) 0 1px, var(--trans-a00) 1px 28px),
                    linear-gradient(90deg, var(--yellow-light) 0%, var(--blue-dark) 100%);
            }
            &.no-pic-bg-4:has(> .no_picture) {
                background:
                    repeating-linear-gradient(90deg, var(--trans-a20) 0 6px, var(--trans-a00) 6px 20px),
                    linear-gradient(200deg, var(--yellow-light) 0%, var(--c-e0bbff) 100%);
            }
            &.no-pic-bg-5:has(> .no_picture) {
                background:
                    radial-gradient(circle at 30% 30%, var(--trans-a40) 0 60px, var(--trans-a00) 61px),
                    radial-gradient(circle at 75% 70%, var(--trans-a30) 0 80px, var(--trans-a00) 81px),
                    linear-gradient(160deg, var(--c-b5ead7) 0%, var(--blue-dark) 100%);
            }
            &.no-pic-bg-6:has(> .no_picture) {
                background:
                    repeating-linear-gradient(0deg, var(--trans-a20) 0 5px, var(--trans-a00) 5px 18px),
                    linear-gradient(70deg, var(--pink-soft) 0%, var(--c-b5ead7) 100%);
            }
            &.no-pic-bg-7:has(> .no_picture) {
                background:
                    conic-gradient(from 0deg at 50% 50%, var(--trans-a20) 0 25%, var(--trans-a00) 0 50%, var(--trans-a20) 0 75%, var(--trans-a00) 0 100%) 0 0 / 32px 32px,
                    linear-gradient(110deg, var(--yellow-light) 0%, var(--c-c7ceea) 100%);
            }
            &.no-pic-bg-8:has(> .no_picture) {
                background:
                    repeating-linear-gradient(45deg, var(--trans-a10) 0 2px, var(--trans-a00) 2px 16px),
                    repeating-linear-gradient(-45deg, var(--trans-a10) 0 2px, var(--trans-a00) 2px 16px),
                    linear-gradient(25deg, var(--blue-dark) 0%, var(--yellow-light) 100%);
            }
            &.no-pic-bg-9:has(> .no_picture) {
                background:
                    radial-gradient(var(--trans-a40) 1.5px, var(--trans-a00) 2.5px) 0 0 / 14px 14px,
                    linear-gradient(250deg, var(--c-e0bbff) 0%, var(--c-b5ead7) 100%);
            }
            &.no-pic-bg-10:has(> .no_picture) {
                background:
                    repeating-linear-gradient(135deg, var(--trans-a20) 0 6px, var(--trans-a00) 6px 12px, var(--trans-a00) 12px 18px, var(--trans-a20) 18px 24px),
                    linear-gradient(315deg, var(--blue-dark) 0%, var(--yellow-light) 100%);
            }
            & > .no_picture {
                width: 45%;
                aspect-ratio: 1 / 1;
                margin-top: 15vw;
                display: flex;
                align-items: center;
                justify-content: center;
                pointer-events: none;
                filter: drop-shadow(0 2px 6px var(--trans-a40));

                & > svg {
                    width: 100%;
                    height: 100%;
                }
            }
            & > div.pointer {
                position: absolute;
                bottom: 1em;
                left: 0;
                right: 0;
                text-align: center;
                color: var(--white);
                text-shadow: 0 1px 3px var(--trans-a60);
            }
        }

        & #profile_details {
            position: relative;
            z-index: 4;
            margin-top: -2.5em;
            box-shadow: 0 4px 14px var(--trans-a10);
        }

        & #fact_container,
        & #interact {
            position: relative;
            z-index: 4;

            & > div {
                box-shadow: 0 2px 6px var(--trans-a10);
            }
        }

        & #profile_chat {
            position: absolute;
            left: 3.5em;
            top: calc(75vw - 6em);
            z-index: 6;
            margin: 0;
            padding: 0;
            max-width: calc(100% - 5em);
            display: flex;
            align-items: flex-end;
            gap: 0.5rem;
            color: var(--white);
            filter: drop-shadow(0 1px 2px var(--trans-a70));

            & > [data-auto="icon"] {
                width: 2.24em;
                height: 2.24em;
                flex: 0 0 auto;
                display: inline-flex;
            }
            & > [data-auto="icon"] svg {
                width: 100%;
                height: 100%;
            }
            & a {
                display: inline-flex;
                align-items: flex-end;
                min-height: 2.24em;
                padding: 0;
                background: none;
                color: var(--white);
                font-weight: 700;
                font-size: var(--fs-h3);
                line-height: 1;
                text-decoration: none;
                text-shadow: 0 1px 3px var(--trans-a70), 0 0 6px var(--trans-a50);
                cursor: pointer;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                &:active {
                    opacity: 0.75;
                }
            }
        }
    }
}

body.is-mobile-layout #bf_mobile_swiper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    width: 100%;
    flex: 1;
    min-height: 0;
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }

    & > .bf-pane {
        flex: 0 0 100vw;
        scroll-snap-align: start;
        overflow-y: hidden;
        overflow-x: hidden;
    }

    & > .bf-pane--menu {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 3.5rem;
        width: 60vw;
        max-width: 22.5rem;
        flex: none;
        background-color: var(--surface-dark);
        padding: 0;
        overflow-y: auto;
        overflow-x: hidden;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 9999;
        padding-top: env(safe-area-inset-top, 0);

        body.is-pwa & {
            bottom: 4.5rem;
        }
        body.bf-menu-open & {
            transform: translateX(0);
            box-shadow: 4px 0 16px var(--trans-a30);
        }
    }

    & > .bf-pane--content {
        background-color: var(--trans-a00);
        position: relative;
        overflow: hidden;
    }

    & > .bf-pane--content > .bf-content-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: var(--white);
        -webkit-overflow-scrolling: touch;

        & .innerdiv {
            padding: 0 0.75em 1em 0.75em;
        }
    }

    & > .bf-pane--content #bf_content_bottomnav,
    & > .bf-pane--status #bf_status_bottomnav {
        display: flex;
        background: var(--trans-a00);
        border-top: 1px solid var(--trans-a25);
        padding: 0.25rem 0 calc(0.25rem + env(safe-area-inset-bottom, 0));
        z-index: 6;

        & a {
            flex: 1 1 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.12rem;
            padding: 0.25rem 0.12rem;
            color: var(--gray-line-soft);
            text-decoration: none;
            line-height: 1;
            transition: color 0.12s;

            & svg {
                width: 1.38rem;
                height: 1.38rem;
                fill: none;
                stroke: currentColor;
                stroke-width: 1.8;
                stroke-linecap: round;
                stroke-linejoin: round;
            }

            &:active,
            &:hover,
            &.is-active {
                color: var(--white);
            }

            & .bf-bn-icon {
                position: relative;
                display: inline-block;
                line-height: 0;
            }

            & .bf-bn-pill {
                position: absolute;
                top: -0.25rem;
                right: -0.5rem;
                background: var(--accent-orange);
                color: var(--white);
                min-width: 1.2em;
                padding: 0.05em 0.35em;
                border-radius: 999px;
                font-size: var(--fs-sm);
                font-weight: bold;
                text-align: center;
                line-height: 1.3;
                box-shadow: 0 0 0 1px var(--white);
                pointer-events: none;
            }
        }
    }

    & > .bf-pane--content > #if_ad {
        display: none;
    }

    & > .bf-pane--status {
        background-color: var(--trans-a00);
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 100%;
        overflow: hidden;
    }

    & .bf-menu-split {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        row-gap: 0;
        column-gap: 0;
    }

    & .bf-menu-split .bf-user-block        { order: 1; }
    & .bf-menu-split #topmenu_right        { order: 2; }
    & .bf-menu-split #bf_menu_sub_slot     { order: 4; }
    & .bf-menu-split .bf-menu-footer-block { order: 5; margin-top: auto; }
    & .bf-menu-split .bf-menu-footer       { order: 6; }
    & .bf-menu-split .bf-menu-install-box  { order: 7; }
    & .bf-menu-split #menu                 { display: none; }

    & .bf-menu-left {
        display: contents;

        & .bf-user-block {
            grid-row: 1;
            padding: 0.75rem 0.6em 0.75rem 1em;
            border-bottom: 1px solid var(--surface-mid);

            & #item_navn {
                padding: 0 0 0.5rem 0;
                text-align: left;

                & a, & .status_profilnavn {
                    color: var(--white);
                    font-weight: bold;
                    font-size: 16px;
                    text-decoration: none;
                }
            }

            & .bf-user-actions {
                display: flex;
                gap: 2em;
                margin: 0;
                padding: 0.38rem 0;
                list-style: none;

                & > li {
                    list-style: none;
                    margin: 0;
                    padding: 0;

                    & > a {
                        color: var(--white);
                        text-decoration: none;
                        font-size: var(--fs-sm);
                    }
                }
            }
        }

        & #menu {
            grid-row: 2;
            min-height: 0;
        }

        & .bf-menu-footer-block {
            grid-row: 3;
            border-top: 1px solid var(--surface-mid);
        }

        & #newsticker {
            position: static;
            width: 100%;
            height: auto;
            border: 0;
            color: var(--white);
            padding: 0.7em 0.8em;
            line-height: 1.4;

            display: flex;
            flex-direction: column;

            & #link {
                order: 1;
                position: static;
                text-align: left;
                padding: 0 0 0.3em 0;

                & a {
                    color: var(--white);
                    text-decoration: none;
                    font-weight: bold;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                    font-size: 0.85em;
                }
            }

            & #ticker {
                order: 2;
                position: static;
                width: 100%;
                height: auto;
                padding: 0;
                color: var(--white);
                display: flex;
                flex-direction: column;

                & br { display: none; }

                & a {
                    color: var(--white);
                    text-decoration: none;
                    font-weight: normal;
                }

                & .title {
                    order: 1;
                }

                & .date {
                    order: 2;
                    text-align: right;
                    opacity: 0.7;
                    font-size: var(--fs-xxs);
                    padding-top: 0.2em;
                }
            }
        }

        & #menu {
            display: none !important;

            & ul#menu_logged_in {
                display: flex;
                flex-direction: column;

                & > li:nth-child(1)  { order: 1; }                /* post */
                & > li:nth-child(2)  { order: 2; }                /* chat */
                & > li:nth-child(3)  { order: 3; }                /* lounges */
                & > li:nth-child(4)  { order: 4; }                /* debat */
                & > li:nth-child(5)  { order: 5; }                /* lister */
                & > li:nth-child(6)  { order: 6; }                /* online */
                & > li:nth-child(7)  { order: 7; }                /* nærmeste */
                & > li:nth-child(8)  { order: 8; }                /* søg */
            }

            & ul {
                position: static;
                display: block;
                padding: 0;
                margin: 0;

                & li {
                    float: none;
                    display: block;
                    height: auto;
                    padding: 0.6em 1em;
                    border-bottom: 1px solid var(--surface-mid);

                    & a {
                        color: var(--white);
                        display: block;
                        padding: 0.4em 0;
                        text-decoration: none;
                    }

                    & a > .bf-menu-pill {
                        float: right;
                        background: var(--accent-orange);
                        color: var(--white);
                        min-width: 1.4em;
                        padding: 0.1em 0.5em;
                        border-radius: 999px;
                        font-size: var(--fs-xs);
                        font-weight: bold;
                        text-align: center;
                        line-height: 1.4;
                    }

                    & ul {
                        display: none;
                        position: static;
                        padding-left: 1em;

                        & li {
                            background: var(--trans-a00);
                            border: 0;
                            width: auto;
                            height: auto;
                            padding: 0.3em 0;
                        }
                    }

                    &.bf-menu-open > ul {
                        display: block;
                    }
                }
            }
        }
    }

    & .bf-menu-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        background-color: var(--surface-dark);
        border-top: 1px solid var(--surface-mid);

        & > div {
            background-color: var(--surface-dark);
            color: var(--white);
            padding: 0.6em 0.5em;
            text-align: center;
            font-size: var(--fs-sm);
            cursor: pointer;

            & > div {
                position: relative;
                height: 1.6em;

                & > div {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    font-size: 1.4em;
                    font-weight: bold;
                    line-height: 1.1;
                    text-align: center;
                }
            }

            & > span {
                display: block;
                font-size: 0.8em;
                opacity: 0.7;
                line-height: 1.2;
            }
        }
    }

    & .bf-menu-right {
        display: contents;

        & .bf-menu-install-box {
            background-color: var(--accent-blue);
            color: var(--white);
            padding: 0.6em 0.5em;
            text-align: center;
            font-size: 0.85em;
            border-top: 1px solid var(--surface-mid);
            cursor: pointer;

            & > div > div {
                font-weight: bold;
                line-height: 1.2;
            }
            & > span {
                display: block;
                font-size: 0.8em;
                opacity: 0.85;
                line-height: 1.2;
            }
        }
        & .bf-menu-install-box:hover {
            background-color: var(--c-5a7b9a);
        }
        /* Hint-varianter (iOS Safari "Føj til hjemmeskærm", iOS andre browsere
           "Åbn i Safari") deler look med install-knappen men er info-only:
           ingen cursor, ingen hover-skift. */
        & .bf-menu-install-box--hint,
        & .bf-menu-install-box--hint:hover {
            cursor: default;
            background-color: var(--accent-blue);
        }

        & #topmenu_right {
            grid-row: 1;
            position: static;
            top: auto;
            left: auto;
            width: auto;
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0.5rem 0 0.75rem 0;
            border-bottom: 1px solid var(--surface-mid);
            text-align: left;
            font-size: var(--fs-xs);

            & > .expire {
                display: block;
                color: var(--white);
                text-transform: uppercase;
                letter-spacing: 0.05em;
                font-size: 0.85em;
                padding: 0 0 0.3em 1em;
            }
            & > .active {
                display: block;
                color: var(--white);
                font-weight: bold;
                padding: 0 0 0.6em 1em;
            }
            & > br {
                display: none;
            }

            & #abonnementsboks {
                position: static;
                display: block;
                width: auto;
                height: auto;
                margin: 0;
                padding: 0.7em 0.9em;
                color: var(--white);
                background: linear-gradient(135deg, var(--accent-orange) 0%, var(--brand-pink) 100%);
                border: 0;
                border-radius: 0;
                line-height: 1.5;
                box-shadow: 0 2px 6px var(--trans-a30);
                cursor: pointer;
                transition: transform 0.1s, box-shadow 0.15s;

                & .left_arrow {
                    display: inline-block;
                    margin-right: 0.35em;
                    opacity: 0.9;
                }

                &:hover {
                    box-shadow: 0 3px 10px var(--trans-a40);
                }
                &:active {
                    transform: translateY(1px);
                }
            }
        }

        & #bf_menu_sub_slot {
            grid-row: 2 / 4;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;

            & .bf-mirror {
                display: flex;
                flex-direction: column;
                min-height: 0;
            }
            & .bf-mirror-heading {
                display: block;
                color: var(--white);
                text-decoration: none;
                font-weight: bold;
                text-transform: uppercase;
                padding: 0.55em 1em;
                background: var(--surface-dark);
                border-top: 1px solid var(--surface-mid);
                border-bottom: 1px solid var(--surface-mid);
                text-shadow: 0 1px 2px var(--trans-a40);

                &:hover {
                    background-color: var(--surface-dark);
                }
            }
            & .bf-mirror-list {
                display: flex;
                flex-direction: column;
                gap: 0.38rem;
                padding: 0.5rem 1em 1em 0.5em;
                overflow: hidden;

                & .link {
                    display: flex !important;
                    align-items: center;
                    gap: 0.6em;
                    padding: 0.25rem 0.38rem;
                    cursor: pointer;
                    color: var(--white);
                    text-shadow: 0 1px 2px var(--trans-a40);

                    &:hover {
                        background-color: var(--trans-a00);
                    }
                    & a {
                        color: inherit;
                        text-decoration: none;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    & img {
                        width: 1.75rem;
                        height: 1.75rem;
                        border-radius: 0.12rem;
                        flex: 0 0 auto;
                    }
                }
                & .bf-mirror-empty {
                    color: var(--trans-a40);
                    font-size: var(--fs-sm);
                    padding: 0.4em 0.2em;
                    text-align: center;
                }
            }
        }
    }
}

/* ====================================================================
   Generic mobile form-pattern: indstillings-/controlpanel-/info-/login-
   /newuser-forms bruger alle samme idiom — `.div_head` (label) + `.div_element`
   (felt), evt. afsluttet med `.ptb3` action-rækken med "Tilbage" til venstre
   og `.fright` submit til højre. Desktop bruger 45 % / auto floats; mobil
   stacker dem og giver felter fuld bredde + touch-venlig højde.

   Bemærk: ingen ramme rundt om `<form>` — reglerne hænger på de generiske
   utility-klasser, så enhver side der følger mønstret bliver mobil-venlig
   uden ekstra markup.
   ==================================================================== */
body.is-mobile-layout {
    & .div_head {
        float: none;
        clear: both;
        width: 100%;
        padding: 0.6rem 0.25rem 0.25rem;
        font-weight: 600;
    }

    & .div_element {
        float: none;
        width: 100%;
        padding: 0.25rem;

        & input[type="text"],
        & input[type="password"],
        & input[type="email"],
        & input[type="tel"],
        & input[type="number"],
        & input[type="search"],
        & input[type="url"],
        & input[type="date"],
        & select,
        & textarea {
            width: 100%;
            min-height: 2.5em;
            padding: 0.5em 0.75em;
            /* 16px hindr iOS auto-zoom ved focus i form-felt — under 16px
               zoomer Safari ind på inputtet og brækker layoutet. */
            font-size: 16px;
            border-radius: 0.4rem;
        }

        & textarea {
            min-height: 8em;
        }
    }

    /* Info-/error-bokse hænger på desktop som "margin-left: 45 %" indrykning
       for at justere med floated label/field. På mobil stacker vi alt — så
       nulstil indrykningen, ellers ser de skudt ud. */
    & .div_infoboks,
    & .div_errorboks {
        margin-left: 0;
        padding: 0.25rem 0.5rem;
    }

    /* H2 sektion-overskrifter i en .innerdiv (kontrolpanel-hub, stamdata-
       form, info-sider osv.) styles som iOS Settings-stil sektions-
       etiketter — små, store bogstaver, dæmpet farve, lidt indrykning.
       Visuelt skel kommer fra luften over dem, ikke fra en streg. Descendant
       (ikke child) så reglen også rammer h2'er indlejret i form/data-template
       wrappers (fx stamdata's "Jeg er ..." / "Jeg bor ..."). */
    & .innerdiv h2 {
        margin: 1.75rem 0 0.4rem;
        padding: 0 0.75rem;
        font-size: var(--fs-xs);
        font-weight: 600;
        color: var(--gray-text);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        line-height: 1.3;
    }

    & .innerdiv h2:first-of-type {
        margin-top: 0.75rem;
    }

    /* .punkt_container's mobile-look (iOS Settings-stil) er flyttet til
       .section_controlpanel-blokken i sections.css så al kontrolpanel-
       specifik styling lever ét sted. */

    /* Action-row (typisk "Tilbage" + submit). `data-auto="knap"` udskifter
       <a> med <span class="btn_normal"> ved boot — så vi rammer generelt
       direkte børn i stedet for kun <a>. Hver knap fylder ligeligt op til
       rækken's bredde med touch-venlig min-højde. */
    & .ptb3 {
        padding-top: 1.25em;
        padding-bottom: 1.25em;
        display: flex;
        gap: 0.5rem;
        clear: both;

        & > * {
            flex: 1;
            min-height: 2.5rem;
            text-align: center;
        }

        & > .fright {
            float: none;
        }

        /* .btn_normal har internt pil + tekst + clear på en linje med
           padding 0 0.94rem 0 0.31rem — uden flex-centering klistrer
           pilen til venstre og teksten skiller sig ud. Gør hele knappen
           til en centreret flex-row så pil + tekst flugter pænt midt i
           den udvidede knap-bredde. */
        & > .btn_normal {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.3rem;
            padding: 0.5rem 0.94rem;

            & > .clear {
                display: none;
            }

            & > span:nth-child(2) {
                transform: none;
            }
        }

        & > .btn_big {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.3rem;
        }
    }
}