/*
  Saver — Shared Component Styles
  Auth visuals, glass cards, floating animations, and auth responsive rules.
  Used by login, register, reset password, and marketing pages.
*/

.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(234, 230, 225, 0.5);
}

.soft-glow {
  box-shadow: 0 0 40px -10px rgba(27, 67, 50, 0.1);
}

.savings-ring {
  background: conic-gradient(#1b4332 75%, #eae6e1 0);
  mask: radial-gradient(transparent 62%, white 63%);
  -webkit-mask: radial-gradient(transparent 62%, white 63%);
}

.floating-card {
  animation: card-float 7s ease-in-out infinite;
  will-change: transform;
}

.floating-card-delay {
  animation-delay: -3.5s;
}

.animated-ring {
  animation: ring-pulse 6s ease-in-out infinite;
  will-change: transform;
}

.animated-orb {
  animation: orb-drift 14s ease-in-out infinite alternate;
  will-change: transform;
}

.animated-orb-delay {
  animation-delay: -6s;
}

.auth-password-wrap {
  position: relative;
}

.auth-password-input {
  padding-right: 3.25rem !important;
}

.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--color-on-surface-variant);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.auth-password-toggle:hover,
.auth-password-toggle:focus-visible {
  background: var(--color-surface-container);
  color: var(--color-primary-container);
  outline: none;
}

.auth-password-toggle .material-symbols-outlined {
  font-size: 1.25rem;
  line-height: 1;
}

.auth-link-button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

@keyframes card-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -12px, 0);
  }
}

@keyframes ring-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

@keyframes orb-drift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(28px, -22px, 0);
  }
}

/* ========================
   Auth responsive
   ======================== */

@media (max-width: 767px) {
  html:has(body[data-ui="auth"]) {
    height: 100%;
    overflow: hidden;
  }

  body[data-ui="auth"] {
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  body[data-ui="auth"] main {
    height: 100dvh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .auth-panel {
    min-height: 100dvh !important;
    height: 100dvh;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(14px, 2.8dvh, 24px) 24px !important;
    overflow: hidden !important;
  }

  .auth-form-content {
    display: flex;
    width: min(100%, 360px) !important;
    max-height: calc(100dvh - 28px);
    flex-direction: column;
    justify-content: center;
    gap: clamp(10px, 1.55dvh, 16px) !important;
  }

  .auth-form-content-register {
    gap: clamp(8px, 1.25dvh, 14px) !important;
  }

  .auth-brand-row {
    margin-bottom: 0 !important;
  }

  .auth-brand-row a {
    font-size: clamp(23px, 6vw, 28px);
    line-height: 1;
  }

  .auth-intro {
    gap: clamp(6px, 1dvh, 10px) !important;
  }

  .auth-eyebrow {
    padding: 0.35rem 0.8rem !important;
    font-size: 10px !important;
  }

  .auth-title {
    font-size: clamp(24px, 7.2vw, 30px) !important;
    line-height: 1.08 !important;
  }

  .auth-subcopy {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .auth-form {
    gap: clamp(8px, 1.25dvh, 12px) !important;
  }

  .auth-form-register {
    gap: clamp(7px, 1dvh, 10px) !important;
  }

  .auth-field {
    gap: 4px !important;
  }

  .auth-field label,
  .auth-login-options,
  .auth-switch-copy {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .auth-input {
    min-height: 43px;
    padding: 0.68rem 1rem !important;
    font-size: 14px !important;
    border-radius: 14px !important;
  }

  .auth-password-input {
    padding-right: 3rem !important;
  }

  .auth-password-toggle {
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
  }

  .auth-error {
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    margin-top: 1px !important;
  }

  .auth-status {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .auth-primary-action,
  .auth-google-button {
    min-height: 42px;
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
    font-size: 14px !important;
  }

  .auth-divider {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .auth-divider span {
    margin-left: 0.8rem !important;
    margin-right: 0.8rem !important;
  }

  .auth-login-options input,
  .auth-terms-field input {
    width: 18px !important;
    height: 18px !important;
  }

  .auth-terms-field span {
    font-size: 11.5px !important;
    line-height: 1.3 !important;
  }
}

@media (max-width: 380px), (max-height: 740px) {
  .auth-panel {
    padding: 12px 20px !important;
  }

  .auth-form-content {
    width: min(100%, 336px) !important;
    max-height: calc(100dvh - 24px);
    gap: 9px !important;
  }

  .auth-form-content-register {
    gap: 7px !important;
  }

  .auth-eyebrow,
  .auth-subcopy {
    display: none !important;
  }

  .auth-title {
    font-size: 23px !important;
  }

  .auth-form {
    gap: 7px !important;
  }

  .auth-input {
    min-height: 39px;
    padding-top: 0.56rem !important;
    padding-bottom: 0.56rem !important;
  }

  .auth-primary-action,
  .auth-google-button {
    min-height: 39px;
    padding-top: 0.52rem !important;
    padding-bottom: 0.52rem !important;
  }

  .auth-login-options {
    padding-top: 0 !important;
  }

  .auth-form-content-register .auth-divider,
  .auth-form-content-register .auth-switch-copy {
    display: none !important;
  }
}

@media (max-width: 380px) and (max-height: 780px) {
  .auth-form-content-register .auth-switch-copy {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .auth-form-content-register .auth-switch-copy {
    display: none !important;
  }
}

/* ========================
   Number flip animation
   Shared by onboarding preview and dashboard metrics.
   ======================== */

@keyframes number-pop {
  0% {
    transform: translateY(6px) scale(0.95);
    opacity: 0.4;
  }
  60% {
    transform: translateY(-2px) scale(1.02);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.number-updated {
  animation: number-pop 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}