/* Certificate verification family — shared shell, a11y, and form alignment */

.verify-family-page {
  background: var(--lms-bg-page);
  color: var(--color-text);
}

.verify-family-page .verify-btn,
.verify-family-page .verify-form input,
.verify-family-page .nav-links a,
.verify-family-page .btn {
  min-height: 44px;
}

.verify-family-page .theme-toggle,
.verify-family-page .nav-toggle,
.verify-family-page .site-footer .footer-social a {
  width: 44px;
  height: 44px;
}

.verify-family-page a:focus-visible,
.verify-family-page button:focus-visible,
.verify-family-page input:focus-visible,
.verify-family-page .result-card:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Shared form fields — align with LMS toolbar + input tokens */
.verify-family-page .verify-form .form-group label {
  color: var(--verify-field-label);
  font-size: 0.9rem;
  font-weight: 600;
}

.verify-family-page .verify-form input {
  border-color: var(--verify-field-border);
  background: var(--verify-field-bg);
  color: var(--verify-field-text);
  border-radius: var(--input-radius);
}

.verify-family-page .verify-form input::placeholder {
  color: var(--lms-toolbar-field-placeholder);
}

/* QR context — shared alert-info language */
.verify-family-page .qr-context {
  border-color: var(--verify-qr-border);
  background: var(--verify-qr-bg);
}

.verify-family-page .qr-context p {
  color: var(--verify-qr-text);
}

.verify-family-page .qr-context code {
  background: var(--verify-qr-code-bg);
  color: var(--verify-qr-code-text);
}

/* Loading — shared spinner track */
.verify-family-page .verify-spinner {
  border-color: var(--verify-spinner-track);
  border-top-color: var(--verify-spinner-active);
}

.verify-family-page .verify-loading p {
  color: var(--verify-loading-text);
}

.verify-family-page .verify-loading .verify-loading-sub {
  color: var(--verify-loading-sub);
}

/* Result badges — margin reset for shared badge component */
.verify-family-page .result-head .badge {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .verify-family-page .verify-result,
  .verify-family-page .verify-spinner,
  .verify-family-page .verify-btn.is-loading .btn-icon.spinning {
    animation: none;
  }
}