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

:root {
  --color-primary: 253 207 11;
  --color-secondary: 247 150 33;
  --color-third: 15 117 188;
  --color-background: 245 245 245;
  --color-title: 17 17 17;
  --color-content: 56 60 62;
  --color-red: 255 0 0;
  /*--color-border: 238 240 241;*/
  --color-border: 13 8 8;
}

html,
body {
  font-family: "App font";
  font-style: normal;
  font-weight: 400;
  background-color: #ffffff;
  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-secondary));
}