/* ===== ZOOM: FORCE FULL WIDTH + FULL HEIGHT FROM CSS ONLY ===== */

/* 1) Let the page actually be as tall as the viewport */
html, body { height: 100%; margin: 0; padding: 0; }

/* 2) Choose the embed height (use 100vh or safer 100svh on mobile) */
.ow-live { --zmos-embed-h: 100vh; }
@supports (height: 100svh) {
  .ow-live { --zmos-embed-h: 100svh; }
}

/* 3) Kill earlier min-height limits and enforce full height/width everywhere */
.ow-live .ow-player,
.ow-zoom-root {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;                  /* neutralize old 70vh */
  height: var(--zmos-embed-h) !important;    /* full viewport (or parent if you change the var) */
  background: #000;                           /* avoids flashes behind canvas */
}

/* If Elementor or theme constrains width, blow past it */
.elementor-section.elementor-section-stretched .ow-zoom-root,
.elementor-container .ow-zoom-root {
  max-width: none !important;
  width: 100% !important;
}

/* 4) Ensure the Zoom mount and its common inner wrappers stretch */
#zmos-player {
  width: 100% !important;
  height: var(--zmos-embed-h) !important;
  display: block !important;
}

:is(.ow-zoom-root, #zmos-player) > div {
  width: 100% !important;
  height: 100% !important;
}

/* 5) Zoom internal containers that often get inline px sizes */
.ow-zoom-root :is(
  .zmmtg-root,
  .meeting-client,
  .meeting-app,
  .app-window,
  .content-body,
  .main-layout,
  .main-layout .viewport,
  .video-content,
  .gallery-video-container__wrap,
  .sharee-container,
  .suspension-view
){
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  flex: 1 1 auto !important;
}

/* 6) Remove padding that shrinks the stage */
.ow-zoom-root .app-window { padding: 0 !important; }

/* 7) Keep internals flexed so video fills height */
.ow-zoom-root .meeting-app,
.ow-zoom-root .content-body,
.ow-zoom-root .main-layout {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
}

/* 8) Make the actual media obey both width & height */
.ow-zoom-root video,
.ow-zoom-root canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}

/* 9) (Optional) Tighten Zoom Paper buttons look */
.zoom-MuiPaper-root button {
  padding: 0 !important;
  background: transparent !important;
}
.zoom-MuiPaper-root button:hover {
  background: transparent !important;
}

/* === Brand colours (kept from your file) === */
:root {
  --zmos-brand: #df4b24;
  --zmos-dark:  #1b3232;
}
.ow-zoom-root .zm-btn,
.ow-zoom-root .footer-button__button,
.ow-zoom-root .suspension-btn,
.ow-zoom-root .more-button__button,
.ow-zoom-root .join-audio__btn {
  background: var(--zmos-brand) !important;
  border-color: var(--zmos-brand) !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.ow-zoom-root .zm-iconfont,
.ow-zoom-root .zm-btn__icon { color:#fff !important; }
.ow-zoom-root .zm-btn:hover,
.ow-zoom-root .footer-button__button:hover,
.ow-zoom-root .suspension-btn:hover,
.ow-zoom-root .more-button__button:hover,
.ow-zoom-root .join-audio__btn:hover {
  background: var(--zmos-dark) !important;
  border-color: var(--zmos-dark) !important;
}
.ow-zoom-root .footer-button__button--disabled,
.ow-zoom-root .zm-btn[disabled] {
  background:#dcdcdc !important;
  border-color:#dcdcdc !important;
  color:#888 !important;
}
.ow-zoom-root .suspension-box,
.ow-zoom-root .footer-container { border-radius: 10px !important; }

/* If you ever want “truly full page width” sections */
.ow-zoom-root { margin: 0 !important; }