/* Prevent Scroll */
body.popup-open {
    overflow: hidden;
    height: 100vh;
  }
  
  #site-popup {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  }
  
  #site-popup.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
  
    /* Popup box layout */
    .popup-box {
      display: flex;
      max-width: 800px;
      width: 90%;
      min-height: 400px;
      background: #fff;
      overflow: hidden;
      position: relative;
    }
    
    /* Left side - Image */
    .popup-image {
      width: 45%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
    
    .popup-image img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 1;
    }
    
    /* Right side - Text */
    .popup-content {
      width: 55%;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    div#site-popup .popup-headline {
      font-family: var(--wp--preset--font-family--auguste);
      font-size: clamp(24px,4vw,40px);
      font-weight: 700;
      margin-bottom: 1rem;
    }
    
    .popup-message {
      font-size: 1rem;
      color: #303030;
      line-height: 1.5;
      margin-bottom: 1.5rem;
      font-family: var(--wp--preset--font-family--maligne);
    }
    
    .popup-button {
      max-width: fit-content;
      max-height: 50px;
    }
    
    .popup-close {
      position: absolute;
      top: 0.75rem;
      right: 0.75rem;
      background: none;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      color: #303030;
    }
    
    /* Mobile Styles */
    @media (max-width: 750px) {
      .popup-content, .popup-image {
          width: 100%;
      }
      
      .popup-box {
          flex-direction: column-reverse;
      }
    }