/* Blocca lo scroll pagina quando il modal è aperto */
html.pms-modal-open,
body.pms-modal-open {
  overflow: hidden;
}

/* Contenitore del modal */
.pms-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

/* Stato aperto */
.pms-modal.is-open {
  display: block;
}

/* Overlay nero trasparente */
.pms-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dialog centrale con player */
.pms-modal__dialog {
  position: relative;
  width: 70vw;
  max-width: 1200px;
  background: transparent;
}

/* Mobile: 90% */
@media (max-width: 768px) {
  .pms-modal__dialog {
    width: 90vw;
    border-radius: 12px;
  }
}

/* Corpo del modal: il player riempie tutto */
.pms-modal__body {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--pmsyt-radius-outer);
}

/* Assicuriamoci che wrapper e iframe occupino tutto il riquadro */
.pms-modal__body .pmsyt-wrapper {
	width: 100%!important;
	max-width: 100%!important;
}

/* =====================================================
   VIDEO VERTICALI (portrait 9:16) - tutta altezza
   ===================================================== */
.pms-modal__dialog.pms-modal__dialog--portrait {
  width: auto !important;
  max-width: none !important;
  height: 90vh !important;
  aspect-ratio: 9 / 16 !important;
}

@media (max-width: 768px) {
  .pms-modal__dialog.pms-modal__dialog--portrait {
    height: 85vh !important;
  }
}

/* Portrait: sovrascrive il padding-top trick del player */
.pms-modal__dialog.pms-modal__dialog--portrait .pms-modal__body {
  height: 100% !important;
}

.pms-modal__dialog.pms-modal__dialog--portrait .pmsyt-root,
.pms-modal__dialog.pms-modal__dialog--portrait .pmsyt-header,
.pms-modal__dialog.pms-modal__dialog--portrait .pmsyt-wrapper,
.pms-modal__dialog.pms-modal__dialog--portrait .pmsyt-inner {
  height: 100% !important;
}

.pms-modal__dialog.pms-modal__dialog--portrait .pmsyt-video-area {
  height: 100% !important;
  padding-top: 0 !important;
}

.pms-modal__dialog.pms-modal__dialog--portrait .pmsyt-video-container,
.pms-modal__dialog.pms-modal__dialog--portrait .pmsyt-cover {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.pms-modal__dialog.pms-modal__dialog--portrait .pmsyt-video-container iframe {
  width: 100% !important;
  height: 100% !important;
}

/* X di chiusura appena fuori in alto a destra */
.pms-modal__close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* Icona X disegnata via pseudo-elementi */
.pms-modal__close::before,
.pms-modal__close::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 2px;
  background: #111111;
  border-radius: 999px;
}

.pms-modal__close::before {
  transform: rotate(45deg);
}

.pms-modal__close::after {
  transform: rotate(-45deg);
}

.pms-modal__close:hover::before,
.pms-modal__close:hover::after {
  background: #000000;
}

/* Piccola animazione di ingresso */
.pms-modal.is-open .pms-modal__dialog {
  animation: pms-modal-in 0.2s ease-out;
}

@keyframes pms-modal-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}