/*Tab headers*/
:root {
  --tab-header-height: 3.5rem;
}

label[data-drupal-selector="edit-tab-header"] {
  /* position: absolute; */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  left: 0;
  height: var(--tab-header-height);
  /* top: -3rem; */
  /* // padding: .85rem 1rem; */
  padding: 1rem;
  /* // width: calc(100% - 2rem); */
  /* // max-width: calc(1300px - 1rem); */
  width: 100%;
  background-color: var(--background-accent);

  /* // border-top: solid 2px var(--primary); */
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: var(--foreground);
  transition: 0.3s background-color var(--ease);
  cursor: pointer;
}

.hide {
  label[data-drupal-selector="edit-tab-header"] {
    background-color: var(--background);
  }
}

#block-rooms-webform,
#block-dining-webform {
  position: static;

  .form-item {
    flex: 1 1 auto;
  }
  &:has(~ .block-webform) {
    label[data-drupal-selector="edit-tab-header"] {
      width: auto;
    }
  }

  label[data-drupal-selector="edit-tab-header"] {
    position: absolute;
    top: calc(var(--tab-header-height) * -1);
  }

  .form-wrapper {
    background-color: var(--background-accent);
    margin: 0;
    padding: 2rem;
    gap: 1rem 2rem;
    display: flex;
    flex-direction: column;
  }

  .webform-flex .form-wrapper:has(.book-now) {
    padding: 0;
  }

  .webform-flex {
    align-items: center;
    position: relative;
    padding-bottom: 1rem;
    border-bottom: solid 1px var(--accent);

    place-content: center;
    label {
      font-size: var(--text-xs);
      text-transform: uppercase;
      cursor: pointer;
      &.error {
        color: red;
      }
    }

    input,
    select,
    textarea {
      width: 100%;
      height: auto;
      font-family: inherit;
      font-size: var(--text-base);
      border: none;
      background-color: transparent !important;
      outline: none;
      z-index: 1;
      cursor: pointer;
      padding: 0;
      &.picked {
        color: var(--icon);
      }
    }

    .webform-flex--container {
      position: relative;
    }
  }
  .webform-flex:has(.book-now) {
    padding-right: 0;
    border: 0;
    padding-bottom: 0;
    border: 0;
  }

  #edit-book-direct-benefits,
  [data-drupal-selector="edit-guest-info"],
  [data-drupal-selector="edit-inquiry-form"] {
    display: none;
  }

  [data-drupal-selector="edit-error-message"] {
    position: relative;
    padding: 0 3rem;
    margin: 0 auto;
    /* width: 100%; */
    background-color: #b30000;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.78, 0.41, 0.36, 0.89);
    text-align: center;
    color: white;
    &.show {
      padding: 0.5rem 3rem;
      max-height: 10rem;
    }
  }

  &.hide {
    .webform-flexbox {
      display: none;
    }
  }
}

#block-rooms-webform {
  label[data-drupal-selector="edit-tab-header"] {
    left: var(--edge);
  }
  .webform-flex:nth-of-type(3):not([class~="room-list-container"]),
  .webform-flex:nth-of-type(5):not([class~="guest-list-container"]) {
    display: none;
  }

  .webform-flex.guest-list-container {
    position: absolute;
    display: none;
    top: 10rem;
    left: 50%;
    box-shadow: 0 0 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
    opacity: 0;
    overflow: hidden;
    z-index: 10;
    transition:
      opacity 0.2s,
      top 0.1s ease-in;
    background-color: var(--background);
    width: 12.5rem;
    padding: 0 1rem;
    font-size: var(--text-sm);
    text-align: center;
    label {
      margin: 0;
    }
    .form-wrapper {
      padding: 0;
      background: transparent;
    }
    &.show {
      display: block;
    }
    &.show.open {
      top: 12rem;
      opacity: 1;
      left: 50%;
      transform: translate(-50%, 0);
    }

    .form-item {
      display: flex;
      padding: 1rem 0;
      justify-content: space-between;
      align-items: center;
      gap: 0.5rem;
      border-bottom: solid 1px var(--accent);
      &:last-child {
        border-bottom: 0;
      }
    }

    .minus-item,
    .add-item {
      display: block;
      flex: 0 0 1rem;
      height: 1rem;

      cursor: pointer;
    }

    input {
      flex: 0 0 1rem;
      font-size: var(--text-sm);
    }
    label {
      flex: 1;
    }

    .add-item {
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:%231d1c1a;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}</style><line class="st0" x1="50" y1="21.5" x2="50" y2="78.5"/><line class="st0" x1="78.5" y1="50" x2="21.5" y2="50"/></svg>');
    }

    .minus-item {
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:%231d1c1a;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}</style><line class="st0" x1="78.5" y1="50" x2="21.5" y2="50"/></svg>');
    }
  }
}

