/*
 * The search heading section.
 *
 * Edit this file. It is served as it is — nothing compiles it, and the
 * order it loads in is set in resources/css/order.php.
 */

.search-heading {
  align-items:center;
  border-bottom:1px solid #181818;
  display:flex;
  gap:32px;
  justify-content:space-between;
  margin-inline:var(--offset-x);
  margin-top:120px;
  padding-bottom:32px;
}

@media screen and (max-width:1440px) {

  .search-heading {
    gap:24px;
    margin-top:80px;
    padding-bottom:20px;
  }
}

@media screen and (max-width:1199px) {

  .search-heading {
    margin-top:44px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .search-heading {
    gap:12px;
    margin-top:39px;
    padding-bottom:12px;
  }
}

.search-heading__input {
  flex-grow:1;
}

.search-heading__input,
input.search__input {
  caret-color:#e1251b;
  color:#181818;
}

input.search__input:-webkit-autofill,
input.search__input:-webkit-autofill:focus,
input.search__input:-webkit-autofill:hover {
  -webkit-text-fill-color:#181818;
  -webkit-box-shadow:inset 0 0 0 1000px #fff;
  caret-color:#e1251b;
  color:#181818;
  -webkit-transition:background-color 5000s ease-in-out 0s;
  transition:background-color 5000s ease-in-out 0s;
}

.search__input {
  border:none;
  outline:none;
  width:100%;
}

.search-heading__btns-container {
  align-items:center;
  display:flex;
  flex-shrink:0;
}

.search-heading__reset-btn {
  --size:48px;
  align-items:center;
  border:1px solid #ccc;
  color:#181818;
  display:flex;
  height:var(--size);
  justify-content:center;
  transition:background-color .6s cubic-bezier(.25,.25,0,1),color .6s cubic-bezier(.25,.25,0,1);
  width:var(--size);
}

@media(any-hover:hover),(hover:hover)and (pointer:fine) {

  .search-heading__reset-btn:not(:disabled):hover {
    background-color:#181818;
    border-color:#fff;
    color:#fff;
  }
}

@media screen and (max-width:1199px) {

  .search-heading__reset-btn {
    --size:48px;
  }
}

@media screen and (max-width:1440px) {

  .search-heading__reset-btn {
    --size:32px;
  }
}

.search-heading__reset-btn svg {
  --size:12px;
  height:var(--size);
  width:var(--size);
}

@media screen and (max-width:1440px) {

  .search-heading__reset-btn svg {
    --size:8px;
  }
}

.search-heading__apply-btn {
  align-items:center;
  background-color:#e1251b;
  color:#fff;
  display:flex;
  height:48px;
  justify-content:center;
  transition:background-color .6s cubic-bezier(.25,.25,0,1);
  width:calc(var(--grid-column-width)*1.75 + var(--grid-gap)*.75);
}

@media(any-hover:hover),(hover:hover)and (pointer:fine) {

  .search-heading__apply-btn:not(:disabled):hover {
    background-color:#181818;
  }
}

@media screen and (max-width:1440px) {

  .search-heading__apply-btn {
    height:32px;
  }
}

@media screen and (max-width:1199px) {

  .search-heading__apply-btn {
    display:none;
  }
}