/* Social Fapping 1.3.23 — acabamento desktop do footer e Related. */

@media (min-width: 769px) {
    .media-overlay {
        background: #071630 !important;
    }

    .media-overlay .media-overlay__scroll-arrow {
        border: 1px solid #fff !important;
        border-radius: 50% !important;
        background: rgba(7, 25, 54, .7) !important;
    }

    .media-overlay .media-overlay__scroll-arrow .jork-icon,
    .media-overlay .media-overlay__scroll-arrow svg {
        width: 30px !important;
        height: 30px !important;
    }

    .media-overlay.has-desktop-video-controls .media-overlay__footer {
        justify-content: flex-start !important;
        gap: 18px !important;
    }

    /* Os controles ocupam exatamente a sobra entre os dois grupos fixos. */
    .media-overlay.has-desktop-video-controls .media-overlay__footer
    > .media-overlay__video-controls {
        width: auto !important;
        max-width: none !important;
        flex: 1 1 0 !important;
    }

    .media-overlay.has-desktop-video-controls .media-overlay__footer
    > .media-overlay__video-controls,
    .media-overlay.has-desktop-video-controls .media-overlay__footer
    > .media-overlay__social-buttons,
    .media-overlay.has-desktop-video-controls .media-overlay__footer
    > .media-overlay__related-buttons {
        height: 40px !important;
        min-height: 40px !important;
        border: 0 !important;
        border-radius: 5px !important;
        background: rgba(7, 25, 54, .38) !important;
        transition: opacity .22s ease, transform .22s ease !important;
    }

    /* Mantém o Related e seu popup no mesmo eixo direito da moldura. */
    .media-overlay.has-desktop-video-controls .media-overlay__footer
    > .media-overlay__related-buttons {
        right: auto !important;
        margin: 0 !important;
    }

    .media-overlay.has-desktop-video-controls .media-overlay__footer
    > .media-overlay__related-popup,
    .media-overlay.has-desktop-video-controls .media-overlay__footer
    > .media-overlay__related-popup.is-open {
        right: var(--overlay-desktop-reference-left) !important;
        bottom: 0 !important;
        background: rgba(7, 25, 54, .38) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Com menos de quatro termos, os vazios ficam à esquerda. */
    .media-overlay.has-desktop-video-controls .media-overlay__footer
    > .media-overlay__related-buttons
    > .media-overlay__desktop-related-item:first-child {
        grid-column-start: var(--overlay-related-start, 1) !important;
    }

    .media-overlay.has-desktop-video-controls .media-overlay__footer
    > .media-overlay__related-buttons
    > .media-overlay__related-more {
        grid-column: 5 !important;
    }

    /* Summary equivalente à largura de uma mídia 9:16. */
    .media-overlay__post-info .media-overlay__entry-summary {
        width: min(56.25dvh, calc(var(--overlay-desktop-reference-width) - 24px)) !important;
        max-width: min(56.25dvh, calc(100vw - 24px)) !important;
    }
}