#block-dining-webform {
  /* display: none; */

  label[data-drupal-selector="edit-tab-header"] {
    left: var(--edge);
    right: var(--edge);
    width: auto;
  }

  /* .webform-flex:nth-of-type(3),
  .webform-flex:nth-of-type(4),
  .webform-flex:nth-of-type(5),
  .webform-flex:nth-of-type(6) {
    display: none;
  } */

  .webform-flex:nth-of-type(2):not[class~="icon-calendar"],
  .webform-flex:nth-of-type(3):not[class~="icon-time"],
  .webform-flex:nth-of-type(4):not[class~="time-list-container"],
  .webform-flex:has([for="edit-guest-dine"]) {
    display: none;
  }

  .webform-flex[data-drupal-selector="edit-restaurant-bars"] {
    flex: 1;
  }

  .webform-flex.dining-list-data {
    background-color: var(--background);
    padding: 1.5rem;
    position: absolute;
    display: none;
    top: 4rem;
    left: 5rem;
    box-shadow: 0 0 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
    opacity: 0;
    overflow: hidden;
    z-index: 3;
    transition:
      opacity 0.2s,
      top 0.1s ease-in;
    &.show {
      display: block;
    }
    &.show.open {
      top: 5rem;
      opacity: 1;
    }

    .form-wrapper {
      padding: 0;
      background: transparent;
    }
  }

  .webform-flex.dining-list-data ~ :not(:has(.book-now)) {
    display: none;
  }
}

#block-rooms-webform:has(~ #block-dining-webform) {
  label[data-drupal-selector="edit-tab-header"] {
    left: var(--edge);
    width: calc(100% / 2 - var(--edge));
  }
}

#block-rooms-webform + #block-dining-webform {
  label[data-drupal-selector="edit-tab-header"] {
    left: 50%;
    width: calc(100% / 2 - var(--edge));
  }
}

.webform-submission-form.contextual-region {
  position: static;
}

/* hide room  */
.webform-flex:has([for="edit-room-name"]),
.webform-flex:has([data-drupal-selector="edit-restaurant-link"]) {
  display: none;
}

.webform-flex:has(#edit-restaurant-bars) {
  .js-form-item {
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--accent);
    place-content: center;
  }
}

.js-form-item:has(.hide) {
  display: none;
}

.dining-item {
  padding: 0 0 0.25rem;
  font-size: 0.8rem;
  color: var(--foreground);
  cursor: pointer;

  &:hover {
    color: var(--primary) 2;
  }
}
.block-webform {
  p {
    margin: 0;
  }
}

.webform-flex .webform-flex--container:after {
  content: "";
  display: none;
  position: absolute;
  top: calc(50% - 0.5rem);
  right: 1rem;
  width: 1.25rem;
  height: 1.25rem;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  z-index: 1;
}

.webform-flex.icon-calendar .webform-flex--container:after {
  display: block;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:%231d1c1a;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}</style><rect x="16.2" y="22.7" class="st0" width="67.7" height="67.7"/><line class="st0" x1="16.2" y1="43.9" x2="83.8" y2="43.9"/><line class="st0" x1="32.6" y1="13.8" x2="32.6" y2="32.2"/><line class="st0" x1="68" y1="13.8" x2="68" y2="32.2"/></svg>');
}

.webform-flex.icon-arrow-down .webform-flex--container:after {
  display: block;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:%231d1c1a;stroke-width:8;stroke-linecap:round;stroke-miterlimit:10;}</style><g><g><polyline class="st0" points="13,32.1 50.2,69.3 87,32.6 "/></g></g></svg>');
}

.resto-list-contents {
  > div {
    display: none;
    &:has(.dining-item) {
      display: block;
    }
  }
  p {
    /* font-size: var(--text-sm); */
    padding: 0;
    font-weight: 500;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--accent);
    max-width: max-content;
  }
  .dining-item {
    font-size: var(--text-sm);
  }
}
.room-list-container {
  display: none;
}

.flatpickr-current-month {
  .flatpickr-monthDropdown-months {
    width: auto !important;
  }

  .numInputWrapper {
    margin-left: 10px;
  }
}

@media (min-width: 1024px) {
  label[data-drupal-selector="edit-tab-header"] {
    font-size: var(--text-base);
  }

  #block-rooms-webform,
  #block-dining-webform {
    .webform-flex:has(.book-now) {
      flex: 0 0 20rem;
    }

    .form-wrapper {
      margin: 0;
      flex-direction: row;
    }
    .webform-flex {
      padding-right: 1rem;
      border-right: solid 1px var(--accent);

      padding-bottom: 0;
      border-bottom: 0;
    }
  }

  #block-rooms-webform {
    & .webform-flex.guest-list-container {
      &.show.open {
        top: 6rem;
      }
    }
  }
}

.dark,
[data-theme="dark"] {
  #block-rooms-webform {
    .webform-flex.guest-list-container {
      .add-item {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:%23fbbe75;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}</style><line class="st0" x1="50" y1="21.5" x2="50" y2="78.5"/><line class="st0" x1="78.5" y1="50" x2="21.5" y2="50"/></svg>');
      }

      .minus-item {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:%23fbbe75;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}</style><line class="st0" x1="78.5" y1="50" x2="21.5" y2="50"/></svg>');
      }
    }
  }

  .webform-flex.icon-calendar .webform-flex--container:after {
    display: block;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:%23fbbe75;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}</style><rect x="16.2" y="22.7" class="st0" width="67.7" height="67.7"/><line class="st0" x1="16.2" y1="43.9" x2="83.8" y2="43.9"/><line class="st0" x1="32.6" y1="13.8" x2="32.6" y2="32.2"/><line class="st0" x1="68" y1="13.8" x2="68" y2="32.2"/></svg>');
  }

  .webform-flex.icon-arrow-down .webform-flex--container:after {
    display: block;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:%23fbbe75;stroke-width:8;stroke-linecap:round;stroke-miterlimit:10;}</style><g><g><polyline class="st0" points="13,32.1 50.2,69.3 87,32.6 "/></g></g></svg>');
  }
}