/*--- side popups ---*/
.sidePopup{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  overflow-x: hidden;
  background-color: white;
  box-shadow: 5px 5px 10px rgba(0,0,0,.3);
  z-index: 1100;

  /* estado base: oculto a la izquierda */
  transform: translateX(-100%);
  visibility: hidden;
  pointer-events: none;

  /* transición para entrar/salir */
  transition:
    transform .8s ease,
    visibility 0s linear .8s; 
}

.sidePopup.is-open{
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;

  transition:
    transform .8s ease,
    visibility 0s linear 0s;
}

/* popup */
.popup{
    display: none;
    position: fixed;
    z-index: 1200;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/* background */
.pp-1st{
    background-color: rgba(0,0,0,0.6);
}
.pp-2nd{
    background-color: rgba(0,0,0,0.6);
}

/* popup content */
.pp-content{
    background-color: white;
    position: relative;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.7);
    overflow: auto;
}


/*--- close popups ---*/
.pp-close{
    width: 98%;
    color: black;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    margin: auto;
    margin-top: 7px;
}

.pp-close-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color1);
    color: white;
}

.pp-close-icon-modern{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(0, 125, 186, 0.1);
    color: var(--color1);
    font-size: 16px;
    font-weight: 300;
    transition: all 0.3s ease;
    cursor: pointer;
}

.pp-close-icon-modern:hover{
    background-color: var(--color1);
    color: white;
    transform: scale(1.1);
}

/* Video Popup Styles */
.video-popup-content{
    width: 1105px;
    max-width: none;
    margin: 0;
    padding: 15px 25px 30px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    position: fixed;
    top: 50%;
    left: 650px;
    transform: translate(-50%, -50%);
    max-height: 90vh;
    overflow-y: auto;
}

.video-popup-content .pp-close{
    margin-top: 0;
    margin-bottom: 5px;
    margin-right: 5px;
}

.video-popup-content .popup-header{
    margin-top: 0;
    margin-bottom: 20px;
}

.video-container{
    margin-top: 15px;
    margin-bottom: 20px;
    text-align: center;
    border-radius: 8px;
    overflow: hidden;
    background-color: #000;
}

.video-container video{
    width: 100%;
    max-height: 65vh;
    display: block;
}

@media (max-width: 1024px) {
    .video-popup-content{
        width: 90%;
        left: 50%;
        padding: 20px;
    }
    
    .video-container video{
        max-height: 50vh;
    }
}