/* ==========================================================================
   WooPlainly – WooCommerce – Account Auth
   ========================================================================= */

.wooplainly-auth {
  --auth-bg: var(--wooplainly-color-surface) !important;
  --auth-surface: var(--wooplainly-color-surface-alt) !important;
  --auth-surface-contrast: var(--wooplainly-color-surface-contrast) !important;
  --auth-text: var(--wooplainly-color-text) !important;
  --auth-muted: var(--wooplainly-color-text-muted) !important;
  --auth-primary: var(--wooplainly-color-primary) !important;
  --auth-primary-strong: var(--wooplainly-color-primary-strong) !important;
  --auth-radius-lg: var(--wooplainly-radius-lg) !important;
  --auth-radius-md: var(--wooplainly-radius-md) !important;
  --auth-shadow: var(--wooplainly-shadow-lg) !important;

  min-height: min(100vh, 960px) !important;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3.5rem) !important;
  background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--auth-primary) 12%, transparent) 0%,
      transparent 28%
    ),
    var(--auth-bg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

[data-theme="dark"] .wooplainly-auth {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--auth-primary-strong) 16%, transparent) 0%,
      transparent 36%
    ),
    var(--auth-bg) !important;
}

.wooplainly-auth__inner {
  width: min(1120px, 100%) !important;
  display: grid !important;
  grid-template-columns: clamp(18rem, 28vw, 24rem) minmax(0, 1fr) !important;
  gap: clamp(2rem, 4vw, 3.5rem) !important;
  align-items: stretch !important;
}

@media (max-width: 72rem) {
  .wooplainly-auth__inner {
    grid-template-columns: 1fr !important;
  }
}

.wooplainly-auth__intro {
  background: var(--auth-surface) !important;
  border: 1px solid color-mix(in srgb, var(--auth-surface-contrast) 60%, transparent) !important;
  border-radius: var(--auth-radius-lg) !important;
  padding: clamp(1.75rem, 3vw, 2.5rem) !important;
  box-shadow: var(--auth-shadow) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
  color: var(--auth-text) !important;
}

[data-theme="dark"] .wooplainly-auth__intro {
  background: color-mix(in srgb, var(--auth-surface) 82%, transparent) !important;
  border-color: color-mix(in srgb, var(--auth-surface-contrast) 28%, transparent) !important;
  box-shadow: none !important;
}

.wooplainly-auth__badge {
  width: 3rem !important;
  height: 3rem !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  font-size: 1.5rem !important;
  background: color-mix(in srgb, var(--auth-primary) 12%, transparent) !important;
}

.wooplainly-auth__title {
  margin: 0 !important;
  font-size: clamp(2rem, 4vw, 2.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

.wooplainly-auth__subtitle {
  margin: 0 !important;
  font-size: 1.05rem !important;
  color: var(--auth-muted) !important;
}

.wooplainly-auth__benefits {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 0.75rem !important;
  font-size: 0.98rem !important;
  color: color-mix(in srgb, var(--auth-text) 75%, var(--auth-muted) 25%) !important;
}

.wooplainly-auth__benefits li::before {
  content: "•" !important;
  color: var(--auth-primary) !important;
  margin-right: 0.5rem !important;
  font-weight: 700 !important;
}

.wooplainly-auth__panel {
  background: var(--auth-surface) !important;
  border: 1px solid color-mix(in srgb, var(--auth-surface-contrast) 60%, transparent) !important;
  border-radius: var(--auth-radius-lg) !important;
  padding: clamp(2rem, 4vw, 2.75rem) !important;
  box-shadow: var(--auth-shadow) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.75rem !important;
  color: var(--auth-text) !important;
}

[data-theme="dark"] .wooplainly-auth__panel {
  background: color-mix(in srgb, var(--auth-surface) 82%, transparent) !important;
  border-color: color-mix(in srgb, var(--auth-surface-contrast) 28%, transparent) !important;
  box-shadow: none !important;
}

.wooplainly-auth__tabs {
  display: inline-flex !important;
  background: color-mix(in srgb, var(--auth-surface-contrast) 12%, transparent) !important;
  border-radius: 999px !important;
  padding: 0.25rem !important;
  gap: 0.25rem !important;
  width: fit-content !important;
}

.wooplainly-auth__tab {
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0.65rem 1.65rem !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--auth-text) 80%, var(--auth-muted) 20%) !important;
  cursor: pointer !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}

