@charset "UTF-8";
 /* Basic modal styling */
        .modal {
        display: none;
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 999;
        align-items: center;
        justify-content: center;
        }

        .modal.show {
        display: flex;
        }
/* modal content: use aspect-ratio and smart width calculation */
/* Default = landscape 16:9 */
.modal-content {
  position: relative;
  background: #000;
  border-radius: 8px;
  overflow: hidden;

  aspect-ratio: 16 / 9;                       /* enforce 16:9 by default */
  max-width: 1000px;                          /* keep your previous max */
  width: min(90%, calc(80vh * (16 / 9)));     /* width limited by viewport height */
  height: auto;                               /* let aspect-ratio compute height */
  max-height: 80vh;                           /* never exceed 80% viewport height */
  padding: 0;
}

/* iframe fills the box */
.modal iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.modal-close {
        position: absolute;
        top: 10px;
        right: 10px;
        background: white;
        border: none;
        font-size: 18px;
        cursor: pointer;
        z-index: 1000;
        }

/* Portrait devices -> switch to tall 9:16 ratio */
@media (orientation: portrait) {
  .modal-content {
    aspect-ratio: 9 / 16;                      /* enforce portrait ratio */
    width: min(95vw, calc(90vh * (9 / 16)));   /* width limited by viewport height/width */
    height: auto;
    max-height: 90vh;                          /* allow it to be slightly taller on phones */
    max-width: 95vw;
  }
}