/* R301 — the account pages' own additions on top of /buy/buy.css: the Sign in
 * with Apple button. DRAWN BY THIS PAGE, not by Apple's script: Apple's JS
 * renders its own button only into an element it is told about, and a page
 * whose one control depends on a third-party script having loaded is a page
 * with no control on a bad day. The shape follows Apple's guidelines for a
 * custom Sign in with Apple button (white on a dark ground, the Apple mark,
 * the sentence) — Apple's JS is used for the sign-in itself, on tap. */
.apple-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 375px;
  min-height: 48px;
  margin: 20px 0 8px;
  padding: 0 16px;
  border-radius: 12px;
  background: #fff;
  color: #000;
  font: 600 17px/1 -apple-system, BlinkMacSystemFont, "Golos Text", "Inter", system-ui, sans-serif;
  letter-spacing: -0.01em;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.apple-button .apple-logo { width: 18px; height: 18px; flex: none; margin-top: -2px; }
.apple-button:hover { background: #f2f2f2; }
.apple-button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.apple-button[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .apple-button { background: #000; color: #fff; }
  :root:not([data-theme="dark"]) .apple-button:hover { background: #1a1a1a; }
}
/* R-WEB-IOS-ONBOARDING-REDESIGN-1: the site's theme toggle (data-theme) wins
   over the system setting here too — black on light, white on dark. */
:root[data-theme="light"] .apple-button { background: #000; color: #fff; }
:root[data-theme="light"] .apple-button:hover { background: #1a1a1a; }