/* ── Login page layout ─────────────────────────────────────────── */
.login-section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 4rem);
  padding: 2rem 1rem;
}

.login-card {
  background-color: var(--color-card-white);
  border: 1px solid var(--color-card-border);
  border-radius: 1rem;
  box-shadow: var(--shadow-card);
  padding: 2rem 2.25rem 2.25rem;
  width: 100%;
  max-width: 420px;
}

@media (max-width: 480px) {
  .login-card {
    padding: 1.5rem 1.25rem 1.75rem;
  }
}

/* ── Bulma overrides scoped to login ───────────────────────────── */
.login-card .title {
  color: var(--color-anthracite-text);
  font-size: 1.375rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5rem;
}

.login-card .label {
  color: var(--color-anthracite-text);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
}

/* Target both Bulma .input class and raw Django-rendered inputs */
.login-card .input,
.login-card input[type="text"],
.login-card input[type="email"],
.login-card input[type="password"] {
  width: 100%;
  height: 3rem;
  border-radius: 0.75rem;
  border: 1px solid var(--color-card-border);
  background-color: rgba(255, 255, 255, 0.72);
  color: var(--color-anthracite-text);
  font-size: 1rem;
  padding: 0.75rem;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-card .input:focus,
.login-card input[type="text"]:focus,
.login-card input[type="email"]:focus,
.login-card input[type="password"]:focus {
  outline: none;
  border-color: var(--color-mint-cta);
  box-shadow: 0 0 0 3px rgba(177, 229, 91, 0.24);
}

.login-card .input.is-danger {
  border-color: var(--crm-amber-border);
}

.login-card .input.is-danger:focus {
  border-color: var(--crm-amber-border);
  box-shadow: 0 0 0 3px rgba(228, 201, 126, 0.24);
}

/* Amber notification for form errors */
.login-card .notification.is-warning {
  background-color: var(--crm-amber-bg);
  border: 1px solid var(--crm-amber-border);
  border-radius: 0.75rem;
  color: var(--crm-amber-text);
  font-size: 0.875rem;
  padding: 0.625rem 0.875rem;
  margin-bottom: 1.25rem;
}

.login-card .help.is-danger {
  color: var(--crm-amber-text);
  font-size: 0.8rem;
  margin-top: 0.375rem;
}

.login-card .field:not(:last-child) {
  margin-bottom: 1.125rem;
}

.login-card .field.is-submit {
  margin-top: 1.5rem;
}

.btn-fullwidth {
  width: 100%;
  justify-content: center;
}

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: #ffffff;
  color: #3c4043;
  border: 1px solid #dadce0;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
}

.btn-google:hover {
  background: #f8f9fa;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.2);
  color: #3c4043;
}

.btn-google:focus {
  outline: 2px solid #4285f4;
  outline-offset: 2px;
}

/* Footer hints */
.login-card .login-hint {
  font-size: 0.75rem;
  color: var(--color-active-taupe);
  text-align: center;
  margin-top: 1.25rem;
}

.login-card .login-signup {
  font-size: 0.875rem;
  text-align: center;
  margin-top: 0.875rem;
  color: var(--color-active-taupe);
}

.login-card .login-signup a {
  color: var(--color-anthracite-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.login-card .login-signup a:hover {
  color: var(--color-anthracite-text);
}