/**
 * @file auth.css
 * Login / registration page styles.
 */

/* Auth page wrapper — centered vertically */
.la-page--auth {
  background: var(--la-bg-primary);
}

.la-main--auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--la-space-lg);
}

.la-auth {
  width: 100%;
  max-width: 420px;
}

/* Logo block */
.la-auth__logo {
  text-align: center;
  margin-bottom: var(--la-space-xl);
}

.la-auth__logo-img {
  max-width: 280px;
  height: auto;
  margin: 0 auto;
}

.la-auth__tagline {
  margin-top: var(--la-space-sm);
  color: var(--la-text-secondary);
}

/* Card */
.la-auth__card {
  padding: var(--la-space-2xl) var(--la-space-xl);
}

.la-auth__title {
  font-family: var(--la-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: var(--la-space-lg);
}

/* Toggle link at bottom */
.la-auth__toggle {
  text-align: center;
  margin-top: var(--la-space-lg);
  font-size: 0.875rem;
  color: var(--la-text-secondary);
}

.la-auth__toggle a {
  color: var(--la-link);
  font-weight: 600;
}

.la-auth__toggle a:hover {
  color: var(--la-link-hover);
}

/* ── Registration variant ── */
.la-auth--register {
  max-width: 680px;
}

/* Override the module's 2-column grid — auth layout provides its own branding */
.la-auth--register form.qp-register {
  display: block;
  max-width: none;
  min-height: auto;
  border-radius: 0;
  overflow: visible;
}

.la-auth--register .qp-register-brand {
  display: none;
}

/* Reset the module's grid-column and padding overrides */
.la-auth--register .qp-register > fieldset,
.la-auth--register .qp-register > .form-type-checkbox,
.la-auth--register .qp-register > .form-actions {
  padding-left: 0;
  padding-right: 0;
  background: transparent;
}

/* ── Form elements ── */
.la-auth__card .form-item {
  margin-bottom: var(--la-space-md);
}

/* Fieldsets also carry .form-item in Drupal — override their spacing */
.la-auth__card fieldset.form-item {
  margin-bottom: var(--la-space-lg);
}

.la-auth__card label {
  display: block;
  font-family: var(--la-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--la-text-primary);
  margin-bottom: var(--la-space-xs);
}

.la-auth__card .form-text,
.la-auth__card .form-email,
.la-auth__card .form-date,
.la-auth__card input[type="text"],
.la-auth__card input[type="email"],
.la-auth__card input[type="password"],
.la-auth__card input[type="date"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--la-border-light);
  border-radius: var(--la-radius-sm);
  font-family: var(--la-font-body);
  font-size: 0.9375rem;
  color: var(--la-text-primary);
  background: var(--la-bg-primary);
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}

.la-auth__card input:focus {
  outline: none;
  border-color: var(--la-green);
  box-shadow: 0 0 0 2px rgba(74, 103, 65, 0.15);
}

.la-auth__card .description {
  font-size: 0.8125rem;
  color: var(--la-text-muted);
  margin-top: var(--la-space-xs);
}

/* Fieldsets */
.la-auth__card fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--la-space-lg) 0;
}

.la-auth__card fieldset > legend,
.la-auth__card .fieldset-legend {
  font-family: var(--la-font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--la-text-primary);
  padding: 0;
  margin-bottom: var(--la-space-md);
  border-bottom: 1px solid var(--la-border-light);
  padding-bottom: var(--la-space-sm);
  width: 100%;
}

/* Nested fieldsets (e.g. "Choose Your Plan" inside Family) */
.la-auth__card fieldset fieldset {
  margin-top: var(--la-space-md);
  margin-bottom: 0;
}

.la-auth__card fieldset fieldset > legend,
.la-auth__card fieldset fieldset .fieldset-legend {
  font-size: 0.95rem;
  border-bottom: none;
  padding-bottom: 0;
}

/* Radio tier cards */
.la-auth__card .form-type-radio {
  margin-bottom: var(--la-space-sm);
}

.la-auth__card .form-type-radio label {
  display: inline;
  font-weight: 400;
}

.la-auth__card .qp-tier {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--la-space-sm);
}

.la-auth__card .qp-tier__name {
  font-weight: 600;
}

.la-auth__card .qp-tier__price {
  color: var(--la-text-secondary);
  font-size: 0.875rem;
}

.la-auth__card .qp-tier__price small {
  font-size: 0.75rem;
}

.la-auth__card .qp-tier__desc {
  flex-basis: 100%;
  font-size: 0.8125rem;
  color: var(--la-text-muted);
}

.la-auth__card .qp-tier__badge {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--la-green);
  color: var(--la-cream);
  padding: 1px 6px;
  border-radius: var(--la-radius-sm);
}

/* Checkboxes — inline input + label */
.la-auth__card .form-type-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--la-space-sm);
}

.la-auth__card .form-type-checkbox input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}

.la-auth__card .form-type-checkbox label {
  display: inline;
  font-weight: 400;
  margin-bottom: 0;
}

.la-auth__card .form-type-checkbox .description {
  margin-top: var(--la-space-xs);
}

/* Terms checkbox — top-level, needs visual separation */
.la-auth__card > .la-region > div > form > .form-type-checkbox,
.la-auth__card .form-item-terms {
  margin-top: var(--la-space-lg);
  padding-top: var(--la-space-lg);
  border-top: 1px solid var(--la-border-light);
}

/* Actions */
.la-auth__card .form-actions {
  margin-top: var(--la-space-xl);
}

.la-auth__card .form-submit,
.la-auth__card .button--primary,
.la-auth__card .la-btn-primary,
.la-auth__card .form-actions input[type="submit"] {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: var(--la-radius-sm);
  font-family: var(--la-font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  background: var(--la-green);
  color: var(--la-cream);
  transition: background 0.15s ease;
  box-shadow: none;
}

.la-auth__card .form-submit:hover,
.la-auth__card .button--primary:hover,
.la-auth__card .form-actions input[type="submit"]:hover {
  background: #3d5636;
  box-shadow: none;
  transform: none;
}

/* ── Status Messages (auth context) ── */
.la-auth__card [data-drupal-messages] > div {
  border-radius: var(--la-radius-sm);
}