/* SN-REPORT-FOOTER-SOCIAL-20261026-V3
   Copy actual footer button dimensions and shapes.
   Position report social grid on the right.
*/

.report-socials__icons.sn-report-socials-mounted {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    justify-content: flex-end !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

.report-socials__icons .sn-report-footer-skin.footer {
    display: block !important;
    position: static !important;

    width: max-content !important;
    max-width: 100% !important;
    min-height: 0 !important;

    padding: 0 !important;
    margin: 0 0 0 auto !important;

    background: transparent !important;
    box-shadow: none !important;
}

.report-socials__icons .sn-report-footer-grid {
    display: grid !important;

    grid-template-columns:
        repeat(3, var(--sn-report-button-width, 90px)) !important;

    grid-template-rows:
        repeat(2, var(--sn-report-button-height, 42px)) !important;

    column-gap: var(--sn-report-gap-x, 5px) !important;
    row-gap: var(--sn-report-gap-y, 5px) !important;

    width: max-content !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    align-items: stretch !important;
    justify-items: stretch !important;

    padding: 0 !important;
    margin: 0 0 0 auto !important;
}

.report-socials__icons .sn-report-footer-grid > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: var(--sn-report-button-width, 90px) !important;
    min-width: 0 !important;
    max-width: none !important;

    height: var(--sn-report-button-height, 42px) !important;
    min-height: 0 !important;
    max-height: none !important;

    padding: 0 !important;
    margin: 0 !important;

    box-sizing: border-box !important;

    border-radius: var(--sn-report-radius, 7px) !important;
}

.report-socials__icons .sn-report-footer-grid > a svg,
.report-socials__icons .sn-report-footer-grid > a img {
    width: var(--sn-report-icon-width, 24px) !important;
    height: var(--sn-report-icon-height, 24px) !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
}


/* SN-REPORT-YOUTUBE-BACKGROUND-20261026-V4
   Restore original footer YouTube background.
   Report pages only.
*/

.report-socials__icons .sn-report-footer-grid
> a[href*="youtube.com"],
.report-socials__icons .sn-report-footer-grid
> a[href*="youtu.be"] {
    background: #FF2C43 !important;
    background-color: #FF2C43 !important;
}


/* SN-REPORT-YOUTUBE-HOVER-20261026-V5
   YouTube only, report social block only.
*/

.report-socials__icons .sn-report-footer-grid
> a[href*="youtube.com"],
.report-socials__icons .sn-report-footer-grid
> a[href*="youtu.be"] {
    transition: background-color 0.25s ease !important;
}

.report-socials__icons .sn-report-footer-grid
> a[href*="youtube.com"]:hover,
.report-socials__icons .sn-report-footer-grid
> a[href*="youtu.be"]:hover,
.report-socials__icons .sn-report-footer-grid
> a[href*="youtube.com"]:focus-visible,
.report-socials__icons .sn-report-footer-grid
> a[href*="youtu.be"]:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
}


/* SN-REPORT-YOUTUBE-BORDER-20261026-V6
   YouTube: normal / hover / focus-visible.
   Only the report social block.
*/

.report-socials__icons .sn-report-footer-grid
> a[href*="youtube.com"],
.report-socials__icons .sn-report-footer-grid
> a[href*="youtu.be"] {
    border: 2px solid transparent !important;
    box-sizing: border-box !important;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease !important;
}

.report-socials__icons .sn-report-footer-grid
> a[href*="youtube.com"]:hover,
.report-socials__icons .sn-report-footer-grid
> a[href*="youtu.be"]:hover,
.report-socials__icons .sn-report-footer-grid
> a[href*="youtube.com"]:focus-visible,
.report-socials__icons .sn-report-footer-grid
> a[href*="youtu.be"]:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    border-color: #FF2C43 !important;
}
