@keyframes pfa-modal-fade-in {
  from {
    opacity: 0;
    transform: translateY(var(--pfa-animation-distance));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pfa-modal-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(var(--pfa-animation-distance));
  }
}

:root {
  /* Colors */
  --pfa-overlay-bg: rgb(0 0 0 / 80%);
  --pfa-overlay-bg-high-contrast: rgb(0 0 0 / 90%);
  --pfa-container-bg: #fff;
  --pfa-container-bg-dark: #1e1e1e;
  --pfa-container-border-high-contrast: #000;
  --pfa-text-color: #131313;
  --pfa-text-color-dark: #e0e0e0;
  --pfa-close-border: solid 2px #0597ff;
  --pfa-close-bg: #ececec;
  --pfa-close-bg-dark: #3f3f3f;
  --pfa-close-bg-hover: #0597ff;
  --pfa-close-bg-hover-dark: #0597ff;
  --pfa-close-icon-color: #131313;
  --pfa-close-icon-color-dark: #fff;
  --pfa-focus-ring: rgb(0 123 255 / 30%);
  --pfa-focus-outline: #0073aa;

  /* Spacing */
  --pfa-overlay-padding: 1rem;
  --pfa-overlay-padding-tablet: 0.75rem;
  --pfa-overlay-padding-mobile: 0.5rem;
  --pfa-overlay-padding-top-mobile: 2rem;
  --pfa-content-padding: 1.5rem;
  --pfa-content-padding-tablet: 1.25rem;
  --pfa-content-padding-mobile: 1rem;
  --pfa-close-padding: 0.1rem;

  /* Sizing */
  --pfa-container-max-width: 500px;
  --pfa-container-max-width-with-image: 650px;
  --pfa-container-max-height: 95%;
  --pfa-container-max-height-tablet: 95%;
  --pfa-container-max-height-mobile: 95%;
  --pfa-close-size: 36px;
  --pfa-close-size-tablet: 32px;
  --pfa-close-size-mobile: 28px;
  --pfa-close-icon-size: 24px;
  --pfa-close-icon-size-tablet: 22px;
  --pfa-close-icon-size-mobile: 20px;

  /* Border Radius */
  --pfa-border-radius: 8px;
  --pfa-close-border-radius: 50%;

  /* Typography */
  --pfa-text-size: inherit;
  --pfa-text-size-mobile: 0.9375rem;
  --pfa-text-line-height: 1.6;
  --pfa-button-size: 1rem;
  --pfa-button-size-mobile: 0.9375rem;
  --pfa-button-weight: 500;

  /* Effects */
  --pfa-shadow: 0 10px 40px rgb(0 0 0 / 30%);
  --pfa-z-index: 999999;
  --pfa-transition-duration: 0.2s;
  --pfa-animation-duration: 0.3s;
  --pfa-animation-distance: -20px;
  --pfa-transition-timing: ease;
  --pfa-animation-timing: ease-out;
}

.pfa-modal {
  display: none;
}

.pfa-modal .pfa-modal__overlay {
    align-items: center;
    background: var(--pfa-overlay-bg);
    display: flex;
    inset: 0;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    padding: var(--pfa-overlay-padding);
    position: fixed;
    z-index: var(--pfa-z-index);
  }

.pfa-modal .pfa-modal__overlay .pfa-modal__container {
      background-color: var(--pfa-container-bg);
      border-radius: var(--pfa-border-radius);
      box-shadow: var(--pfa-shadow);
      box-sizing: border-box;
      max-height: var(--pfa-container-max-height);
      max-width: var(--pfa-container-max-width);
      overflow-y: auto;
      position: relative;
      width: 100%;
    }

.pfa-modal .pfa-modal__overlay .pfa-modal__container .pfa-modal__header {
        position: relative;
      }

.pfa-modal .pfa-modal__overlay .pfa-modal__container .pfa-modal__header .pfa-modal__close {
          background: none;
          border: 0;
          cursor: pointer;
          height: var(--pfa-close-size);
          padding: 0;
          position: absolute;
          right: 0.5rem;
          top: 0.5rem;
          width: var(--pfa-close-size);
          z-index: 100;
        }

.pfa-modal .pfa-modal__overlay .pfa-modal__container .pfa-modal__header .pfa-modal__close svg {
            fill: var(--pfa-close-icon-color);
            height: var(--pfa-close-icon-size);
            pointer-events: none;
            width: var(--pfa-close-icon-size);
          }

.pfa-modal .pfa-modal__overlay .pfa-modal__container .pfa-modal__header .pfa-modal__close:focus-visible {
            outline: 2px solid var(--pfa-focus-outline);
            outline-offset: 2px;
          }

