/* floaters */
.floater {
  position: fixed;
  z-index: 50;
}

.floater__container {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-default);
  border: var(--border-default);
  background-color: var(--color-primary);
  color: var(--color-content);
  box-shadow: var(--shadow-default);
}

.floater__container--promo {
  background-color: var(--color-accent);
  color: var(--color-secondary-dark);
  box-shadow: var(--shadow-accent-strong);
  border: var(--border-accent);
}

.floater__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: var(--font-body);
}

.floater__title {
  font-family: var(--font-heading);
  text-transform: uppercase;
}

.floater__body,
.floater__message,
.floater__placeholder {
  font-family: var(--font-body);
}

.floater__badge {
  align-self: flex-start;
  border-radius: var(--radius-default);
  background-color: var(--color-secondary);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-body);
}

.floater__cta {
  align-self: flex-start;
  border-radius: var(--radius-default);
  border: var(--border-secondary);
  background-color: var(--color-primary);
  color: var(--color-secondary);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.floater__cta:hover {
  background-color: var(--color-primary-light);
}