/**
 * Email verification dialog – UI matching dialog-demo (gradient header, blur, OTP style).
 * Shared by deep-link-tester, share-analyzer, social-preview.
 */
@keyframes ev-shimmer {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
@keyframes ev-sparkle {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(10deg); }
}
@keyframes ev-fadeIn {
  from { opacity: 0; transform: scale(0.95) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes ev-scaleIn {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

/* Backdrop */
.ev-dialog-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 140;
  padding: 1rem;
}
.ev-dialog-backdrop.hidden {
  display: none;
}

.ev-dialog-container {
  width: 100%;
  max-width: 28rem;
  pointer-events: auto;
}
.ev-dialog-backdrop:not(.hidden) .ev-dialog-box {
  animation: ev-fadeIn 0.3s ease-out forwards;
}

.ev-dialog-box {
  background: var(--card-bg-primary, #fff);
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
[data-theme="dark"] .ev-dialog-box {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Header */
.ev-dialog-header {
  position: relative;
  background: var(--app-gradient, linear-gradient(to right, #9333ea, #2563eb));
  padding: 1rem 1.5rem;
}
.ev-dialog-shimmer {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background: radial-gradient(circle at 0% 0%, rgba(255,255,255,0.3) 0%, transparent 50%);
  background-size: 200% 200%;
  animation: ev-shimmer 4s linear infinite;
  pointer-events: none;
}
.ev-dialog-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ev-dialog-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ev-sparkle-icon {
  animation: ev-sparkle 2s ease-in-out infinite;
}
.ev-sparkle-svg {
  width: 1.25rem;
  height: 1.25rem;
  color: #fff;
}
.ev-dialog-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
}
.ev-dialog-close {
  padding: 0.25rem;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  border-radius: 0.5rem;
  transition: color 0.2s, background 0.2s;
}
.ev-dialog-close:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}
.ev-close-svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Content */
.ev-dialog-content {
  padding: 1.5rem;
}
.ev-dialog-desc {
  color: var(--text-secondary, #4b5563);
  font-size: 0.875rem;
  margin: 0 0 1rem;
}
.ev-dialog-desc-center {
  text-align: center;
  margin-bottom: 1.5rem;
}
.ev-email-display {
  font-weight: 600;
  color: var(--text-primary, #111);
}
[data-theme="dark"] .ev-email-display {
  color: var(--app-text-primary);
}

/* Why email (details/summary) */
.ev-why-email {
  margin: 0 0 1rem;
}
.ev-why-email summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: #9333ea;
  list-style: none;
}
.ev-why-email summary::-webkit-details-marker {
  display: none;
}
.ev-why-email summary::before {
  content: "+ ";
  font-weight: 600;
}
.ev-why-email[open] summary::before {
  content: "− ";
}
.ev-why-email p {
  margin: 0.5rem 0 0;
  color: var(--text-secondary, #6b7280);
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* Field wrap */
.ev-field-wrap {
  margin-bottom: 1rem;
}
.ev-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary, #374151);
  margin-bottom: 0.5rem;
}
.ev-input-wrap {
  position: relative;
}
.ev-input-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--text-secondary, #9ca3af);
  pointer-events: none;
}
.ev-input {
  width: 100%;
  height: 3rem;
  padding-left: 2.5rem;
  padding-right: 0.75rem;
  border: 1px solid var(--border-medium, #e5e7eb);
  border-radius: 0.5rem;
  font-size: 1rem;
  background: var(--input-bg, var(--card-bg-primary, #fff));
  color: var(--text-primary, #111);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ev-input:focus {
  outline: none;
  border-color: #9333ea;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.15);
}
.ev-input.input-error {
  border-color: #dc2626;
}
[data-theme="dark"] .ev-input {
  border-color: var(--border-medium);
}
[data-theme="dark"] .ev-input.input-error {
  border-color: #fca5a5;
}

/* Primary button (Send OTP / Verify) */
.ev-btn-primary {
  width: 100%;
  height: 3rem;
  margin-top: 0.25rem;
  padding: 0 1rem;
  border: none;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  background: var(--app-gradient, linear-gradient(to right, #9333ea, #2563eb));
  box-shadow: 0 10px 15px -3px rgba(147, 51, 234, 0.3);
  cursor: pointer;
  transition: opacity 0.2s, box-shadow 0.2s;
}
.ev-btn-primary:hover:not(:disabled) {
  box-shadow: 0 10px 25px -5px rgba(147, 51, 234, 0.4);
}
.ev-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Step 2: verify icon */
.ev-verify-icon-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}
.ev-verify-icon-circle {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: linear-gradient(to bottom right, #ede9fe, #dbeafe);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ev-scaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
[data-theme="dark"] .ev-verify-icon-circle {
  background: linear-gradient(to bottom right, #4c1d95, #1e3a8a);
}
.ev-verify-icon {
  width: 2rem;
  height: 2rem;
  color: #9333ea;
}
[data-theme="dark"] .ev-verify-icon {
  color: #c4b5fd;
}

/* OTP boxes – demo size and focus */
.ev-otp-boxes {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.ev-otp-digit {
  width: 3rem;
  height: 3.5rem;
  text-align: center;
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  border: 2px solid var(--border-medium, #e5e7eb);
  border-radius: 0.75rem;
  background: var(--input-bg, var(--card-bg-primary, #fff));
  color: var(--text-primary, #111);
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.ev-otp-digit:focus {
  outline: none;
  border-color: #9333ea;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}
[data-theme="dark"] .ev-otp-digit {
  border-color: var(--border-medium);
}

/* Hide number spinners */
.ev-otp-digit::-webkit-outer-spin-button,
.ev-otp-digit::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ev-otp-digit[type="number"] {
  -moz-appearance: textfield;
}

/* Error message (below OTP or email) */
.email-gate-error {
  font-size: 0.85rem;
  color: #dc2626;
  margin: 0.25rem 0 0;
}
.email-gate-error.hidden {
  display: none;
}
[data-theme="dark"] .email-gate-error:not(.hidden) {
  color: #fca5a5;
}

/* Change email / Resend */
.ev-link-secondary {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.5rem 0;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  color: var(--text-secondary, #4b5563);
  cursor: pointer;
  transition: color 0.2s;
}
.ev-link-secondary:hover {
  color: var(--text-primary, #111);
}
.ev-resend-wrap {
  margin-top: 1rem;
  text-align: center;
}
.ev-resend-link {
  border: none;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 500;
  color: #9333ea;
  cursor: pointer;
  transition: color 0.2s;
}
.ev-resend-link:hover {
  color: #7c3aed;
}
.ev-resend-link:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  color: var(--text-secondary, #6b7280);
}

/* Steps */
.ev-step {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ev-step.hidden {
  display: none !important;
}