/*
 * Shared OAuth ("Continue with Google/Microsoft") button + divider + error
 * banner styling used on login.php (per page-set under views/) and
 * activation.php (A7, plan §1.1, §2.7, §10.1). Brand-compliant per each
 * provider's sign-in button guidelines: light background, official
 * multicolor logo mark, neutral text.
 *
 * Kept in its own small file (matching enrollment-delivery-buttons.css /
 * forms.css convention) so both pages can link it without duplicating
 * rules.
 */

/* SaaS-style divider: a full-width hairline with "or" centered on top of the
   card's white background. Built with flex + pseudo-element lines rather than
   an <hr> + white-background overlap, so the text gap is automatic and needs
   no z-index/background hack. */
.oauth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
  color: #6b7280;              /* gray-500 */
  font-size: 0.85rem;          /* ~text-sm */
}

.oauth-divider::before,
.oauth-divider::after {
  content: "";
  flex: 1 1 auto;             /* each line grows to fill the full width */
  height: 1px;
  background-color: #e5e7eb;  /* gray-200 */
}

.oauth-button-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.oauth-provider-btn {
  display: flex;
  align-items: center;         /* icon + label vertically centered */
  justify-content: center;
  gap: 0.75rem;                /* consistent icon-to-text gap (Tailwind gap-3) */
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 1rem;
  border-radius: 5px;          /* match the input fields / Login button above */
  border: 1px solid #d1d5db;   /* gray-300 — slightly more distinct edge */
  background-color: #ffffff;
  color: #374151;              /* gray-700 — stronger text contrast */
  font-family: "Roboto", Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;            /* font-medium */
  letter-spacing: 0.15px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* subtle depth (shadow-sm) */
  transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.oauth-provider-btn:hover,
.oauth-provider-btn:focus-visible {
  background-color: #f9fafb;   /* hover:bg-gray-50 — interactive shift */
  color: #374151;
  text-decoration: none;
}

.oauth-provider-btn:focus-visible {
  outline: 2px solid #5f3be1;
  outline-offset: 2px;
}

.oauth-provider-btn .oauth-provider-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.oauth-provider-btn .oauth-provider-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Microsoft's guidelines call for Segoe UI where available; Roboto/Arial
   fallback keeps this consistent with the Google button above. */
.oauth-provider-btn--microsoft {
  font-family: "Segoe UI", "Roboto", Arial, sans-serif;
}

.oauth-error-banner {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid #f5c2c7;
  background-color: #f8d7da;
  color: #842029;
  font-size: 0.9rem;
  text-align: left;
}

.oauth-error-banner a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}