/* /themes/bedrebyttede/assets/css/pages/login.css */
#tab-signup {
  display: none;
}

#bb-auth-start,
#bb-auth-signup,
#bb-auth-code-block {
  background: var(--surface);
  border: var(--border-1) solid var(--line);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-1);
  padding: var(--space-4);
}

#bb-auth-start .input,
#bb-auth-signup .input,
#bb-auth-code-block .input {
  font-variant-numeric: tabular-nums;
}



.small {
  font-size: var(--fs-sm);
}

#bb-login-success {
  background: var(--surface);
  border: var(--border-1) solid var(--line);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-1);
  padding: var(--space-4);
}

.bb-or {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin: 12px 0 8px;
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.bb-or::before,
.bb-or::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
  opacity: .6;
}

.bb-email-helper {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Provider helper grid (login) --------------------------------------- */
.bb-mail-help {
  margin-top: var(--space-3);
}

.bb-mail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

@media (max-width: 47.99rem) {
  .bb-mail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bb-mail-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-2);
  background: var(--surface);
  border: var(--border-1) solid var(--line);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  /* no underline */
  transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  font-size: var(--fs-md);
}

.bb-mail-card:hover,
.bb-mail-card:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
  outline: none;
}

/* Icon default + hover brand color (define a --prov per provider) */
.bb-mail-icon {
  font-size: var(--fs-lg);
  color: var(--text-3);
  transition: color var(--dur-2) var(--ease-out);
}

.bb-mail-card:hover .bb-mail-icon,
.bb-mail-card:focus-visible .bb-mail-icon {
  color: var(--prov, var(--brand));
}

/* Brand colors */
.bb-mail--gmail {
  --prov: #EA4335;
}

/* Google Red */
.bb-mail--outlook {
  --prov: #0A61FF;
}

/* Outlook Blue */
.bb-mail--icloud {
  --prov: #0A84FF;
}

/* iCloud Blue */
.bb-mail--yahoo {
  --prov: #6001D2;
}

/* Yahoo Purple */

/* “Active” state when the typed email matches the provider */
.bb-mail-card.is-active {
  border-color: color-mix(in oklab, var(--prov, var(--brand)), white 65%);
  box-shadow: var(--shadow-2);
}