/*=================================================
  *  BREAKPOINTS
  =================================================== */
/*=======================================
* MEDIA MAX
*=======================================*/
/*=======================================
* MEDIA MIN
*=======================================*/
/*=======================================
* MEDIA ONLY
*=======================================*/
/*=======================================
* MEDIA RANGE
*=======================================*/
.rt-modal {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  pointer-events: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 15px;
}
.rt-modal__overlay {
  position: fixed;
  inset: 0;
  background-color: var(--wp--custom--color--overlay, rgba(0, 0, 0, 0.8));
  backdrop-filter: blur(8px) saturate(130%);
  opacity: 0;
}
.rt-modal__inner {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 100px auto;
  background-color: var(--wp--preset--color--background);
  border-radius: var(--wp--custom--border-radius--x-large);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media screen and (max-width: 576px) {
  .rt-modal__inner {
    margin: 30px auto;
  }
}
.rt-modal__inner:hover {
  transform: translateY(-2px);
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.3);
}
.rt-modal {
  /**
   * States
   */
}
.rt-modal.is-active {
  visibility: visible;
  pointer-events: auto;
}
.rt-modal.is-active .rt-modal__overlay {
  animation: rtFadeIn 0.35s ease forwards;
}
.rt-modal.is-active .rt-modal__inner {
  animation: rtZoomIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.rt-modal.is-modal-out {
  display: block;
  visibility: visible;
  pointer-events: none;
}
.rt-modal.is-modal-out .rt-modal__overlay {
  animation: rtFadeOut 0.3s ease forwards;
}
.rt-modal.is-modal-out .rt-modal__inner {
  animation: rtZoomOut 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.rt-modal.is-modal-out .rt-modal__inner * {
  transition: none !important;
}
.rt-modal {
  /**
   * Structure
   */
}
.rt-modal__header {
  padding: var(--wp--preset--spacing--40);
  border-bottom: 1px solid var(--wp--preset--color--outline);
}
.rt-modal__title {
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
}
.rt-modal__body {
  padding: var(--wp--preset--spacing--40);
  line-height: 1.6;
}
.rt-modal__footer {
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  border-top: 1px solid var(--wp--preset--color--outline);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.rt-modal__close {
  position: absolute;
  top: var(--wp--preset--spacing--30);
  right: var(--wp--preset--spacing--30);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.2s ease;
  color: var(--wp--preset--color--body);
}
.rt-modal__close:hover {
  transform: rotate(90deg);
}
.rt-modal.is-scrollable {
  overflow-y: hidden;
}
.rt-modal.is-scrollable .rt-modal__inner {
  display: flex;
  flex-direction: column;
  max-height: 80dvh;
}
.rt-modal.is-scrollable .rt-modal__body {
  overflow-y: auto;
  flex: 1;
}

body.is-modal-active {
  overflow: hidden;
}