/* ============================================================ Video Testimonials — VIDEO MODAL Portaled to , so selectors are scoped to .evt-modal (NOT .evt-section). Close button reset to beat theme styles. ============================================================ */ /* Modal replaced by inline player — hide any cached instances */ .evt-modal { display: none !important; } body.evt-modal-open { overflow: hidden; } .evt-modal { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box; } .evt-modal[aria-hidden="false"] { display: flex; } .evt-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.9); cursor: pointer; } /* Wrapper holds the video box + the close button below it */ .evt-modal-wrap { position: relative; z-index: 1; width: min(900px, calc(100vw - 2rem)); display: flex; flex-direction: column; align-items: center; } .evt-modal-wrap.evt-modal-wrap--portrait { width: min(420px, calc(100vw - 2rem)); } .evt-modal-content { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.7); isolation: isolate; } .evt-modal-wrap.evt-modal-wrap--portrait .evt-modal-content { aspect-ratio: 9 / 16; } .evt-modal-video-wrap { position: absolute; inset: 0; } .evt-modal-iframe, .evt-modal-video { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } .evt-modal-video { display: none; background: #000; object-fit: contain; transform: translateZ(0); /* force GPU layer — avoids black frames */ -webkit-transform: translateZ(0); } /* ---- Close button: circular, sits BELOW the video, theme-proof ---- */ .evt-modal .evt-modal-close { -webkit-appearance: none !important; appearance: none !important; position: static; flex: 0 0 auto; margin: 16px auto 0 !important; width: 46px !important; height: 46px !important; min-width: 0 !important; padding: 0 !important; border: 1.5px solid rgba(255,255,255,0.55) !important; border-radius: 50% !important; background: rgba(255,255,255,0.12) !important; color: #fff !important; font-size: 1.5rem !important; font-weight: 400; line-height: 1 !important; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: none !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background 0.2s ease, transform 0.15s ease; } .evt-modal .evt-modal-close:hover { background: rgba(255,255,255,0.28) !important; transform: scale(1.08); } /* ---- Mobile modal tweaks ---- */ @media (max-width: 767px) { .evt-modal { padding: 0.5rem; } .evt-modal-content { max-width: calc(100vw - 1rem); max-height: calc(100svh - 5rem); } .evt-modal-wrap.evt-modal-wrap--portrait .evt-modal-content { height: calc(100svh - 6rem); width: calc((100svh - 6rem) * 9 / 16); max-width: calc(100vw - 1rem); aspect-ratio: unset; } @supports not (height: 100svh) { .evt-modal-wrap.evt-modal-wrap--portrait .evt-modal-content { height: calc(100vh - 120px); width: calc((100vh - 120px) * 9 / 16); max-width: calc(100vw - 1rem); } } }