/* ------------------------------------------------------------------
   Extracted from themes/custom/bookingtheme/css/main.css (global theme
   stylesheet, loaded site-wide on production). Only the rules the
   booking flow depends on: CSS variables, base typography, links,
   buttons, form inputs, and the booking sign-in / timeout popup.
   ------------------------------------------------------------------ */

/* The only Bootstrap utility the booking flow uses (production loads
   Bootstrap 5 site-wide; the flow's markup only references .text-center
   and .btn, the latter styled by the button rules below). */
#block-palms-room-booking .text-center {
  text-align: center !important;
}

@font-face {
  font-family: 'yaamava_custom_fontregular';
  src: url('../fonts/yaamava_custom_font-webfont.woff2') format('woff2'),
    url('../fonts/yaamava_custom_font-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

:root {
  --black-color: #000;
  --Gordons-green: #1A1511;
  --zeus-brown: #030303;
  --woodland-color: #000000;
  --shadow-color: #846854;
  --kidnapper-color: #E6ECD9;
  --albescent-color: #F3E3CC;
  --white-color: #fff;
  --parrot-color: #52A542;
  --sprout-color: #C0CFA0;
  --orange-color: #A6631B;
  --harvest-gold: #C0CFA0;
  --button-bg: #A6631B;
  --body-bg: #352A22;
}

#block-palms-room-booking ol,
#block-palms-room-booking ul {
  padding-left: 0;
}

#block-palms-room-booking {
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-size: 20px;
}

#block-palms-room-booking {
  background: var(--white-color);
}

#block-palms-room-booking,
#block-palms-room-booking p,
#block-palms-room-booking .p {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 1em;
  line-height: 1.625;
  color: var(--body-bg);
}

#block-palms-room-booking {
  font-size: 16px;
}

#block-palms-room-booking h1,
#block-palms-room-booking .h1 {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 56px;
  letter-spacing: 0.06em;
  line-height: 72px;
}

#block-palms-room-booking h2,
#block-palms-room-booking .h2 {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 32px;
  letter-spacing: 0.06em;
  line-height: 45px;
  text-transform: uppercase;
}

#block-palms-room-booking h3,
#block-palms-room-booking .h3 {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.06em;
  line-height: 35px;
}

#block-palms-room-booking h4,
#block-palms-room-booking .h4 {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.04em;
  line-height: 32px;
}

#block-palms-room-booking h5,
#block-palms-room-booking .h5 {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 25px;
}

#block-palms-room-booking h6,
#block-palms-room-booking .h6 {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 19px;
}

#block-palms-room-booking a {
  color: var(--orange-color);
  text-decoration: underline;
  font-weight: 600;
  transition: all 0.3s ease;
}

#block-palms-room-booking a:hover,
#block-palms-room-booking a:focus {
  color: var(--orange-color);
  text-decoration: none;
}

/* ------------------------------------------------------------
    Form inputs (main.css, scoped to Drupal's content block wrapper)
------------------------------------------------------------ */

/* main.css declares this rule twice; the later occurrence (gold border,
   black text, !important) is what production renders. */
#block-palms-room-booking input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"]),
#block-palms-room-booking select,
#block-palms-room-booking textarea {
  display: block;
  height: 60px !important;
  border: 1px solid #a6631b !important;
  background-color: transparent;
  padding: 15px !important;
  border-radius: 0;
  color: #000 !important;
  font-size: 1em !important;
  line-height: 1.725 !important;
  font-weight: 400 !important;
  -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

#block-palms-room-booking .form-control:focus,
#block-palms-room-booking input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"]):focus,
#block-palms-room-booking select:focus,
#block-palms-room-booking textarea:focus {
  box-shadow: none;
  border-color: #ccc;
  outline: none;
}

/* ------------------------------------------------------------
    Buttons (main.css base button rules)
------------------------------------------------------------ */

#block-palms-room-booking .btn,
#block-palms-room-booking button:not(.slick-arrow),
html #block-palms-room-booking input[type=button],
#block-palms-room-booking input[type=reset],
#block-palms-room-booking input[type=submit] {
  background: var(--button-bg);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 22px;
  text-align: center;
  color: var(--white-color);
  padding: 17px;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  border: 2px solid var(--button-bg);
  text-transform: uppercase;
  max-width: 100%;
  cursor: pointer;
}

