#bf_boot_splash {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    padding:
        env(safe-area-inset-top, 0)
        env(safe-area-inset-right, 0)
        env(safe-area-inset-bottom, 0)
        env(safe-area-inset-left, 0);

    &.is-open {
        opacity: 1;
        pointer-events: auto;
    }
    &.is-closing {
        opacity: 0;
        pointer-events: none;
    }

    & .bf-boot-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        color: var(--white);
        text-shadow: 0 0.0625rem 0.125rem var(--trans-a40);
    }
    & .bf-boot-logo {
        font-size: 1.22rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: lowercase;
        line-height: 0;

        & svg {
            display: block;
            width: min(17rem, 72vw);
            height: auto;
        }
    }
    & .bf-boot-spinner {
        width: 1.9rem;
        height: 1.9rem;
        border: 0.125rem solid var(--trans-a25);
        border-top-color: var(--white);
        border-radius: 50%;
        animation: bfBootSpin 0.8s linear infinite;
    }
}

@keyframes bfBootSpin {
    to { transform: rotate(360deg); }
}

/* SVG user icon */
svg[user] {
    width: 2.16rem;
	margin-right: 0.19rem;
	vertical-align: middle;

    @media (min-width: 64em) {
        width: 1.88rem;
    }

    & #back {
        fill: var(--surface-mid);
    }

    & #person {
        fill: var(--gray-soft);
    }

    & #status {
        fill: var(--gray-soft);
    }

    & #subscription {
        display: none;
        fill: var(--red);
        stroke: var(--gray-soft);
    }

    & #photo {
        fill: var(--surface-mid);
    }

    .online path {
        fill: var(--icon-online) ! important;
    }

    .away path {
        fill: var(--yellow-dark) ! important;
    }

    .favorite path {
        fill: var(--yellow-dark);
    }

    .blocked path {
        fill: var(--black);
    }

    .photo path {
        fill: var(--gray-soft);
    }

    .subscription {
        display: block ! important;
        & path {
            fill: var(--brand-pink);
        }
    }
}

/* User icon på infosider */
.info-status-legend {
    display: inline-block;

    .info-status-row {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
    }

    .info-status-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .info-status-icon svg[user='0'] {
        width: 4.32rem;
        margin-right: 0;

        @media (min-width: 64em) {
            width: 3.76rem;
        }
    }

    .info-status-icon svg[user='0'] #status,
    .info-status-icon svg[user='0'] #photo,
    .info-status-icon svg[user='0'] #back {
        fill: var(--surface-mid);
    }

    .info-status-icon svg[user='0'] #subscription {
        display: none;
    }

    .info-status-row.is-online .info-status-icon svg[user='0'] #status path {
        fill: var(--icon-online) !important;
    }

    .info-status-row.is-away .info-status-icon svg[user='0'] #status path {
        fill: var(--yellow-dark) !important;
    }

    .info-status-row.is-favorite .info-status-icon svg[user='0'] #person path {
        fill: var(--yellow-dark);
    }

    .info-status-row.is-blocked .info-status-icon svg[user='0'] #person path {
        fill: var(--black);
    }

    .info-status-row.is-photo .info-status-icon svg[user='0'] #photo path {
        fill: var(--gray-soft);
    }

    .info-status-row.is-vip .info-status-icon svg[user='0'] #subscription {
        display: block;
    }

    .info-status-row.is-vip .info-status-icon svg[user='0'] #subscription path {
        fill: var(--brand-pink);
    }
}

.cardlogos {
    width: max-content;
    display: flex;
    margin: 0 0 0 auto;
    padding: 0 0.5rem 0.25rem 0.5rem;
    background: var(--blue-light);
    border-radius: 0 0 0 1rem;

    & .payment-cardlogo {
        padding: 0.25rem 0.25rem;

        & svg {
            display: block;
            width: auto;
            height: 0.9rem;
        }

        &--visa svg {
            transform: scale(0.8);
            transform-origin: center;
        }
    }
}

.bf-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;

    &.is-open {
        display: block;
    }

    &__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.88);
    }

    &__frame {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 3.5rem 4.5rem;
        box-sizing: border-box;

        body.is-mobile-layout & {
            padding: 3.25rem 0.5rem 5.125rem;
        }
    }

    &__content {
        max-width: min(92vw, 80rem);
        max-height: calc(100vh - 8.75rem);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &__media {
        max-width: 100%;
        max-height: calc(100vh - 8.75rem);
        object-fit: contain;
        display: block;
    }

    &__btn {
        position: absolute;
        border: 0;
        background: rgba(25, 25, 25, 0.7);
        color: #f8f8f8;
        cursor: pointer;
        font-size: 2.125rem;
        line-height: 1;
        width: 2.875rem;
        height: 2.875rem;
        border-radius: 0.5rem;

        &:hover {
            background: rgba(45, 45, 45, 0.9);
        }

        &--close {
            top: 0.75rem;
            right: 0.875rem;
            font-size: 1.875rem;
        }

        &--prev {
            left: 0.875rem;
            top: 50%;
            transform: translateY(-50%);

            body.is-mobile-layout & {
                left: 0.375rem;
            }
        }

        &--next {
            right: 0.875rem;
            top: 50%;
            transform: translateY(-50%);

            body.is-mobile-layout & {
                right: 0.375rem;
            }
        }
    }

    &__footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.875rem 1.125rem;
        color: #f2f2f2;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
        font-size: 0.875rem;
        pointer-events: none;
    }

    &__caption {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    &__counter {
        opacity: 0.9;
        flex-shrink: 0;
    }
}

body.bf-lightbox-open {
    overflow: hidden;
}