*,
*::after,
*::before {
  outline: none;
}

:root {
  --color-primary: 96 3 13;
  --color-secondary: 27 0 3;
  --color-third: 56 56 56;
  --color-forth: 172 172 172;
  --color-border: 224 224 224;
  --color-action: 249 240 232;
  --color-background: 250 247 246;
  --color-title: 10 15 26;
  --color-content: 130 130 130;
  --color-menu: 16 18 20;
  --color-error: 221 0 0;
  --color-white: 255 255 255;
  --color-black: 0 0 0;
  --color-label: 30 30 30;
  --color-footer: 130 130 130;
  --color-warn: 255 187 64;
  --color-footer-content: 210 210 210;
  --radius: 20px;
  --color-primary-active: 59 2 11;
  --color-primary-hover: 96 3 13;
  --color-link: 162 162 162;
}

[data-type="title"] {
  position: relative;
  padding-bottom: 4px;
}

[data-type="title"]::before {
  position: absolute;
  content: "";
  width: 25px;
  height: 3px;
  background-color: rgb(var(--color-primary));
  top: 100%;
  border-radius: var(--radius);
}

html,
body {
  font-family: "App font";
  font-style: normal;
  font-weight: 400;
  background-color: rgb(var(--color-background));
  scroll-behavior: smooth;
}

.grid-wrapper {
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.search-box,
.search-box:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

input[data-name="cinema-time"]:disabled + label::after {
  content: attr(data-title);
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  background-color: #ffffff;
  color: rgb(var(--color-content));
  padding: 8px 10px;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0px 4px 75px #00000021;
  display: none;
}

input[data-name="cinema-time"]:disabled + label::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 5px);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  -webkit-transform: translateX(-50%) rotate(45deg);
  -moz-transform: translateX(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) rotate(45deg);
  -o-transform: translateX(-50%) rotate(45deg);
  background-color: #ffffff;
  width: 10px;
  height: 10px;
  border-radius: 8px;
  box-shadow: 0px 4px 75px #00000021;
  display: none;
}

.swiper-slide-prev p {
  visibility: hidden;
}

:is(a, button, input[type="submit"]) {
  transition: 0.2s ease-in-out;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
}

:is(a, button, input[type="submit"]):not(:disabled).bg-primary:active,
:is(a, button, input[type="submit"]):not(:disabled).bg-primary:focus,
:is(a, button, input[type="submit"]):not(:disabled).bg-primary:hover {
  background-color: rgb(var(--color-primary-active));
}

:is(a, button, input[type="submit"]):not(:disabled).border-primary:active,
:is(a, button, input[type="submit"]):not(:disabled).border-primary:focus,
:is(a, button, input[type="submit"]):not(:disabled).border-primary:hover {
  background-color: rgb(var(--color-primary-hover));
  color: white !important;
}

:is(a, button, input[type="submit"]):not(:disabled).border-white:hover,
:is(a, button, input[type="submit"]):not(:disabled).bg-white:hover,
:is(a, button, input[type="submit"]):not(:disabled).border-menu-color:hover,
:is(a, button, input[type="submit"]):not(:disabled).bg-menu-color:hover {
  background-color: rgb(var(--color-primary-hover));
  border-color: rgb(var(--color-primary-hover));
  color: white !important;
}

:is(a, button, input[type="submit"]):not(:disabled).border-white:active,
:is(a, button, input[type="submit"]):not(:disabled).border-white:focus,
:is(a, button, input[type="submit"]):not(:disabled).bg-white:active,
:is(a, button, input[type="submit"]):not(:disabled).border-menu-color:focus,
:is(a, button, input[type="submit"]):not(:disabled).bg-menu-color:active,
:is(a, button, input[type="submit"]):not(:disabled).bg-white:focus {
  background-color: rgb(var(--color-primary-active));
  border-color: rgb(var(--color-primary-active));
  color: white !important;
}

.swiper-slide .group {
  position: relative;
}

/* .swiper-wrapper {
  padding: 4px;
} */

/* .swiper-slide .group {} */
.swiper-slide.swiper-slide-active .group::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0px;
  border: 2px solid #cc8e57;
  border-radius: var(--radius);
  pointer-events: none;
}

[data-name="menu-box"] {
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
}

[dir="rtl"] [data-name="menu-box"] {
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: rgb(var(--color-background));
}

::-webkit-scrollbar-thumb {
  background: rgb(var(--color-primary));
  transition: background 0.5s ease-out;
  -webkit-transition: background 0.5s ease-out;
  -moz-transition: background 0.5s ease-out;
  -ms-transition: background 0.5s ease-out;
  -o-transition: background 0.5s ease-out;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--color-primary-active));
}

.ticker-animated {
  animation: ticker 45s infinite linear;
  -webkit-animation: ticker 45s infinite linear;
  -moz-animation: ticker 45s infinite linear;
  -ms-animation: ticker 45s infinite linear;
  -o-animation: ticker 45s infinite linear;
  line-height: 0.4vw;
}

.mask {
  mask-image: linear-gradient(
    to right,
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 5%,
    hsl(0 0% 0% / 1) 95%,
    hsl(0 0% 0% / 0)
  );

  -webkit-mask-image: linear-gradient(
    to right,
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 5%,
    hsl(0 0% 0% / 1) 95%,
    hsl(0 0% 0% / 0)
  );
}

.ticker-animated:hover {
  animation-play-state: paused;
  cursor: pointer;
}

@keyframes ticker {
  0% {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
  }
}

@-webkit-keyframes ticker {
  0% {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
  }
}

@-moz-keyframes ticker {
  0% {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
  }
}

@-ms-keyframes ticker {
  0% {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
  }
}

@-o-keyframes ticker {
  0% {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
  }
}