/* Minimal Bootstrap-compatible surface used by SODA Mobile. */
:root,
[data-bs-theme="light"] {
  --bs-primary: #7367f0;
  --bs-primary-rgb: 115, 103, 240;
  --bs-secondary: #808390;
  --bs-success: #28c76f;
  --bs-danger: #ea5455;
  --bs-warning: #ff9f43;
  --bs-secondary-color: #8f8d9c;
  --bs-body-color: #3f3b50;
  --bs-body-bg: #ffffff;
  --bs-border-color: rgba(75, 70, 92, 0.18);
}

[data-bs-theme="dark"] {
  --bs-secondary-color: #aaa6bd;
  --bs-body-color: #f0eefb;
  --bs-body-bg: #171622;
  --bs-border-color: rgba(230, 226, 255, 0.16);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

button,
input,
select,
textarea {
  margin: 0;
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: default;
}

[hidden] {
  display: none !important;
}

.d-none {
  display: none !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.text-primary {
  color: var(--bs-primary) !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.icon-base {
  width: var(--bs-icon-size, 1em);
  height: var(--bs-icon-size, 1em);
  inline-size: var(--bs-icon-size, 1em);
  block-size: var(--bs-icon-size, 1em);
  flex: 0 0 auto;
  font-size: var(--bs-icon-size, 1em);
  line-height: 1;
  vertical-align: middle;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.62rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  color: var(--bs-body-color);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  background: transparent;
  appearance: none;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out,
    opacity 0.15s ease-in-out;
}

.btn:disabled,
.btn.disabled {
  pointer-events: none;
  opacity: 0.65;
}

.btn-primary {
  color: #ffffff;
  border-color: var(--bs-primary);
  background-color: var(--bs-primary);
}

.btn-danger {
  color: #ffffff;
  border-color: var(--bs-danger);
  background-color: var(--bs-danger);
}

.btn-warning {
  color: #2f2b3d;
  border-color: var(--bs-warning);
  background-color: var(--bs-warning);
}

.btn-success {
  color: #ffffff;
  border-color: var(--bs-success);
  background-color: var(--bs-success);
}

.btn-secondary {
  color: #ffffff;
  border-color: var(--bs-secondary);
  background-color: var(--bs-secondary);
}

.form-label {
  display: inline-block;
}

.form-control,
.form-select {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0.55rem 0.875rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  color: var(--bs-body-color);
  line-height: 1.45;
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  appearance: none;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
  outline: 0;
  box-shadow: 0 0 0 0.22rem rgba(var(--bs-primary-rgb), 0.14);
}

.form-control::placeholder,
.form-select::placeholder {
  color: var(--bs-secondary-color);
  opacity: 1;
}

.form-control.is-invalid,
.form-select.is-invalid,
.soda-mobile-recipient-picker__field.is-invalid {
  border-color: var(--bs-danger);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--bs-danger);
  box-shadow: 0 0 0 0.22rem rgba(234, 84, 85, 0.14);
}

.invalid-feedback {
  display: block;
  width: 100%;
  min-height: 0;
  color: var(--bs-danger);
  font-size: 0.78rem;
  font-weight: 700;
}

.invalid-feedback:empty {
  display: none;
}

.spinner-border {
  display: inline-block;
  width: var(--bs-spinner-width, 2rem);
  height: var(--bs-spinner-height, 2rem);
  vertical-align: -0.125em;
  border: var(--bs-spinner-border-width, 0.25em) solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: soda-mobile-spinner-border 0.75s linear infinite;
}

.spinner-border-lg {
  --bs-spinner-width: 2.65rem;
  --bs-spinner-height: 2.65rem;
  --bs-spinner-border-width: 0.32em;
}

@keyframes soda-mobile-spinner-border {
  to {
    transform: rotate(360deg);
  }
}