/* Modal shell + button */
.cehls-modal { position: fixed; inset: 0; display: none; z-index: 9999; }
.cehls-modal.is-open { display: block; }
.cehls-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.7); }
.cehls-modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100svh;
    min-width: 100svw;
  max-width: 1280px; width: calc(100vw - 3rem);
  z-index: 1;
  padding: 15px;
}
.cehls-modal-body { position: relative; aspect-ratio: 16/9; background: #000; width: 1280px; border-radius: 20px;
  overflow: hidden; }
.cehls-modal-close {
  position: absolute; top: .5rem; right: .5rem;
  width: 40px; height: 40px; line-height: 36px;
  border-radius: 20px; border: 0; background: rgba(255,255,255,.15);
  color: #fff; font-size: 28px; cursor: pointer;
}
.cehls-modal-btn { display: inline-block; cursor: pointer; text-decoration: none; }
.cehls-modal-btn--sm { padding: .4rem .8rem; font-size: .875rem; }
.cehls-modal-btn--md { padding: .6rem 1rem; font-size: 1rem; }
.cehls-modal-btn--lg { padding: .8rem 1.2rem; font-size: 1.125rem; }
.cehls-modal-btn--xl { padding: 1rem 1.4rem; font-size: 1.25rem; }

/* Make the player occupy the modal’s video area */
.cehls-modal-body { position: relative; aspect-ratio: 16/9; background:#000; }
.cehls-modal-body .cehls-player { position: absolute; inset: 0; width: 100%; height: 100%; }
.cehls-modal-body .cehls-player video { position:absolute; inset:0; width:100%; height:100%; object-fit: contain; }

/* Keep controls anchored and above the video */
.cehls-modal-body .cehls-controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }
.cehls-modal-body .cehls-center-toggle { position: absolute; inset: 0; }

/* Minimal reset to avoid theme buttons messing with layout */
.cehls-modal .cehls-controls button,
.cehls-modal .cehls-center-toggle {
  appearance: none;
  background: none;
  border: 0;
  line-height: 1;
  padding: 0;
}

/* Ensure clicks reach the UI, not the overlay */
.cehls-modal .cehls-player { z-index: 2; }
.cehls-modal .cehls-modal-backdrop { z-index: 1; }


/* The video area */
.cehls-modal-body { position: relative; aspect-ratio: 16/9; background:#000; }
.cehls-modal-body .cehls-player { position:absolute; inset:0; width:100%; height:100%; }

/* Video behind, UI above */
.cehls-modal-body .cehls-player video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:1; }
.cehls-modal-body .cehls-controls { position:absolute; left:0; right:0; bottom:0; z-index:3; }
.cehls-modal-body .cehls-center-toggle { position:absolute; inset:0; z-index:2; pointer-events:auto; }

/* Make sure buttons/timeline aren’t collapsed by theme resets */
.cehls-modal .cehls-controls button,
.cehls-modal .cehls-center-toggle { appearance:none; background:none; border:0; line-height:1; padding:0; }

/* Keep the backdrop behind everything */
.cehls-modal .cehls-modal-backdrop { z-index:0; }

button.cehls-modal-close {
min-width: 36px !important;
    min-height: 36px !important;
    align-content: center;
    justify-content: center;
    font-size: 20px !important;
    background-color: var(--e-global-color-c543dfa) !important;
    padding: 7px;
    border-radius: 100px;
    box-shadow: none;
    padding-top: 7.5px;
    color: #fff !important;
    right: 20px;
    top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cehls-modal-close path {
    fill: #fff;
}
button.cehls-modal-close:hover {
    background-color: grey !important;
}
.cehls-modal-btn {
    cursor: pointer;
    transition: all 0.25s ease;
}