/* TODO: move out of components file */
/* Bootstrap overrides */
:root {
  --bs-border-radius: 16px;
  --bs-primary-rgb: 43, 19, 50; /* #2B1332 */
  --bs-body-color: white;
  --bs-body-bg: #2B1332;
}

/* Buttons and links */
.btn {
  border: none;
  border-radius: 16px;
}
.btn-cta {
  width: 100%;
  max-width: 326px;
  height: 48px;
  padding: 14px 16px 14px 16px;
}
.btn-primary {
  background-color: #FFCB22;
  color: #2B1332;
}
.btn.btn-primary:hover, .btn.btn-primary:active {
  background-color: #FFDE72;
  color: #2B1332;
}
.btn-secondary {
  background-color: #AD31FF;
}
.btn.btn-secondary:hover, .btn.btn-secondary:active {
  background-color: #AD31FF;
}
.btn:disabled {
  background-color: #77687C;
  color: black;
}
.badge {
  --bs-badge-font-weight: normal;
}
.nav-button {
  background-color: #513E57;
  height: 48px;
  border-radius: 24px;
  width: 48px;
  color: white;
}
.btn.nav-button:hover, .btn.nav-button:active {
  background-color: #9E92A1;
  color: white;
}

/* Form elements */
input[type=text], input[type=email] {
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: large;
  color: white;
  height: 48px;
  width: 100%;
  max-width: 360px;
}
input[type=text]::placeholder, input[type=email]::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
input[type=text]:focus, input[type=email]:focus {
  outline: none;
  box-shadow: none;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid white;
}