/* ==========================================================
   ATOMMEDIA GLOBAL APPLICATION DIALOG V1
   Shared confirm and alert modal for the complete application.
   ========================================================== */

body.app-dialog-open {
  overflow: hidden;
}

.app-dialog-backdrop {
  position: fixed;
  z-index: 9000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(1, 7, 15, .80);
  backdrop-filter: blur(8px);
}

.app-dialog-backdrop[aria-hidden="true"] {
  display: none;
}

.app-dialog-card {
  width: min(
    620px,
    calc(100vw - 44px)
  );
  overflow: hidden;
  border: 1px solid #3b628c;
  border-radius: 15px;
  color: #eaf4ff;
  background:
    linear-gradient(
      145deg,
      #102b47,
      #081a2e
    );
  box-shadow:
    0 30px 110px
    rgba(0, 0, 0, .68);
  transform:
    translateY(0)
    scale(1);
  animation:
    app-dialog-enter
    .16s ease-out;
}

@keyframes app-dialog-enter {
  from {
    opacity: 0;
    transform:
      translateY(8px)
      scale(.985);
  }

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

.app-dialog-header {
  min-height: 75px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  border-bottom: 1px solid #294967;
}

.app-dialog-heading {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.app-dialog-title {
  margin: 0;
  color: #f0f6ff;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
}

.app-dialog-kicker {
  margin: 0;
  color: #829bb5;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.app-dialog-close {
  flex: 0 0 auto;
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border: 1px solid #3b5876;
  border-radius: 9px;
  color: #c5d3e2;
  background: #142b44;
  cursor: pointer;
  font: inherit;
  font-size: 22px;
  line-height: 1;
}

.app-dialog-close:hover {
  border-color: #5188bf;
  color: #fff;
  background: #1a3857;
}

.app-dialog-body {
  display: grid;
  gap: 13px;
  padding: 22px 20px;
}

.app-dialog-message {
  margin: 0;
  color: #edf4ff;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 700;
  white-space: pre-line;
}

.app-dialog-note {
  margin: 0;
  padding: 12px 13px;
  border: 1px solid #304d6b;
  border-radius: 9px;
  color: #aebfd2;
  background:
    rgba(20, 51, 80, .45);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-line;
}

.app-dialog-footer {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 11px 18px;
  border-top: 1px solid #294967;
}

.app-dialog-button {
  min-width: 120px;
  min-height: 40px;
  border-radius: 9px;
  padding: 0 16px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.app-dialog-cancel {
  border: 1px solid #3b5876;
  color: #c8d7e7;
  background: #142b44;
}

.app-dialog-cancel:hover {
  border-color: #5383b1;
  color: #fff;
  background: #193653;
}

.app-dialog-confirm {
  border: 1px solid #438fe2;
  color: #fff;
  background:
    linear-gradient(
      180deg,
      #338ae9,
      #2674cb
    );
  box-shadow:
    0 8px 25px
    rgba(39, 121, 214, .23);
}

.app-dialog-confirm:hover {
  border-color: #63a8f4;
  background:
    linear-gradient(
      180deg,
      #4098f5,
      #2d80dc
    );
}

.app-dialog-card.is-danger {
  border-color: #754955;
}

.app-dialog-card.is-danger
.app-dialog-kicker {
  color: #dc93a0;
}

.app-dialog-card.is-danger
.app-dialog-confirm {
  border-color: #b85263;
  background:
    linear-gradient(
      180deg,
      #a84455,
      #7d3040
    );
  box-shadow:
    0 8px 25px
    rgba(151, 49, 67, .24);
}

.app-dialog-card.is-danger
.app-dialog-confirm:hover {
  border-color: #dc7181;
  background:
    linear-gradient(
      180deg,
      #ba5163,
      #91394a
    );
}

.app-dialog-card.is-success {
  border-color: #34795f;
}

.app-dialog-card.is-success
.app-dialog-kicker {
  color: #78d6ad;
}

@media (max-width: 620px) {
  .app-dialog-backdrop {
    padding: 10px;
  }

  .app-dialog-card {
    width: calc(100vw - 20px);
  }

  .app-dialog-footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .app-dialog-button {
    width: 100%;
  }
}