/**
 * account-login.css — logowanie i rejestracja, odzyskiwanie hasła, nowe
 * hasło, potwierdzenie (woocommerce/myaccount/form-login.php,
 * form-lost-password.php, form-reset-password.php, lost-password-confirmation.php).
 *
 * Wymaga tokens.css, base.css, components/field.css (pola przez p.form-row,
 * checkbox „Zapamiętaj mnie" przez .input-checkbox). Prefiks .dc-account-login__.
 * Klasy WooCommerce (.woocommerce-form-login, .u-columns, .col-1/2, .lost_password)
 * zostają jako kotwice (reguła 26).
 *
 * BEZ MAKIETY — z systemu: dwie karty obok siebie (panel glass-soft r28,
 * cień stopnia 3), logowanie z przyciskiem rangi 1, rejestracja rangi 2
 * (drugorzędna: konto nie jest wymagane do zakupów), odzyskiwanie hasła
 * w jednej wąskiej karcie; potwierdzenie w tonie neutralnym jak
 * „Sprawdź skrzynkę" przy zwrocie (szara studzienka z kopertą).
 */

/* ==========================================================================
   1. UKŁAD KART
   ========================================================================== */

.dc-account-login {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-lg), 100%), 1fr));
  gap: var(--dc-space-20);
  align-items: start;
}

.dc-account-login--single {
  max-width: var(--dc-measure-md);
}

.dc-account-login__card {
  min-width: 0;
  width: auto;
  float: none;
  padding: var(--dc-space-28);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-28);
  background-color: var(--dc-surface-glass-soft);
  -webkit-backdrop-filter: var(--dc-blur-lg);
  backdrop-filter: var(--dc-blur-lg);
  box-shadow: var(--dc-shadow-xl), var(--dc-shadow-inset-top);
}

.dc-account-login__title {
  font-size: var(--dc-text-5xl);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-tight);
  letter-spacing: var(--dc-tracking-tight);
}

.dc-account-login__intro {
  margin-block: var(--dc-space-8) var(--dc-space-20);
  font-size: var(--dc-text-md);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-muted);
}

.dc-account-login__note {
  margin-block-end: var(--dc-space-16);
  padding: var(--dc-space-12) var(--dc-space-14);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-12);
  background-color: var(--dc-surface-sunken);
  font-size: var(--dc-text-base);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-secondary);
}

/* ==========================================================================
   2. POLA I PRZYCISKI
   ========================================================================== */

.dc-account-login__form .form-row {
  width: 100%;
  margin: 0 0 var(--dc-space-16);
  padding: 0;
  float: none;
}

.dc-account-login__remember .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: var(--dc-space-12);
  font-size: var(--dc-text-md);
  color: var(--dc-text-secondary);
  cursor: pointer;
}

.dc-account-login__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-12) var(--dc-space-16);
  margin-block-start: var(--dc-space-6);
}

/* Ranga 1 (logowanie, odnośnik do hasła, zapis hasła). */
.dc-account-login__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--dc-space-14) var(--dc-space-24);
  border: var(--dc-border) solid var(--dc-accent-a50);
  border-radius: var(--dc-radius-16);
  background-image: var(--dc-gradient-cta);
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-top);
  color: var(--dc-on-accent);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-none);
  text-decoration: none;
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    border-color var(--dc-duration-base) var(--dc-ease),
    color var(--dc-duration-base) var(--dc-ease),
    box-shadow var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

.dc-account-login__submit:hover {
  background-color: var(--dc-accent-a50);
  color: var(--dc-on-accent);
}

.dc-account-login__submit:active {
  transform: scale(0.97);
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-press);
}

.dc-account-login__submit:focus-visible {
  border-radius: var(--dc-radius-16);
}

/* Ranga 2 (rejestracja, powrót do logowania). */
.dc-account-login__submit--secondary {
  border-color: var(--dc-border-line);
  background-image: none;
  background-color: var(--dc-surface-glass);
  box-shadow: none;
  color: var(--dc-text);
  font-weight: var(--dc-weight-medium);
}

.dc-account-login__submit--secondary:hover {
  border-color: var(--dc-accent-a50);
  background-color: var(--dc-surface);
  color: var(--dc-text);
}

.dc-account-login__submit--secondary:active {
  box-shadow: var(--dc-shadow-inset-press);
}

.dc-account-login__lost {
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-medium);
  color: var(--dc-text-muted);
  text-decoration: underline;
  text-underline-offset: var(--dc-space-4);
  transition: color var(--dc-duration-base) var(--dc-ease);
}

.dc-account-login__lost:hover {
  color: var(--dc-accent-strong);
}

/* ==========================================================================
   3. POTWIERDZENIE — ton neutralny
   ========================================================================== */

.dc-account-login__sent {
  display: flex;
  align-items: flex-start;
  gap: var(--dc-space-14);
  margin-block-end: var(--dc-space-20);
  font-size: var(--dc-text-lg);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text);
}

.dc-account-login__well {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-40);
  height: var(--dc-space-40);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-12);
  background-color: var(--dc-surface-sunken);
  color: var(--dc-text-muted);
}

@media (max-width: 40em) {
  .dc-account-login__card {
    padding: var(--dc-space-20);
  }

  .dc-account-login__submit {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dc-account-login__submit,
  .dc-account-login__lost {
    transition: none;
  }
}