/*
============================================
    BASE STYLES (320px+)
============================================
*/

.popup__overlay {
  background-color: rgba(0, 0, 0, 0.7);
  bottom: 0;
  display: flex;
  height: 100%;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1000; /* Ensure it's above other content */
  overflow-y: auto; /* Enable vertical scrolling */
  padding: var(--spacing-medium) 0;
  box-sizing: border-box;
}

.popup__window {
  background-color: var(--color-main-white);
  border-radius: 32px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  max-width: 480px;
  padding: 32px; /* 32px all around for mobile */
  position: relative;
  text-align: left;
  width: calc(100% - 32px); /* This accounts for 16px side padding for the window itself */
  margin: auto;
}

.popup__close {
  background: none;
  border: none;
  color: var(--color-main-grey-600);
  cursor: pointer;
  font-size: 42px;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: 25px;
  top: 25px;
}

.popup__close:hover {
  color: var(--color-main-black);
}

.popup__headline {
  font: var(--font-headline-medium);
  color: var(--color-main-cold-blue-900);
  margin-bottom: 15px;
  margin-top: 0;
}

.popup__subline {
  font: var(--font-body-medium);
  color: var(--color-main-grey-500);
  margin-bottom: 30px;
}

.popup__subline a {
  color: var(--color-main-grey-500);
  text-decoration: underline;
}

/* Hide scrollbar on body when popup is open */
body.popup-open {
  overflow: hidden;
}

.popup__window iframe {
  width: 100%;
  border: none;
}

/*
============================================
    MEDIA QUERIES
============================================
*/


@media (min-width: 360px) {
    .popup__window {
        width: calc(100% - 32px);
    }
}


@media (min-width: 768px) {
    .popup__window {
        width: calc(100% - 128px);
        padding: 32px; /* 32px all around for larger screens */
    }
}


@media (min-width: 1024px) {
    .popup__window {
        max-width: 600px;
        padding: 60px;
    }
}


@media (min-width: 1440px) {
    .popup__window {
        max-width: 700px;
        padding: 80px;
    }
}


@media (min-width: 1920px) {
    .popup__window {
        max-width: 800px;
        padding: 100px;
    }
}