.wooplainly-auth__tab:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--auth-primary) 12%, transparent) !important;
  color: var(--auth-primary) !important;
}

.wooplainly-auth__tab.is-active {
  background: var(--auth-primary) !important;
  color: var(--wooplainly-color-on-primary, #fff) !important;
  transform: translateY(-2px) !important;
}

.wooplainly-auth__notices :where(.woocommerce-error, .woocommerce-info, .woocommerce-message) {
  border-radius: var(--auth-radius-md) !important;
  padding: 0.85rem 1.1rem !important;
  font-size: 0.95rem !important;
}

.wooplainly-auth__forms {
  display: grid !important;
  gap: 0 !important;
}

.wooplainly-auth__form {
  display: grid !important;
  gap: 1.1rem !important;
}

.wooplainly-auth__form[hidden] {
  display: none !important;
}

.wooplainly-auth__grid {
  display: grid !important;
  gap: 1rem !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 48rem) {
  .wooplainly-auth__grid {
    grid-template-columns: 1fr !important;
  }
}

.wooplainly-auth__field {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
}

.wooplainly-auth__label {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: color-mix(in srgb, var(--auth-text) 85%, var(--auth-muted) 15%) !important;
}

.wooplainly-auth__field input[type="text"],
.wooplainly-auth__field input[type="email"],
.wooplainly-auth__field input[type="password"] {
  border-radius: var(--auth-radius-md) !important;
  border: 1.5px solid color-mix(in srgb, var(--auth-surface-contrast) 65%, transparent) !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  background: #fff !important;
  color: var(--auth-text) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

[data-theme="dark"] .wooplainly-auth__field input[type="text"],
[data-theme="dark"] .wooplainly-auth__field input[type="email"],
[data-theme="dark"] .wooplainly-auth__field input[type="password"] {
  background: color-mix(in srgb, var(--auth-surface) 82%, transparent) !important;
}

.wooplainly-auth__field input:focus-visible {
  border-color: var(--auth-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-primary) 25%, transparent) !important;
  outline: none !important;
}

.wooplainly-auth__checkbox {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  font-size: 0.92rem !important;
  color: var(--auth-muted) !important;
}

.wooplainly-auth__checkbox input {
  width: 1.1rem !important;
  height: 1.1rem !important;
  border-radius: 0.35rem !important;
}

.wooplainly-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--auth-radius-md) !important;
  border: 0 !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  padding: 0.85rem 1.5rem !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
  box-shadow: none !important;
}

.wooplainly-button--primary {
  background: var(--auth-primary) !important;
  color: var(--wooplainly-color-on-primary, #fff) !important;
}

.wooplainly-button--primary:is(:hover, :focus-visible) {
  background: var(--auth-primary-strong) !important;
  transform: translateY(-1px) !important;
}

.wooplainly-auth__hint {
  margin: 0 !important;
  font-size: 0.92rem !important;
}

.wooplainly-auth__hint a {
  color: var(--auth-primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.wooplainly-auth__hint a:is(:hover, :focus-visible) {
  text-decoration: underline !important;
}

.wooplainly-auth__legal {
  margin: 0 !important;
  font-size: 0.85rem !important;
  color: var(--auth-muted) !important;
}

.wooplainly-auth__legal a {
  color: inherit !important;
  text-decoration: underline !important;
}

.wooplainly-auth__legal a:is(:hover, :focus-visible) {
  color: var(--auth-primary) !important;
}

[data-theme="dark"] .wooplainly-auth__hint a {
  color: var(--auth-primary) !important;
}

[data-theme="dark"] .wooplainly-auth__label {
  color: color-mix(in srgb, var(--auth-text) 90%, var(--auth-muted) 10%) !important;
}

[data-theme="dark"] .wooplainly-auth__checkbox {
  color: color-mix(in srgb, var(--auth-muted) 90%, var(--auth-text) 10%) !important;
}

.wooplainly-auth__form[data-auth-panel="register"] .wooplainly-button {
  margin-top: 0.25rem !important;
}