/* =========================
   MODAL
========================= */

.modal {
  position: fixed;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;

  pointer-events: none;

  z-index: var(--z-modal, 1000);

  transition: opacity 0.25s ease;
}


/* =========================
   ACTIVE STATE
========================= */

.modal.active {
  opacity: 1;

  pointer-events: all;
}


/* =========================
   OVERLAY
========================= */

.modal__overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.45);

  backdrop-filter: blur(2px);
}


/* =========================
   CONTENT
========================= */

.modal__content {
  position: relative;
  z-index: 2;

  width: 90%;
  max-width: 720px;
  max-height: 80vh;

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
  -ms-overflow-style: none;

  padding: 24px;

  display: flex;
  flex-direction: column;

  background: #fff;

  border-radius: 14px;

  box-shadow: 0 20px 60px rgba(0,0,0,0.15);

  opacity: 0;

  transform: translateY(10px);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.modal__content::-webkit-scrollbar {
  display: none;
}

.modal.active .modal__content {
  opacity: 1;

  transform: translateY(0);
}


/* =========================
   CLOSE BUTTON
========================= */

.modal__close {

  position: absolute;

  top: 10px;
  right: 10px;

  width: 46px;
  height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: none;

  background: transparent;

  cursor: pointer;

  font-size: 24px;
  line-height: 1;

  color: rgba(0,0,0,0.55);

  opacity: 1;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.modal__close:hover {

  opacity: 0.8;

  transform: scale(1.05);
}


/* =========================
   TITLE
========================= */

.modal__title {
  flex-shrink: 0;

  margin-bottom: 12px;

  font-size: 16px;
  font-weight: 600;
}


/* =========================
   BODY
========================= */

.modal__body {
  width: 100%;

  overflow-y: auto;

  padding-right: 4px;

  font-size: 14px;

  line-height: 1.6;

  color: #444;
}


/* =========================
   MODIFIERS
========================= */

.modal--size-chart {
  z-index: var(--z-modal, 1000);
}


/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

  .modal__content {
    width: min(94vw, 560px);

    padding: 22px 16px;
  }

}

/* =========================
   ANIMATION
========================= */

@keyframes modalFade {

  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

}