.pfa-modal .pfa-modal__overlay .pfa-modal__container .pfa-modal__header .pfa-modal__close:hover,
          .pfa-modal .pfa-modal__overlay .pfa-modal__container .pfa-modal__header .pfa-modal__close:focus {
            outline: none;
          }

.pfa-modal .pfa-modal__overlay .pfa-modal__container .pfa-modal__header .pfa-modal__close:hover svg {
              fill: var(--pfa-close-bg-hover);
            }

.pfa-modal .pfa-modal__overlay .pfa-modal__container .pfa-modal__header .pfa-modal__close.pfa-modal__close--light svg {
              fill: var(--pfa-close-icon-color-dark);
            }

.pfa-modal .pfa-modal__overlay .pfa-modal__container .pfa-modal__header .pfa-modal__close.pfa-modal__close--light:hover svg {
                fill: var(--pfa-close-bg-hover);
              }

.pfa-modal .pfa-modal__overlay .pfa-modal__container .pfa-modal__content {
        color: var(--pfa-text-color);
        display: flex;
        flex-basis: 100%;
        line-height: var(--pfa-text-line-height);
      }

.pfa-modal .pfa-modal__overlay .pfa-modal__container .pfa-modal__content .pfa-modal__content__content {
          padding: var(--pfa-content-padding);
          padding-right: calc(var(--pfa-content-padding) + var(--pfa-close-size));
        }

.pfa-modal .pfa-modal__overlay .pfa-modal__container .pfa-modal__content .pfa-modal__content__content >*:first-child {
            margin-top: 0;
          }

.pfa-modal .pfa-modal__overlay .pfa-modal__container .pfa-modal__content .pfa-modal__content__content >*:last-child {
            margin-bottom: 0;
          }

.pfa-modal .pfa-modal__overlay .pfa-modal__container.pfa-modal__container--with-image {
        max-width: var(--pfa-container-max-width-with-image);
      }

.pfa-modal .pfa-modal__overlay .pfa-modal__container.pfa-modal__container--with-image .pfa-modal__content .pfa-modal__content__content {
            flex-basis: 50%;
            z-index: 10;
          }

.pfa-modal .pfa-modal__overlay .pfa-modal__container.pfa-modal__container--with-image .pfa-modal__content .pfa-modal__content__image {
            flex-basis: 50%;
            flex-shrink: 0;
            position: relative;
          }

.pfa-modal .pfa-modal__overlay .pfa-modal__container.pfa-modal__container--with-image .pfa-modal__content .pfa-modal__content__image img {
              display: block;
              height: 100%;
              left: 0;
              max-width: 100%;
              object-fit: cover;
              position: absolute;
              top: 0;
              width: 100%;
            }

.pfa-modal.is-open {
    display: block;
  }

.pfa-modal.is-open .pfa-modal__container {
      animation: pfa-modal-fade-in var(--pfa-animation-duration) var(--pfa-animation-timing);
    }

.pfa-modal.is-closing .pfa-modal__container {
      animation: pfa-modal-fade-out var(--pfa-animation-duration) var(--pfa-animation-timing);
    }

.pfa-modal.pfa-modal--info .pfa-modal__overlay .pfa-modal__container .pfa-modal__content .pfa-modal__content__content__title {
            font-size: 1.375rem;
            font-weight: 600;
          }

.pfa-modal.pfa-modal--cta .pfa-modal__overlay .pfa-modal__container .pfa-modal__content .pfa-modal__content__content__title {
            font-size: 2.625rem;
            font-weight: 600;
            line-height: 1;
          }

.pfa-modal.pfa-modal--cta .pfa-modal__overlay .pfa-modal__container .pfa-modal__content .wp-block-group {
            margin-top: 3.125rem;
          }

.pfa-modal.pfa-modal--cta .pfa-modal__overlay .pfa-modal__container .pfa-modal__content .wp-block-group .wp-block-buttons,
              .pfa-modal.pfa-modal--cta .pfa-modal__overlay .pfa-modal__container .pfa-modal__content .wp-block-group .wp-block-buttons .wp-block-button {
                width: 100%;
              }

.pfa-modal.pfa-modal--hero .pfa-modal__overlay .pfa-modal__container {
        min-height: 403px;
      }

.pfa-modal.pfa-modal--hero .pfa-modal__overlay .pfa-modal__container .pfa-modal__content .pfa-modal__content__image,
            .pfa-modal.pfa-modal--hero .pfa-modal__overlay .pfa-modal__container .pfa-modal__content .pfa-modal__content__image::after {
              height: 100%;
              left: 0;
              position: absolute;
              top: 0;
              width: 100%;
            }

