/* ----------------------------------------------------------
   1. CENTER THE VIDEO POPUP
---------------------------------------------------------- */

.mfp-iframe-holder .mfp-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 15px !important;
}


/* ----------------------------------------------------------
   2. REMOVE MOTTA DEFAULT HORIZONTAL POPUP WIDTH
---------------------------------------------------------- */

.mfp-iframe-holder .mfp-content {
    width: min(90vw, 430px) !important;
    max-width: 430px !important;

    height: auto !important;

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

    background: transparent !important;

    line-height: 0 !important;

    position: relative !important;
}


/* ----------------------------------------------------------
   3. FORCE INSTAGRAM REEL 9:16 DIMENSIONS
---------------------------------------------------------- */

.mfp-iframe-holder .mfp-iframe-scaler {
    position: relative !important;

    width: 100% !important;
    height: auto !important;

    aspect-ratio: 9 / 16 !important;

    padding-top: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;

    background: transparent !important;

    border-radius: 10px !important;
}


/* ----------------------------------------------------------
   4. MAKE VIDEO FILL COMPLETE 9:16 POPUP
---------------------------------------------------------- */

.mfp-iframe-holder .mfp-iframe {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

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

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

    border: 0 !important;

    background: transparent !important;

    border-radius: 10px !important;
}

/* ----------------------------------------------------------
   CLOSE BUTTON
---------------------------------------------------------- */

.mfp-iframe-holder .mfp-content .mfp-close,
.motta-reel-video-popup .mfp-close {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: absolute !important;

    /* RIGHT CORNER */
    top: 8px !important;
    right: 8px !important;
    left: auto !important;

    /* Prevent Motta full-width button */
    width: 32px !important;
    min-width: 0 !important;
    max-width: 32px !important;

    height: 32px !important;
    min-height: 0 !important;

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

    /* Remove all background */
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    /* X */
    color: #ffffff !important;

    font-family: Arial, sans-serif !important;
    font-size: 32px !important;
    font-weight: 600 !important;

    line-height: 32px !important;
    text-align: center !important;

    transform: none !important;

    cursor: pointer !important;

    z-index: 999999 !important;
}


/* Remove background on hover/focus */
.mfp-iframe-holder .mfp-content .mfp-close:hover,
.mfp-iframe-holder .mfp-content .mfp-close:focus,
.motta-reel-video-popup .mfp-close:hover,
.motta-reel-video-popup .mfp-close:focus {
    background: none !important;
    background-color: transparent !important;

    color: #ffffff !important;

    box-shadow: none !important;
    opacity: 1 !important;
}

/* ----------------------------------------------------------
   6. POPUP BACKGROUND OVERLAY
---------------------------------------------------------- */

.mfp-bg {
    background: #000000 !important;

    opacity: 0.80 !important;
}


/* ----------------------------------------------------------
   7. REMOVE UNNECESSARY BACKGROUND FROM POPUP
---------------------------------------------------------- */

.mfp-iframe-holder,
.mfp-iframe-holder .mfp-content,
.mfp-iframe-holder .mfp-iframe-scaler {
    box-shadow: none !important;
}


/* ----------------------------------------------------------
   8. MOBILE
---------------------------------------------------------- */

@media (max-width: 767px) {

    .mfp-iframe-holder .mfp-container {
        padding: 10px !important;
    }

    .mfp-iframe-holder .mfp-content {
        width: min(92vw, 390px) !important;
        max-width: 390px !important;
    }

    .mfp-iframe-holder .mfp-iframe-scaler {
        width: 100% !important;

        aspect-ratio: 9 / 16 !important;

        max-height: 92vh !important;
    }

    .mfp-iframe-holder .mfp-close {
        top: 8px !important;
        right: 8px !important;

        width: 38px !important;
        height: 38px !important;

        font-size: 28px !important;
        line-height: 38px !important;
    }
}


/* ----------------------------------------------------------
   9. VERY SMALL MOBILE SCREENS
---------------------------------------------------------- */

@media (max-width: 400px) {

    .mfp-iframe-holder .mfp-content {
        width: 94vw !important;
        max-width: 94vw !important;
    }

}