:root {
  --color-primary: #0042e4;
  --color-secondary: #25264d;
  --color-accent: #688852;
  --color-offwhite: #f6fafd;
  --color-lightest: #747474;
  --color-light: #606060;
  --color-medium: #484848;
  --color-dark: #333333;
  --color-darkest: #151515;
  --color-warning: #c03000;
}

h1 {
  font-size: 64px !important;
}

h2 {
  font-size: 25px !important;
  font-weight: 600 !important;
}

h3 {
  font-size: 18px !important;
}

p,
a,
span {
  font-family: "Poppins";
}

.body-text {
  font-size: 16px;
}

.subhead {
  font-size: 14px;
}

.subtext {
  font-size: 12.5px;
}

[x-cloak] {
  display: none !important;
}

body {
  font-weight: normal;
  font-size: 14px;
}

#hero-bg {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
  height: 970px;
}

#hero-bg::before {
  content: "";
  position: absolute;
  inset: 34px 64px 64px;

  background-image: url("../../assets/landing-page.webp");
  background-size: cover;
  background-position: top left;
  background-repeat: no-repeat;

  border-radius: 20px;

  z-index: -1;
}

.font-fraunces {
  font-family: "Fraunces";
}

.font-poppins {
  font-family: "Poppins";
}

.text-title {
  line-height: 30px;
  letter-spacing: 0.03em;
  font-size: 25px;
  text-transform: uppercase;
  margin-right: 32px;
  color: black;
}

.text-title.inactive {
  color: #cdcdcd;
}

.border-bottom {
  border-bottom: 1px solid #cdcdcd;
}

.container-border {
  border: 1px solid var(--color-lightest);
  border-radius: 6px;
  background: white;
  border-bottom: 0;
  overflow: hidden;
}

#book-button {
  height: 44px;
  width: 113px;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid hsl(104, 100%, 16%);
}

#book-button:hover {
  color: white;
  border: 1px solid white;
  cursor: pointer;
}

#promotional-section button {
  padding: 10px 32px;
  font-family: "Poppins";
  font-weight: 700;
}

#navigation {
  font-weight: 500;
  font-family: "Poppins";
}

#navigation__top .navigation__link {
  font-size: 16px;
  color: var(--color-darkest);
}

#navigation__bottom .navigation__link {
  font-size: 16px;
  color: var(--color-light);
}

.navigation__link:hover {
  color: var(--color-primary) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

#promotional-section h1 span {
  color: var(--color-primary);
  font-style: italic;
  font-family: "Fraunces";
}

#footer {
  /* border-color: var(--color-lightest) */
  /* border-top: 1px solid var(--color-lightest); */
}

::-webkit-datetime-edit {
  flex-basis: content;
  flex-shrink: 0;
  flex-grow: 0;
  padding-right: 5px;
}
input[type="date"] {
  width: 110px;
  cursor: pointer;
  color: black;
  font-weight: normal;
  font-size: 17px;
  border: none;
  background: transparent;
}

.update-button {
  background-color: #165300;
  color: white;
  border: 1px solid white;
  cursor: pointer;
}
.update-button:hover {
  background-color: white;
  color: #165300;
  border: 1px solid hsl(104, 100%, 16%);
}

.form-container__title {
  font-size: 20px;
  width: 100%;
  /* background-color: pink; */
  height: 30px;
  margin-bottom: 12px;
}
#form-container input {
  font-size: 16px;
  height: 50px;
  width: calc(50% - 16px);
  margin-bottom: 16px;
  padding: 20px;
  background-color: var(--color-offwhite);
  color: var(--color-darkest);
}
#form-container input::placeholder {
  font-size: 16px;
  color: black;
}
#form-container__email-input-container {
  width: calc(50% - 16px);
}
#form-container__email-input-container input {
  width: 100%;
}
#invalid-email-copy {
  margin-bottom: 0px;
  background-color: #9d1f14;
  color: white;
  padding: 4px;
  font-size: 12px;
}
.invalid-email-input {
  border: 1px solid #9d1f14;
  margin-bottom: 0px !important;
}

.button {
  text-transform: uppercase;
  font-family: "Poppins";
  cursor: pointer;
  color: #ffffff;
  font-weight: 700;
}

#confirmation-details-container {
  border: 1px solid var(--color-lightest);
  border-radius: 6px;
}

.datepicker-content-box {
  background-color: #ffffff;
  border: 1px solid #747474;
  border-radius: 6px;
  width: 500px;
  min-width: 116px;
}

.datepicker-content-box:not(:last-child) {
  margin-right: 16px;
}

.rooms-container__header__selected {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-underline-offset: 8px;
}

#information-container__details {
  border: 1px solid var(--color-lightest);
  border-radius: 6px;
}

#information-container__details > div:not(:last-child) {
  border-bottom: 1px solid #949494;
}

#button-container {
  border-radius: 6px;
  cursor: pointer;
}

.checkmark {
  position: relative;
  width: 30px;
  height: 12px;
}

.checkmark::before,
.checkmark::after {
  content: "";
  position: absolute;
  height: 3px;
  background: var(--color-accent);
  border-radius: 999px;
  transform-origin: left center;
}

/* short arm */
.checkmark::before {
  width: 12px;
  top: 17px;
  left: 1px;
  transform: rotate(45deg);
}

/* long arm */
.checkmark::after {
  width: 23px;
  top: 26px;
  left: 8px;
  transform: rotate(-55deg);
}

#confirmation-image {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 1024px) {
  #page-wrapper {
    margin-left: 6px;
    margin-right: 6px;
  }

  #hero-bg::before {
    inset: 34px 32px 32px;
  }

  #booking-details,
  #hotel-details {
    padding-right: 60px;
  }
}

@media (max-width: 1140px) {
  #page-wrapper {
    margin-left: 32px;
    margin-right: 32px;
  }
}

@media (max-width: 1070px) {
  #page-wrapper {
    margin-left: 16px;
    margin-right: 16px;
  }
}