/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
.popup-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: rgb(0 0 0 / 70%);
  z-index: 2000;
  &.hidden {
    display: none;
  }
  .overflow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    .center-vertical {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100%;
      padding-block: 5%;
      width: 100%;
    }
  }
  .modal {
    position: relative;
    max-width: 90%;
    height: auto;
    color: #000;
    .close {
      position: absolute;
      top: 1.75rem;
      right: 1.75rem;
      width: 1.625rem;
      height: 1.625rem;
      border: none;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1;
      .icon {
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 1;
        pointer-events: none;
      }
    }
    .modal-content {
      background: #fff;
      box-shadow: 0 0.063rem 0.313rem 0.125rem rgba(0, 0, 0, 0.2);
      border: 0.063rem solid #000;
      border-radius: 0.6rem;
      overflow: hidden;
    }
    iframe {
      border: none;
    }
  }
}
@media screen and (min-width: 64rem) {
  .popup-modal-backdrop {
    .overflow {
      .center-vertical {
        padding-block: 3%;
      }
    }
  }
}
@media screen and (min-width: 96rem) {
  .popup-modal-backdrop {
    .overflow {
      .center-vertical {
        padding-block: 2%;
      }
    }
  }
}