/* ===================================
   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-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;
  background-color: #b91c1c;
  border-bottom: 2px solid #b91c1c;
  transition: background-color 150ms ease-in-out;
}

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

/* PREBOOK */

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

/* 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;
}