/* Staffan Theme Override for Postal */

html.subPage, body {
  background: #080A0F !important;
  min-height: 100vh !important;
  margin: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

html.subPage body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(26,106,255,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 30%, rgba(124,58,237,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(6,182,212,0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Logo floating above the card on the page background */
html.subPage body::after {
  content: '' !important;
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  background: url(/staffan-assets/logo-icon.png) center/contain no-repeat !important;
  mix-blend-mode: lighten !important;
  position: absolute !important;
  top: calc(50% - 250px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 2 !important;
}

.subPageBox {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 24px !important;
  box-shadow: 0 32px 64px rgba(0,0,0,0.50) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  max-width: 420px !important;
  width: 90% !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  padding: 0 !important;
  overflow: hidden !important;
  z-index: 1 !important;
  margin: 0 !important;
}

.subPageBox__title {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  padding: 32px 32px 24px !important;
  text-align: center !important;
  font-size: 0 !important;
  color: transparent !important;
}

/* No logo inside card anymore */
.subPageBox__title::before {
  content: 'staffan' !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  display: block !important;
  background: linear-gradient(135deg, #1A6AFF 0%, #9D6BFF 50%, #22D3EE 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 4px !important;
}

.subPageBox__title::after {
  content: 'Mail Server' !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #7A8BA0 !important;
  display: block !important;
  letter-spacing: 0.02em !important;
  -webkit-text-fill-color: #7A8BA0 !important;
}

.subPageBox__content {
  padding: 32px !important;
  background: transparent !important;
}

.input--onWhite,
.input.input--text.input--onWhite {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 12px !important;
  color: #E8EDF4 !important;
  font-size: 15px !important;
  padding: 14px 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
  outline: none !important;
}

.input--onWhite::placeholder {
  color: #566078 !important;
}

.input--onWhite:focus {
  border-color: rgba(26,106,255,0.50) !important;
  box-shadow: 0 0 0 3px rgba(26,106,255,0.15) !important;
}

.loginForm__input {
  margin-bottom: 16px !important;
}

.button--positive,
input.button.button--positive {
  background: linear-gradient(135deg, #1A6AFF 0%, #7C3AED 55%, #06B6D4 100%) !important;
  background-size: 200% 200% !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 14px 28px !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: opacity 200ms ease, transform 200ms ease !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 4px 16px rgba(26,106,255,0.30) !important;
}

.button--positive:hover {
  opacity: 0.9 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(26,106,255,0.40) !important;
}

.loginForm__links a {
  color: #3B8FFF !important;
  text-decoration: none !important;
  font-size: 13px !important;
}

.loginForm__links a:hover {
  color: #6AABFF !important;
}

.loginForm__submit {
  display: flex !important;
  flex-direction: column-reverse !important;
  gap: 16px !important;
  margin-top: 8px !important;
}

.loginForm__submit p {
  margin: 0 !important;
}

.loginForm__links {
  text-align: center !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}