:root {
  --input-width: clamp(200px, 100%, 350px);
  --input-font-size: 1.2rem;
  --input-padding: 0.8rem .6rem;
  --input-height: 50px;
  --input-gap: 1rem;
}

.block:has(> label > input[type="text"]),
.block:has(> label > input[type="tel"]),
.block:has(> label > input[type="number"]),
.block:has(> label > input[type="password"]),
.block:has(> label > input[type="name"]),
.block:has(> label > input[type="email"]),
.block:has(> label > input[type="date"]),
.block:has(> label > input[type="checkbox"]),
.block:has(> label > input[type="radio"]),
.block:has(> label > select),
.block:has(> label > textarea) {
  gap: var(--input-gap);
}

label:has(> input[type="text"]),
label:has(> input[type="tel"]),
label:has(> input[type="number"]),
label:has(> input[type="password"]),
label:has(> input[type="name"]),
label:has(> input[type="email"]),
label:has(> input[type="date"]),
label:has(> select),
label:has(> textarea) {
  width: var(--input-width);
}

input[type="text"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="name"],
input[type="email"],
input[type="date"],
select,
textarea {
  width: 100%;
  height: var(--input-height);
  font-size: var(--input-font-size, 1rem);
  padding: var(--input-padding);
  border: 1px solid #ccc;
}

label:has(#ccode) {
  width: auto;
}

label:has(select.title),
select.title {
  width: auto;
}

[for="return"] {
  padding-top: 1rem;
}

.flight h4,
.hotel h4,
.passenger h4 {
  margin-bottom: 0px;
  margin-top: 20px;
}

.flight h4 .removeflight,
.hotel h4 .removehotel,
.passenger h4 .removepassenger {
  color: red;
  cursor: pointer;
}

.block:has(> #addflight),
.block:has(> #addhotel),
.block:has(#addpassenger) {
  padding-top: 20px;
}

.block:has(> #addflight){
  display: none;
}

.block:has(> #addhotel),
.block:has(> #addflight){
  min-width: 100%;
}

.block:has(> .block_column > #return){  
  display:none;
  min-width: 100%;
}

.block.combinedinput {
  gap: 0 !important;
}

.block.combinedinput label:nth-child(1) select {
  border-right: none;
  padding-right: 0px;
}

.block.combinedinput label:nth-child(2) input {
  border-left: none;
}

.flight,
.hotel,
.passenger {
  min-width: 100% ;
}

.optbox{
  position: absolute;
  min-width: 100px;
  width: clamp(100px,100%,300px);
  background: var(--dark_bgtext);
  border: 1px solid #ccc;
  display: none;
}
.optbox p{
  padding:.1rem .5rem;
  margin: 0;
  display: grid;
  grid-template-columns: clamp(30px,30%,80px) 1fr;
  line-height: 1.3rem;
  font-size: 1rem;
  cursor: pointer;
}
.optbox p :nth-child(3){
  grid-column: 1/-1;
}

.optbox p :nth-child(2),
.optbox p :nth-child(3){
  font-size: .8rem;
}

.optbox p :nth-child(2){
  text-align: right;
}

.optbox p:nth-child(even){
  background: var(--tile_one);
}

.optbox p[hovered]{
  background: var(--colortheme);
  color: var(--dark_bgtext) ;
}

#proceed[disabled]{
  cursor: not-allowed;
  opacity: .7;
}

@media screen and (max-width: 991px) {
  .passenger .block:nth-child(2) {
    flex-wrap: wrap;
  }

  .passenger .block label:nth-child(1):not(.combinedinput label),
  .passenger .block label:nth-child(2):not(.combinedinput label),
  .passenger .block label:nth-child(3):not(.combinedinput label),
  .passenger .block label:nth-child(4):not(.combinedinput label) {
    width: calc(50% - (var(--input-gap) / 2));

  }
}

@media screen and (max-width: 767px) {
  :root {
    --input-width: clamp(200px, 100%, 250px);
    --input-font-size: 1.2rem;
    --input-padding: 0.8rem .6rem;
    --input-height: 50px;
    --input-gap: 1rem;
  }

  .flight .block:nth-child(2) {
    flex-wrap: wrap;
  }

  .flight .block label:nth-child(1),
  .flight .block label:nth-child(2),
  .flight .block label:nth-child(3) {
    width: calc(50% - (var(--input-gap) / 2));
  }

  label:has(> input#return) {
    align-self: flex-start;
  }

  .block:has(> label > input#return) {
    justify-content: flex-end;
    margin-top: calc(-77px + (-1rem));
  }

  .hotel .block:nth-child(2) {
    flex-wrap: wrap;
  }

  .hotel .block label:nth-child(1),
  .hotel .block label:nth-child(2) {
    width: calc(50% - (var(--input-gap) / 2));
    ;
  }

  .hotel .block label:nth-child(3) {
    width: 100%;
  }
}

@media screen and (max-width: 479px) {
  :root {
    --input-gap: .5rem;
    --btnpadding: 3vw ;
  }

  .btnbox {
    display: flex;
    justify-content: space-between;
  }

  label:has(> input[type="text"]),
  label:has(> input[type="tel"]),
  label:has(> input[type="email"]),
  label:has(> select):not(.combinedinput label),
  label:has(> textarea),
  label:has(> input[type="date"]) {
    width: 100% !important;
  }

  label:has(>label > select.title){
    width: 100% !important;
  }

  .block:has(> label > input#return) {
    justify-content: flex-start;
    margin-top: 0;
  }

  .contactinfo {
    flex-wrap: wrap;
  }

  #otherdetails .block:has(> label > input[type="date"]) {
    flex-wrap: wrap;
  }
}