/* "Sign in with Citiwell ID" button — https://id.citiwell.global/developers
 *
 *   <a class="citiwell-id-button" href="/_citiwell_auth/login?rd=%2F">
 *     <svg viewBox="9 10 44 44" aria-hidden="true">…mark, see the developers page…</svg>
 *     <span>Войти через Citiwell ID</span>
 *   </a>
 *
 * The filled button works on light and dark pages. On a light surface where it would be too loud,
 * add "citiwell-id-button--outline". The font is inherited from the page.
 */
.citiwell-id-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px 0 13px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: linear-gradient(135deg, #27a3d6, #1573a8);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 22px -14px rgba(21, 115, 168, 0.9);
  transition: filter 0.15s, box-shadow 0.15s;
}
.citiwell-id-button:hover {
  filter: brightness(1.06);
  text-decoration: none;
}
.citiwell-id-button:focus-visible {
  outline: 3px solid rgba(39, 163, 214, 0.45);
  outline-offset: 2px;
}
.citiwell-id-button svg {
  flex: none;
  width: 24px;
  height: 24px;
}
.citiwell-id-button--outline {
  border-color: #cfe2ec;
  background: #fff;
  color: #1a87bb;
  box-shadow: none;
}
.citiwell-id-button--outline:hover {
  filter: none;
  background: #f2f8fb;
}
.citiwell-id-button--block {
  display: flex;
  width: 100%;
}