/* Social Fapping 1.3.22 — ajustes finais exclusivos do overlay desktop. */

@media (min-width: 769px) {
    /* As setas passam para o centro do right limite e crescem 20%. */
    .media-overlay {
        --scroll-arrow-size: 70px;
    }

    .media-overlay .media-overlay__scroll-arrow {
        right: calc((var(--overlay-desktop-reference-left) - 70px) / 2) !important;
        width: 70px !important;
        height: 70px !important;
    }

    /* Os três grupos do footer usam a mesma superfície visual. */
    .media-overlay.has-desktop-video-controls .media-overlay__footer {
        gap: 18px !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 {
        min-height: 40px !important;
        height: 40px !important;
        box-sizing: border-box !important;
        border: 0 !important;
        border-radius: 5px !important;
        background: rgba(7, 25, 54, .38) !important;
        box-shadow: none !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    /* Reserva cerca de 20% menos largura para os controles. */
    .media-overlay.has-desktop-video-controls .media-overlay__footer
    > .media-overlay__video-controls {
        width: clamp(280px, 42vw, 680px) !important;
        max-width: 80% !important;
        flex: 0 1 clamp(280px, 42vw, 680px) !important;
        padding-block: 0 !important;
    }

    .media-overlay.has-desktop-video-controls .media-overlay__footer
    > .media-overlay__social-buttons {
        align-self: center !important;
        overflow: hidden !important;
    }

    .media-overlay.has-desktop-video-controls .media-overlay__footer
    > .media-overlay__related-buttons {
        grid-template-rows: 40px !important;
        align-self: center !important;
    }

    /* Grid regular: nenhuma célula cresce conforme o nome. */
    .media-overlay.has-desktop-video-controls .media-overlay__footer
    > .media-overlay__related-popup .media-overlay__related-popup-grid {
        grid-auto-rows: 82px !important;
        align-items: start !important;
        gap: 8px 4px !important;
    }

    .media-overlay.has-desktop-video-controls .media-overlay__footer
    > .media-overlay__related-popup .media-overlay__related-popup-item {
        display: grid !important;
        width: 100% !important;
        height: 82px !important;
        min-height: 82px !important;
        grid-template-rows: 48px 28px !important;
        align-content: start !important;
        justify-items: center !important;
        gap: 4px !important;
    }

    .media-overlay.has-desktop-video-controls .media-overlay__footer
    > .media-overlay__related-popup .media-overlay__related-popup-name {
        display: -webkit-box !important;
        width: 100% !important;
        min-height: 24px !important;
        max-height: 24px !important;
        margin: 0 !important;
        overflow: hidden !important;
        font-size: 10px !important;
        line-height: 12px !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }
}