/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/

/* Fix for modal z-index conflict with tawk.to */
.modal {
    z-index: 9999 !important;
}

.modal-backdrop {
    z-index: 9998 !important;
}

/* Ensure tawk.to widget doesn't overlap with modals */
#tawkto-container {
    z-index: 9997 !important;
}

/* Video lightbox - large but fits viewport, no scrolling */
.mfp-video-fullscreen.mfp-wrap {
    overflow: hidden;
}
.mfp-video-fullscreen.mfp-wrap .mfp-container {
    padding: 0;
}
.mfp-video-fullscreen .mfp-iframe-holder {
    padding: 0;
}
.mfp-video-fullscreen .mfp-iframe-holder .mfp-content {
    width: min(90vw, 160vh);
    max-width: 1400px;
    line-height: 0;
}
.mfp-video-fullscreen .mfp-iframe-holder .mfp-close {
    top: 10px;
    right: 10px;
    color: #fff;
    z-index: 9999;
}
.mfp-video-fullscreen .mfp-iframe-scaler {
    width: 100%;
    padding-top: 56.25%;
    height: 0;
    overflow: hidden;
}
.mfp-video-fullscreen .mfp-iframe-scaler iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}