/*
 * The filter mobile component.
 *
 * 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.
 */

.filter-mobile {
  inset:0;
  opacity:0;
  overflow:auto;
  position:fixed;
  transform:translateY(101%);
  transition:transform .6s cubic-bezier(.25,.25,0,1);
  z-index:50;
}

.filter-mobile.is-active {
  opacity:1;
  transform:translateY(0);
}

.filter-mobile__inner {
  background-color:#181818;
  color:#fff;
  display:flex;
  flex-direction:column;
  gap:46px;
  height:100%;
  justify-content:space-between;
  overflow:hidden;
  padding:32px;
  position:relative;
  width:100%;
}

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

  .filter-mobile__inner {
    padding:16px;
  }
}

.filter-mobile__container {
  height:100%;
  width:100%;
}

.filter-mobile__heading {
  align-items:center;
  display:flex;
  justify-content:space-between;
  width:100%;
}

.filter-mobile__back-btn,
.filter-mobile__close-btn {
  --size:48px;
  align-items:center;
  background-color:#f1ede4;
  border:1px solid #181818;
  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) {

  .filter-mobile__back-btn:not(:disabled):hover,
  .filter-mobile__close-btn:not(:disabled):hover {
    background-color:#181818;
    color:#fff;
  }
}

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

  .filter-mobile__back-btn,
  .filter-mobile__close-btn {
    --size:40px;
  }
}

.filter-mobile__back-btn svg,
.filter-mobile__close-btn svg {
  --size:12px;
  height:var(--size);
  width:var(--size);
}

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

  .filter-mobile__back-btn svg,
  .filter-mobile__close-btn svg {
    --size:8px;
  }
}

.filter-mobile__filters-container {
  align-items:stretch;
  display:flex;
  flex-direction:column;
  gap:40px;
  margin-top:64px;
  width:100%;
}

.filter-mobile__sections-wrapper {
  display:contents;
}

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

  .filter-mobile__sections-wrapper {
    align-items:center;
    display:flex;
    gap:24px;
    justify-content:space-between;
    width:100%;
  }
}

.filter-mobile__filters-section {
  align-items:flex-start;
  display:flex;
  gap:var(--grid-column-width);
  justify-content:flex-start;
  width:100%;
}

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

  .filter-mobile__filters-section {
    flex-direction:column;
    gap:24px;
  }
}

.filter-mobile__section-title {
  width:calc(var(--grid-column-width)*1.5 + var(--grid-gap)*.5);
}

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

  .filter-mobile__section-title {
    width:-webkit-max-content;
    width:max-content;
  }
}

.filter-mobile__items-container {
  display:grid;
  gap:6px;
  grid-template-columns:repeat(6,1fr);
  margin-left:auto;
  width:calc(var(--grid-column-width)*8.5 + var(--grid-gap)*7.5);
}

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

  .filter-mobile__items-container {
    grid-template-columns:repeat(4,1fr);
    width:100%;
  }
}

.filter-mobile__item {
  align-items:center;
  border:1px solid #fff;
  display:flex;
  height:40px;
  justify-content:center;
  transition:background-color .6s cubic-bezier(.25,.25,0,1),color .6s cubic-bezier(.25,.25,0,1);
}

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

  .filter-mobile__item:not(:disabled):hover {
    background-color:#f1ede4;
    color:#181818;
  }
}

.filter-mobile__item.selected {
  background-color:#f1ede4;
  color:#181818;
}

.filter-mobile__nav {
  margin-left:auto;
  width:calc(var(--grid-column-width)*8.5 + var(--grid-gap)*7.5);
}

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

  .filter-mobile__nav {
    width:100%;
  }
}

.filter-mobile__nav-btn {
  align-items:center;
  border:1px solid #fff;
  display:flex;
  justify-content:space-between;
  padding:16px;
  transition:background-color .6s cubic-bezier(.25,.25,0,1),color .6s cubic-bezier(.25,.25,0,1);
  width:100%;
}

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

  .filter-mobile__nav-btn:not(:disabled):hover {
    background-color:#f1ede4;
    color:#181818;
  }
}

.filter-mobile__nav-btn.selected {
  background-color:#f1ede4;
  color:#181818;
}

.filter-mobile__nav-btn:not(:first-child) {
  border-top:none;
}

.filter-mobile__nav-btn svg {
  transform:rotate(90deg);
}

.filter-mobile__btns-container {
  align-items:center;
  border-top:1px solid #fff;
  display:flex;
  gap:16px;
  justify-content:center;
  padding:32px 0;
}

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

  .filter-mobile__btns-container {
    padding:16px 0;
  }
}

.filter-mobile__btn {
  align-items:center;
  border:1px solid #fff;
  display:flex;
  height:40px;
  justify-content:center;
  transition:background-color .6s cubic-bezier(.25,.25,0,1),color .6s cubic-bezier(.25,.25,0,1);
  width:184px;
}

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

  .filter-mobile__btn:not(:disabled):hover {
    background-color:#f1ede4;
    color:#181818;
  }
}

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

  .filter-mobile__btn {
    flex-grow:1;
    width:auto;
  }
}

.filter-mobile__btn--reset {
  background-color:#f1ede4;
  color:#181818;
}

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

  .filter-mobile__btn--reset:not(:disabled):hover {
    background-color:#181818;
    color:#fff;
  }
}

.filter-mobile__inner--location {
  height:100%;
  inset:0;
  opacity:0;
  overflow-y:auto;
  position:absolute;
  transform:translateX(101%);
  transition:transform .6s cubic-bezier(.25,.25,0,1);
  z-index:70;
}

.filter-mobile__inner--location.is-active {
  opacity:1;
  transform:translateX(0);
}

.filter-mobile__heading-title {
  align-items:center;
  display:flex;
  gap:24px;
}

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

  .filter-mobile__heading-title {
    gap:16px;
  }
}

.filter-mobile__back-btn {
  background-color:#181818;
  border:1px solid #181818;
  color:#fff;
  transition:background-color .6s cubic-bezier(.25,.25,0,1),color .6s cubic-bezier(.25,.25,0,1);
}

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

  .filter-mobile__back-btn:not(:disabled):hover {
    background-color:#f1ede4;
    color:#181818;
  }
}

.filter-mobile__back-btn svg {
  transform:rotate(-90deg);
}

.filter-mobile__items-container--countries {
  flex-grow:1;
  grid-template-columns:repeat(2,1fr);
  width:auto;
}

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

  .filter-mobile__items-container--countries {
    grid-template-columns:repeat(2,1fr);
  }
}

.filter-mobile__item--location {
  transition:background-color .6s cubic-bezier(.25,.25,0,1),color .6s cubic-bezier(.25,.25,0,1);
  width:auto;
}

.filter-mobile__btn--location {
  width:100%;
}

.filter-mobile__item-wrapper:has(input:checked) {
  background-color:#f1ede4;
  color:#181818;
}

.event-filter__input-check:checked+.filter-mobile__item--location:after {
  background-color:#fff;
  color:#181818;
}

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

  .filter-mobile__items-container--cities {
    grid-template-columns:1fr;
  }
}

.filter-mobile__city-group {
  display:grid;
  gap:6px;
  grid-template-columns:repeat(2,1fr);
}