/* ============================================================
   MD-SCREEN-AUTH.CSS — Welcome, Login, Register, PIN screens
   ============================================================ */

/* ---- Google button hover ---- */
#btn-google:hover {
  background: var(--md-g0);
  border-color: var(--md-g3);
}
#btn-google svg { flex-shrink: 0; }

/* ---- Register child card ---- */
#reg-children-list .md-card {
  padding: var(--md-sp-3);
  border: 1.5px solid var(--md-g2);
}

/* ---- PIN entry screen ---- */
#screen-pin-entry .md-input {
  font-family: var(--md-font-c);
}

/* ---- Family select avatar cards ---- */
#fs-members .md-card:hover {
  border-color: var(--md-primary-border) !important;
  transform: translateY(-2px);
  box-shadow: var(--md-sh-md);
}

#fs-members .md-card:active {
  transform: scale(.96);
}

/* ---- PIN dots animation on error ---- */
.md-pin-wrap.md-anim-shake .md-pin-dot {
  border-color: var(--md-err);
}

/* ---- Step indicator on register ---- */
#reg-steps .md-badge {
  transition: all var(--md-dur) var(--md-ease);
  font-size: var(--md-fs-xs);
  padding: 4px 10px;
}

/* ---- Family code display ---- */
#reg-family-code {
  background: var(--md-primary-pale);
  border: 2px dashed var(--md-primary-border);
  border-radius: var(--md-r-md);
  padding: 12px 20px;
  display: inline-block;
}

/* ---- Password toggle (future) ---- */
.md-input-password-wrap {
  position: relative;
}
.md-input-password-wrap .md-input {
  padding-right: 48px;
}
.md-input-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--md-g4);
  width: 24px;
  height: 24px;
  cursor: pointer;
}