/* LOGIN_SECONDARY_ACTIONS_V1 */

.login-secondary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.secondary-access-button {
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;

  border: 1px solid rgba(224, 189, 104, .78);
  border-radius: 999px;

  color: #e8c45e;
  background:
    linear-gradient(
      180deg,
      rgba(37, 33, 23, .80),
      rgba(10, 10, 10, .96)
    );

  font: inherit;
  font-size: .94rem;
  font-weight: 760;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;

  box-shadow:
    inset 0 1px 0 rgba(255, 239, 183, .05),
    0 5px 16px rgba(0, 0, 0, .16);

  cursor: pointer;

  transition:
    border-color .16s ease,
    color .16s ease,
    background .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

.secondary-access-button:hover {
  border-color: #f0cf72;
  color: #f5d979;

  background:
    linear-gradient(
      180deg,
      rgba(58, 48, 25, .92),
      rgba(17, 15, 10, .98)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 240, 180, .10),
    0 7px 20px rgba(183, 139, 31, .13);
}

.secondary-access-button:active {
  transform: translateY(1px);
}

.secondary-access-button:focus-visible {
  outline: 2px solid #f1cf6c;
  outline-offset: 3px;
}

.message.info {
  color: var(--gold);
}

/*
  Aproveita parte do espaçamento que já existia antes do aviso inferior.
  Assim os novos botões entram sem deformar a composição aprovada.
*/
.access-notice {
  margin-top: 14px;
  padding-top: 24px;
}

@media (max-width: 520px) {
  .login-secondary-actions {
    gap: 8px;
    margin-top: 10px;
  }

  .secondary-access-button {
    min-height: 42px;
    padding-inline: 8px;
    font-size: .82rem;
  }

  .access-notice {
    margin-top: 18px;
    padding-top: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .secondary-access-button {
    transition: none;
  }
}