/* Full-viewport account deletion takeover. Not a native dialog. */

html.account-deletion-scroll-lock,
body.account-deletion-scroll-lock {
  overflow: hidden !important;
}

body.account-deletion-scroll-lock .shell {
  pointer-events: none;
}

#accountDeletionOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 24px 16px;
  border: 0;
  background: rgba(244, 247, 255, .97);
  color: #17233a;
  pointer-events: auto;
}

#accountDeletionOverlay[hidden],
#accountDeletionOverlayActions[hidden],
#accountDeletionOverlayRetry[hidden],
#accountDeletionOverlayFarewell[hidden],
#accountDeletionOverlayKeepOpen[hidden] {
  display: none !important;
}

.account-deletion-progress {
  width: min(520px, 100%);
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.account-deletion-mark {
  position: relative;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}

.account-deletion-shield {
  width: 54px;
  height: 64px;
  clip-path: polygon(50% 0, 94% 16%, 88% 67%, 50% 100%, 12% 67%, 6% 16%);
  background: linear-gradient(160deg, #7ae7ff, #3b65e0 70%);
  box-shadow: 0 10px 24px rgba(59, 101, 224, .28);
  animation: accountDeletionPulse 1.8s ease-in-out infinite;
}

.account-deletion-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(59, 101, 224, .18);
  border-top-color: #3b65e0;
  animation: accountDeletionSpin 1s linear infinite;
}

.account-deletion-dots {
  display: flex;
  gap: 6px;
  height: 10px;
}

.account-deletion-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3b65e0;
  animation: accountDeletionDot 1.2s infinite ease-in-out;
}

.account-deletion-dots i:nth-child(2) { animation-delay: .15s; }
.account-deletion-dots i:nth-child(3) { animation-delay: .3s; }

#accountDeletionOverlayTitle {
  margin: 0;
  font: 800 clamp(26px, 4vw, 34px)/1.15 Manrope, sans-serif;
  letter-spacing: -.03em;
}

#accountDeletionProgressText,
#accountDeletionOverlayKeepOpen,
#accountDeletionOverlayFarewell {
  margin: 0;
  max-width: 42ch;
  font: 500 16px/1.5 "DM Sans", sans-serif;
}

#accountDeletionOverlayKeepOpen {
  color: #5c6b86;
}

#accountDeletionOverlayFarewell {
  font-weight: 700;
}

#accountDeletionOverlayActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

#accountDeletionOverlayActions button {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid #c5d0e6;
  background: #fff;
  color: #17233a;
  font: 800 14px/1.2 "DM Sans", sans-serif;
  cursor: pointer;
}

#accountDeletionOverlayRetry {
  border-color: #3b65e0;
  background: #3b65e0;
  color: #fff;
}

#accountDeletionOverlay[data-phase="completed"] .account-deletion-shield,
#accountDeletionOverlay[data-phase="completed"] .account-deletion-ring,
#accountDeletionOverlay[data-phase="blocked"] .account-deletion-ring,
#accountDeletionOverlay[data-phase="error"] .account-deletion-ring,
#accountDeletionOverlay[data-phase="completed"] .account-deletion-dots,
#accountDeletionOverlay[data-phase="blocked"] .account-deletion-dots,
#accountDeletionOverlay[data-phase="error"] .account-deletion-dots {
  animation: none;
}

#accountDeletionOverlay[data-phase="completed"] .account-deletion-ring,
#accountDeletionOverlay[data-phase="blocked"] .account-deletion-ring,
#accountDeletionOverlay[data-phase="error"] .account-deletion-ring,
#accountDeletionOverlay[data-phase="completed"] .account-deletion-dots,
#accountDeletionOverlay[data-phase="blocked"] .account-deletion-dots,
#accountDeletionOverlay[data-phase="error"] .account-deletion-dots {
  display: none;
}

#accountDeletionOverlay[data-phase="completed"] .account-deletion-shield {
  background: linear-gradient(160deg, #7dcea0, #116548);
}

body[data-theme="midnight"] #accountDeletionOverlay,
body[data-theme="sunset"] #accountDeletionOverlay {
  background: rgba(10, 14, 32, .96);
  color: #f3f6ff;
}

body[data-theme="midnight"] #accountDeletionOverlayKeepOpen,
body[data-theme="sunset"] #accountDeletionOverlayKeepOpen {
  color: rgba(243, 246, 255, .78);
}

body[data-theme="midnight"] #accountDeletionOverlayActions button,
body[data-theme="sunset"] #accountDeletionOverlayActions button {
  background: #182242;
  border-color: rgba(243, 246, 255, .24);
  color: #f3f6ff;
}

body[data-theme="midnight"] #accountDeletionOverlayRetry,
body[data-theme="sunset"] #accountDeletionOverlayRetry {
  background: #6f8bff;
  border-color: #6f8bff;
  color: #10162a;
}

body[data-theme="cloud"] #accountDeletionOverlay {
  background: rgba(244, 247, 255, .97);
  color: #17233a;
}

@keyframes accountDeletionPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: .84; }
}

@keyframes accountDeletionSpin {
  to { transform: rotate(360deg); }
}

@keyframes accountDeletionDot {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

@media (max-width: 720px) {
  #accountDeletionOverlay {
    padding: 20px 16px;
    align-items: center;
  }

  .account-deletion-progress {
    gap: 10px;
  }
}