/* Modal and auth bottom-sheet overrides split from styles.css. */
/* First-login/auth modal should behave like a bottom sheet on phones. */
.modal-backdrop[data-modal-backdrop] {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 12px calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  background: linear-gradient(
    180deg,
    rgba(247, 248, 250, 0.08) 0%,
    rgba(247, 248, 250, 0.18) 45%,
    rgba(247, 248, 250, 0.72) 100%
  ) !important;
  pointer-events: none !important;
}

.modal-backdrop[data-modal-backdrop].modal-backdrop--first-launch {
  background: transparent !important;
  backdrop-filter: none !important;
}

.confirm-modal-backdrop {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 12px calc(84px + env(safe-area-inset-bottom, 0px)) !important;
}

.confirm-modal-backdrop[hidden] {
  display: none !important;
}

.confirm-modal {
  width: min(100%, 430px) !important;
  border-radius: 22px 22px 0 0 !important;
}

.confirm-modal-desc {
  margin: 0 0 16px !important;
  color: #4b5563 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.55 !important;
}

.confirm-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.confirm-modal .modal-submit.danger {
  border-color: #fecaca !important;
  background: #fff1f2 !important;
  color: #dc2626 !important;
}