/* Enerwave theme for customer-facing SweetAlert2 dialogs.
   MFA/OTP dialogs and toast notifications intentionally retain their own UI. */

:root {
  --enerwave-alert-navy: #080052;
  --enerwave-alert-blue: #0032a0;
  --enerwave-alert-green: #15cf8c;
  --enerwave-alert-purple: #bd66f3;
  --enerwave-alert-purple-dark: #ad45ef;
  --enerwave-alert-cream: #f7f3e5;
  --enerwave-alert-error: #ef6672;
  --enerwave-alert-warning: #bd66f3;
}

.swal2-container:has(> .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast)).swal2-backdrop-show,
.swal2-container:has(> .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast)).swal2-backdrop-hide {
  background: rgba(8, 0, 82, 0.56) !important;
}

.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) {
  width: min(92vw, 30rem) !important;
  padding: 2rem 2.25rem 1.75rem !important;
  border: 1px solid rgba(8, 0, 82, 0.08) !important;
  border-radius: 24px !important;
  background: var(--enerwave-alert-cream) !important;
  box-shadow: 0 24px 64px rgba(8, 0, 82, 0.28) !important;
  color: var(--enerwave-alert-navy) !important;
  font-family: "Futura-Bk", sans-serif !important;
}

.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-title {
  padding: 0 !important;
  margin: 0 0 0.75rem !important;
  color: var(--enerwave-alert-navy) !important;
  font-family: "Futura-Bk", sans-serif !important;
  font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-html-container {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--enerwave-alert-navy) !important;
  font-family: "Futura-Bk", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-icon {
  width: 4.25rem !important;
  height: 4.25rem !important;
  margin: 0 auto 1.25rem !important;
  font-size: 0.85rem !important;
}

.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-icon.swal2-error {
  border-color: var(--enerwave-alert-error) !important;
  color: var(--enerwave-alert-error) !important;
}

.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
  background-color: var(--enerwave-alert-error) !important;
}

.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-icon.swal2-success {
  border-color: var(--enerwave-alert-green) !important;
  color: var(--enerwave-alert-green) !important;
}

.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(21, 207, 140, 0.38) !important;
}

.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-icon.swal2-success [class^="swal2-success-line"] {
  background-color: var(--enerwave-alert-green) !important;
}

.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-icon.swal2-warning,
.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-icon.swal2-question {
  border-color: var(--enerwave-alert-warning) !important;
  color: var(--enerwave-alert-warning) !important;
}

.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-icon.swal2-info {
  border-color: var(--enerwave-alert-blue) !important;
  color: var(--enerwave-alert-blue) !important;
}

.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-actions {
  width: 100% !important;
  margin: 1.75rem auto 0 !important;
  gap: 0.75rem !important;
}

.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-styled {
  min-width: 8.75rem !important;
  min-height: 2.75rem !important;
  margin: 0 !important;
  padding: 0.7rem 1.5rem !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-family: "Futura-Bk", sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-confirm {
  border-color: var(--enerwave-alert-purple-dark) !important;
  background: linear-gradient(90deg, var(--enerwave-alert-purple-dark), var(--enerwave-alert-purple)) !important;
  color: var(--enerwave-alert-navy) !important;
}

.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-cancel {
  border-color: rgba(8, 0, 82, 0.28) !important;
  background: #ffffff !important;
  color: var(--enerwave-alert-navy) !important;
}

.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-deny {
  border-color: var(--enerwave-alert-navy) !important;
  background: var(--enerwave-alert-navy) !important;
  color: #ffffff !important;
}

.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-styled:hover {
  filter: brightness(0.95) !important;
  transform: translateY(-1px) !important;
}

.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-styled:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(21, 207, 140, 0.3) !important;
}

.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-close {
  color: var(--enerwave-alert-navy) !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
}

.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-close:hover {
  background: rgba(8, 0, 82, 0.07) !important;
  color: var(--enerwave-alert-purple-dark) !important;
}

.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-input,
.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-textarea,
.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-select {
  border: 1px solid rgba(0, 50, 160, 0.35) !important;
  border-radius: 12px !important;
  color: var(--enerwave-alert-navy) !important;
  font-family: "Futura-Bk", sans-serif !important;
}

.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-input:focus,
.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-textarea:focus,
.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-select:focus {
  border-color: var(--enerwave-alert-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 50, 160, 0.12) !important;
}

.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-validation-message {
  margin: 1rem 0 0 !important;
  border-radius: 10px !important;
  background: rgba(239, 102, 114, 0.12) !important;
  color: var(--enerwave-alert-navy) !important;
  font-family: "Futura-Bk", sans-serif !important;
}

.swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-loader {
  border-color: var(--enerwave-alert-green) transparent var(--enerwave-alert-green) transparent !important;
}

@media only screen and (max-width: 600px) {
  .swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) {
    width: calc(100vw - 2rem) !important;
    padding: 1.5rem 1.25rem 1.25rem !important;
    border-radius: 20px !important;
  }

  .swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-title {
    font-size: 1.25rem !important;
  }

  .swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-html-container {
    font-size: 0.9375rem !important;
  }

  .swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-icon {
    width: 3.75rem !important;
    height: 3.75rem !important;
    margin-bottom: 1rem !important;
  }

  .swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-actions {
    flex-direction: column !important;
    margin-top: 1.5rem !important;
  }

  .swal2-container .swal2-popup:not(.mfa-popup-transparent):not(.swal2-toast) .swal2-styled {
    width: 100% !important;
  }
}