/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.auth-links .auth-link {
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease-in-out;
}

.auth-links .auth-link:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.auth-links .auth-link--accent {
  background: rgba(255, 255, 255, 0.1);
}

.session-locked {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

@media (max-width: 576px) {
  .auth-links .auth-link {
    font-size: 0.72rem;
    padding: 4px 8px;
    border-radius: 8px;
  }
  .auth-links span.mx-1 {
    margin-inline: 2px !important;
    font-size: 0.72rem;
  }
}