/* Auth — login / register page */

.auth-page {
  min-height: calc(100vh - 4.75rem);
}

.auth-brand-panel {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(0, 114, 55, 0.92) 0%, rgba(0, 89, 43, 0.88) 55%, rgba(8, 38, 23, 0.94) 100%),
    var(
      --auth-brand-image,
      url("https://images.unsplash.com/photo-1596040033229-a9821ebd058d?auto=format&fit=crop&w=1400&q=80")
    )
      center / cover no-repeat;
}

.auth-brand-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 202, 0, 0.18), transparent 42%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.08), transparent 45%);
  pointer-events: none;
}

.auth-shell {
  width: min(100%, 480px);
}

.auth-tab {
  border: 0;
  background: transparent;
  transition:
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.auth-tab.is-active {
  color: var(--color-primary);
  box-shadow: inset 0 -2px 0 var(--color-primary);
}

.auth-password-toggle {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  display: inline-flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: 0.75rem;
  color: var(--color-text-muted);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.auth-password-toggle:hover {
  background: var(--color-background-soft);
  color: var(--color-primary);
}

.auth-password-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.auth-success {
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
  border-radius: 0.75rem;
  background: var(--color-primary-soft);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--color-primary-dark);
}

.auth-success:not([hidden]) {
  display: block;
}

body.is-account-auth .account-site-main,
body.is-account-auth #primary.site-main {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.is-account-auth .woocommerce-notices-wrapper,
body.is-account-auth .woocommerce-info,
body.is-account-auth .woocommerce-message,
body.is-account-auth .woocommerce-error {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

@media (prefers-reduced-motion: reduce) {
  .auth-password-toggle,
  .auth-tab {
    transition: none;
  }
}