/* ===================================
   Component Styles | Buttons, Forms, and UI Elements
   =================================== */



.btn {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  text-align: center;
  font-family: var(--font-primary);
  font-size: 2.4rem;
  letter-spacing: 1px;
  color: var(--color-beige);
  text-transform: uppercase;
  /* white-space: nowrap; */
}

.btn:hover {
  background-color: #000;
  color: var(--color-beige);
  text-decoration: none;
}

.btn-accent:hover {
  background-color: red;
}

.btn-right {
  margin-left: 1.2rem;
}

.btn-block {
  display: block;
}

.btn-bounce {
  transition: transform 0.65s var(--ease-elastic);
}

.btn-bounce:hover {
  transform: scale(0.96) rotate(-1deg);
}

.btn-regular {
  background: var(--color-beige);
  color: #000;
}

.btn-nowrap {
  white-space: nowrap;
}

.btn-confirm {
  font-size: 2rem;
  background-color: #16a34a;
  border-bottom: 2px solid #16a34a;
  transition: background-color 150ms ease-in-out;
}

.btn-confirm:hover {
  background-color: none;
}

.btn-decline {
  font-size: 2rem;
  border-bottom: 2px solid var(--color-beige);
  transition: background-color 150ms ease-in-out;
}

.btn-decline:hover {
  background-color: none;
}

/* PREBOOK */

.prebook-btns {
  display: flex;
  justify-content: center;
  gap: var(--gap-sm);
}

.prebook-btns a.btn {
  flex: 0 0 auto;
  align-self: center;
  width: auto;
}

@media (max-width: 480px) {
  .prebook-btns {
    flex-direction: column;
  }
}

/* LINK IN ACCORDION */

.accordion-css__item-p a {
  font-family: inherit;
  color: inherit
}

/* BOOKINGSHELL */

#booking-shell {
  margin: 0 auto;
  max-width: 400px;
  background-color: #404040;
  border-radius: 4px;
}

/* FORM */

.nf-field-label {
  color: var(--color-beige);
  font-family: var(--font-body);
  font-size: var(--fs-300);
  font-weight: normal;
}

.nf-field-element input:not([type="submit"]),
.nf-field-element textarea,
.nf-field-element select {
  font-family: var(--font-body);
  padding: 0.4rem 0.8rem;
}

.nf-form-fields-required {
  display: none;
}