/* modal-dialog.css: ported 1:1 from foodforjoe.es CSS modules (hash suffixes removed). */

/* ── ModalDialog ── */
.ModalDialog_card {
  border:none;
  padding:22px 25px;
  --modal-surface:var(--color-light-beige);
  background:var(--modal-surface);
  color:var(--color-green);
  border-radius:var(--border-radius-modal);
  max-width:calc(100dvw - 20px);
  max-height:calc(100dvh - 20px);
  overflow-y:auto;
  overflow-x:hidden;
  opacity:0;
  transition:opacity .3s ease-in-out,overlay allow-discrete .3s ease-in-out,display allow-discrete .3s ease-in-out;
}

.ModalDialog_card[open] {
  opacity:1;
}

@starting-style {
  .ModalDialog_card[open] {
    opacity:0;
  }
}

.ModalDialog_card::-webkit-backdrop {
  background:rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  opacity:0;
  -webkit-transition:opacity .3s ease-in-out,overlay allow-discrete .3s ease-in-out,display allow-discrete .3s ease-in-out;
  transition:opacity .3s ease-in-out,overlay allow-discrete .3s ease-in-out,display allow-discrete .3s ease-in-out;
}

.ModalDialog_card::backdrop {
  background:rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  opacity:0;
  transition:opacity .3s ease-in-out,overlay allow-discrete .3s ease-in-out,display allow-discrete .3s ease-in-out;
}

.ModalDialog_card[open]::-webkit-backdrop {
  opacity:1;
}

.ModalDialog_card[open]::backdrop {
  opacity:1;
}

@starting-style {
  .ModalDialog_card[open]::-webkit-backdrop {
    opacity:0;
  }
}

@starting-style {
  .ModalDialog_card[open]::backdrop {
    opacity:0;
  }
}

.ModalDialog_cardContent {
  width:100%;
}

.ModalDialog_closeButton {
  z-index:1;
  position:absolute;
  right:0;
  top:0;
  border:none;
  cursor:pointer;
  background:transparent;
  padding:calc(var(--border-radius-modal) - 8px);
  margin:0;
}

.ModalDialog_closeButtonLeft {
  right:auto;
  left:0;
}

.ModalDialog_closeButton:focus {
  outline:none;
}

.ModalDialog_closeButton img {
  display:block;
  width:23px;
  height:23px;
}

.ModalDialog_cardLight .ModalDialog_closeButton {
  filter:invert(100%) saturate(100%) grayscale(100%);
}

@media (min-width:960px) {
  .ModalDialog_card {
    padding:50px 60px;
  }
}