.vouchersHeader {
  display: flex;
  gap: var(--Spacing-x-one-and-half);
}

.checkbox {
  width: 24px;
  height: 24px;
}
.icon {
  display: none;
}

.where,
.rooms,
.when {
  position: relative;
}

.buttonContainer {
  display: grid;
  gap: var(--Spacing-x1);
}

.showOnTablet {
  display: none;
}

.label {
  color: var(--Text-Accent-Primary);
}

@media screen and (max-width: 767px) {
  .voucherContainer {
    padding: var(--Spacing-x2) 0 var(--Spacing-x4);
  }
}

@media screen and (max-width: 1366px) {
  .inputContainer {
    display: grid;
    gap: var(--Spacing-x2);
  }

  .rooms,
  .when,
  .where {
    background-color: var(--Base-Background-Primary-Normal);
    border-radius: var(--Corner-radius-md);
  }

  .rooms,
  .when {
    padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
  }

  .button {
    align-self: flex-end;
    justify-content: center;
    width: 100%;
  }

  .rooms {
    height: 60px;
  }
}
.voucherContainer {
  height: fit-content;
}

.input {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 768px) {
  .input {
    display: flex;
    align-items: center;
    flex-direction: row;
  }
  .inputContainer {
    display: flex;
    flex: 2;
    gap: var(--Spacing-x2);
  }
  .voucherContainer {
    flex: 1;
  }

  .rooms,
  .when,
  .where {
    width: 100%;
  }

  .inputContainer input[type="text"] {
    border: none;
    height: 24px;
  }

  .rooms,
  .when {
    padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
    border-radius: var(--Corner-radius-sm);
  }

  .when:hover,
  .rooms:hover,
  .when:has([data-isopen="true"]),
  .rooms:has([data-focused="true"], [data-pressed="true"]) {
    background-color: var(--Base-Surface-Primary-light-Hover-alt);
  }

  .where {
    position: relative;
  }

  .button {
    justify-content: center;
    width: 118px;
  }

  .showOnMobile {
    display: none;
  }
}

.buttonContainer {
  margin-top: auto;
  @media screen and (min-width: 768px) {
    margin-top: 0;
  }
}

@media screen and (min-width: 768px) and (max-width: 1366px) {
  .input {
    flex-wrap: wrap;
  }
  .inputContainer {
    padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x2)
      var(--Layout-Tablet-Margin-Margin-min);
    flex-basis: 80%;
  }
  .buttonContainer {
    padding-right: var(--Layout-Tablet-Margin-Margin-min);
    margin: 0;
  }
  .input .buttonContainer .button {
    padding: var(--Spacing-x1);
    width: 48px;
    height: 48px;
  }
  .buttonText {
    display: none;
  }
  .icon {
    display: flex;
  }

  .voucherRow {
    display: flex;
    background: var(--Base-Surface-Primary-light-Hover);
    border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
    padding: var(--Spacing-x2) var(--Layout-Tablet-Margin-Margin-min);
  }

  .showOnTablet {
    display: flex;
  }
  .hideOnTablet {
    display: none;
  }
}

@media screen and (min-width: 1367px) {
  .input {
    gap: var(--Spacing-x2);
  }
}