#block-palms-room-booking .guest-continue-wrapper .guest-btn,
#block-palms-room-booking .continue-button-wrappper .guest-btn {
  background: #FFF;
  color: var(--button-bg);
  border-color: var(--albescent-color);
}

#block-palms-room-booking .btn::after,
#block-palms-room-booking button:not(.slick-arrow):after {
  width: 232px;
  display: block;
  max-width: 100%;
  content: '';
}

#block-palms-room-booking .btn:hover,
#block-palms-room-booking button:hover,
html #block-palms-room-booking input[type=button]:hover,
#block-palms-room-booking input[type=reset]:hover,
#block-palms-room-booking input[type=submit]:hover {
  background: var(--white-color) !important;
  color: var(--button-bg) !important;
  opacity: 1 !important;
}

#block-palms-room-booking .btn:focus {
  outline: none;
}

#block-palms-room-booking .btn:focus,
html #block-palms-room-booking input[type=button]:focus,
#block-palms-room-booking input[type=reset]:focus,
#block-palms-room-booking input[type=submit]:focus,
#block-palms-room-booking button:focus,
html #block-palms-room-booking input[type=button]:active,
#block-palms-room-booking input[type=reset]:active,
#block-palms-room-booking input[type=submit]:active,
#block-palms-room-booking button:active {
  background: var(--button-bg);
  color: var(--white-color);
  outline: none;
  box-shadow: none;
  border: 2px solid var(--button-bg);
}

/* ------------------------------------------------------------
    Booking sign-in / session-timeout popup (main.css)
------------------------------------------------------------ */

#block-palms-room-booking .booking-signin-popup-wrapper {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100vh;
  z-index: 9999;
  display: none;
  top: 0;
  left: 0;
}

#block-palms-room-booking .popup_close {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 40px;
  height: 40px;
  background-color: transparent;
  cursor: pointer;
}

#block-palms-room-booking .popup_close:after {
  content: "";
  position: absolute;
  top: 13px;
  left: 19px;
  width: 2px;
  height: 16px;
  background-color: #a6631b;
  transform: rotate(45deg);
  transition: all 0.3s;
}

#block-palms-room-booking .popup_close:before {
  content: "";
  position: absolute;
  top: 13px;
  left: 19px;
  width: 2px;
  height: 16px;
  background-color: #a6631b;
  transform: rotate(-45deg);
  transition: all 0.3s;
}

#block-palms-room-booking .popup_close:hover:after,
#block-palms-room-booking .popup_close:hover:before {
  background-color: rgba(165, 100, 37, 0.7);
}

#block-palms-room-booking .booking-signin-popup-inner {
  position: absolute;
  background-color: #FFFAF1;
  background-image: url(../images/events-list-bg-tree.svg);
  background-size: 320px auto;
  background-repeat: no-repeat;
  background-position: -130px -20px;
  max-width: 540px;
  width: 100%;
  top: 50%;
  left: 50%;
  z-index: 20;
  transform: translate(-50%, -50%);
  padding: 30px 30px;
}

#block-palms-room-booking .booking-signin-popup-wrapper .or-border {
  text-align: center;
  padding: 20px 0;
  position: relative;
}

#block-palms-room-booking .booking-signin-popup-wrapper .or-border span {
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  display: inline-block;
  padding: 0 13px;
  background-color: #FFFAF1;
  position: relative;
  z-index: 1;
  font-weight: 400;
  color: #352A22;
}

#block-palms-room-booking .booking-signin-popup-wrapper .or-border:after {
  content: "";
  width: 100%;
  height: 2px;
  background-color: #ccc9c7;
  position: absolute;
  top: 50%;
  left: 0;
}

@media (max-width: 550px) {
  #block-palms-room-booking .booking-signin-popup-wrapper {
    background-color: #FFFAF1;
    padding: 55px 0px 30px;
  }

  #block-palms-room-booking .booking-signin-popup-inner {
    position: static;
    max-width: 100%;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 0px 15px;
    transform: none;
  }
}