.pfa-modal.pfa-modal--hero .pfa-modal__overlay .pfa-modal__container .pfa-modal__content .pfa-modal__content__image::after {
              background-color: rgb(0 0 0 / 30%);
              content: '';
            }

.pfa-modal.pfa-modal--hero .pfa-modal__overlay .pfa-modal__container .pfa-modal__content .pfa-modal__content__content {
            bottom: 0;
            flex-basis: 100%;
            left: 0;
            position: absolute;
          }

.pfa-modal.pfa-modal--hero .pfa-modal__overlay .pfa-modal__container .pfa-modal__content .pfa-modal__content__content .pfa-modal__content__content__title {
              color: #fff;
              font-size: 2.625rem;
              font-weight: 600;
              line-height: 1;
            }

.pfa-modal.pfa-modal--hero .pfa-modal__overlay .pfa-modal__container .pfa-modal__content .pfa-modal__content__content .wp-block-buttons {
              margin-top: 2.5rem;
            }

/* Tablets */
@media (width <= 768px) {
    .pfa-modal .pfa-modal__overlay {
      padding: var(--pfa-overlay-padding-tablet);
    }

      .pfa-modal .pfa-modal__overlay .pfa-modal__container {
        max-height: var(--pfa-container-max-height-tablet);
      }
          .pfa-modal .pfa-modal__overlay .pfa-modal__container .pfa-modal__header .pfa-modal__close {
            height: var(--pfa-close-size-tablet);
            width: var(--pfa-close-size-tablet);
          }

            .pfa-modal .pfa-modal__overlay .pfa-modal__container .pfa-modal__header .pfa-modal__close svg {
              height: var(--pfa-close-icon-size-tablet);
              width: var(--pfa-close-icon-size-tablet);
            }
          .pfa-modal .pfa-modal__overlay .pfa-modal__container .pfa-modal__content .pfa-modal__content__content {
            padding: var(--pfa-content-padding-tablet);
            padding-right: calc(var(--pfa-content-padding) + var(--pfa-close-size-tablet));
          }
}

/* Mobile phones */
@media (width <= 480px) {
    .pfa-modal .pfa-modal__overlay {
      align-items: flex-start;
      padding: var(--pfa-overlay-padding-mobile);
      padding-top: var(--pfa-overlay-padding-top-mobile);
    }

      .pfa-modal .pfa-modal__overlay .pfa-modal__container {
        max-height: var(--pfa-container-max-height-mobile);
      }
          .pfa-modal .pfa-modal__overlay .pfa-modal__container .pfa-modal__header .pfa-modal__close {
            height: var(--pfa-close-size-mobile);
            width: var(--pfa-close-size-mobile);
          }

            .pfa-modal .pfa-modal__overlay .pfa-modal__container .pfa-modal__header .pfa-modal__close svg {
              height: var(--pfa-close-icon-size-mobile);
              width: var(--pfa-close-icon-size-mobile);
            }
          .pfa-modal .pfa-modal__overlay .pfa-modal__container .pfa-modal__content .pfa-modal__content__content {
            font-size: var(--pfa-text-size-mobile);
            padding: var(--pfa-content-padding-mobile);
            padding-right: calc(var(--pfa-content-padding) + var(--pfa-close-size-mobile));
          }
}

/* High contrast mode support */
@media (prefers-contrast: more) {
    .pfa-modal .pfa-modal__overlay {
      background: var(--pfa-overlay-bg-high-contrast);
    }

      .pfa-modal .pfa-modal__overlay .pfa-modal__container {
        border: 2px solid var(--pfa-container-border-high-contrast);
      }
          .pfa-modal .pfa-modal__overlay .pfa-modal__container .pfa-modal__header .pfa-modal__close:focus {
            outline: 2px solid currentcolor;
            outline-offset: 2px;
          }
}

@media (prefers-color-scheme: dark) {
      .pfa-modal .pfa-modal__overlay .pfa-modal__container {
        background-color: var(--pfa-container-bg-dark);
        color: var(--pfa-text-color-dark);
      }
            .pfa-modal .pfa-modal__overlay .pfa-modal__container .pfa-modal__header .pfa-modal__close svg {
              fill: #fff;
            }

        .pfa-modal .pfa-modal__overlay .pfa-modal__container .pfa-modal__content {
          color: var(--pfa-text-color-dark);
        }
}

@media print {
  .pfa-modal {
    display: none !important;
  }
}

