@charset "UTF-8";
@font-face {
  font-family: 'TildaSans';
  src: url('../font/TildaSans-Regular.eot');
  src: url('../font/TildaSans-Regular.eot?#iefix') format('embedded-opentype'),
    url('../font/TildaSans-Regular.woff2') format('woff2'),
    url('../font/TildaSans-Regular.woff') format('woff') url('../font/TildaSans-Regular.ttf')
      format('truetype');
  font-weight: 400;
  font-style: normal;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

a {
  text-decoration: none;
  transition: all 0.5s ease;
  color: #ff5000;
}
@media (any-hover: hover) {
  a:hover {
    color: #cc4000;
  }
}

a,
button {
  cursor: pointer;
  border: none;
}

html {
  overflow: hidden auto;
}
html::-webkit-scrollbar {
  width: 10px;
}
html::-webkit-scrollbar-track {
  background-color: #272625;
}
html::-webkit-scrollbar-thumb {
  background-color: #ff5000;
}

body {
  font-family: 'TildaSans', sans-serif;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  min-height: 100vh;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  background-color: #21201e;
  color: #fff;
}

.container,
[class*='__container'] {
  max-width: 1382px;
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}
@media (max-width: 1199px) {
  .container,
  [class*='__container'] {
    max-width: 100%;
    padding: 0 10px;
  }
}

.body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.body footer {
  margin-top: auto;
}

.catalog {
  margin: 70px 0 170px;
}
.catalog h1 {
  text-align: left;
  font-size: 68px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: -2.72px;
}
.catalog__filter {
  display: flex;
  align-items: flex-end;
  gap: 15px;
}
.catalog__empty {
  text-align: center;
  margin-top: 40px;
  font-size: 18px;
  opacity: 0.7;
}
.catalog__category {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  border-bottom: 1px solid rgba(255, 80, 0, 0.2);
}
.catalog__category button {
  background: transparent;
  padding-bottom: 20px;
  color: #ff5000;
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
  opacity: 0.6;
  border-bottom: 2px solid transparent;
}
.catalog__category button.active {
  border-bottom: 2px solid #ff5000;
  opacity: 1;
}
@media (any-hover: hover) {
  .catalog__category button:hover {
    opacity: 1;
  }
}
.catalog__search {
  position: relative;
}
.catalog__search .search__clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #ff5000; /* ← любой цвет */
  font-size: 16px;
  display: none;
}
.catalog__search input {
  min-width: 330px;
  width: 100%;
  background: transparent;
  flex-shrink: 0;
  color: #ff5000;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  box-shadow: none;
  outline: none;
  border: none;
  border-bottom: 1px solid rgba(255, 80, 0, 0.2);
  padding: 20px 0;
  padding-left: 42px;
  padding-right: 29px;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.7239 21.7239C22.2446 21.2032 23.0888 21.2032 23.6095 21.7239L27.6095 25.7239C28.1302 26.2446 28.1302 27.0888 27.6095 27.6095C27.0888 28.1302 26.2446 28.1302 25.7239 27.6095L21.7239 23.6095C21.2032 23.0888 21.2032 22.2446 21.7239 21.7239Z' fill='%23FF5000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.6666 24C19.8213 24 24 19.8213 24 14.6667C24 9.512 19.8213 5.33332 14.6666 5.33332C9.51197 5.33332 5.33329 9.512 5.33329 14.6667C5.33329 19.8213 9.51197 24 14.6666 24ZM26.6666 14.6667C26.6666 21.2941 21.294 26.6667 14.6666 26.6667C8.03921 26.6667 2.66663 21.2941 2.66663 14.6667C2.66663 8.03924 8.03921 2.66666 14.6666 2.66666C21.294 2.66666 26.6666 8.03924 26.6666 14.6667Z' fill='%23FF5000'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: 0px center;
  background-size: 28px 28px;
}
.catalog__search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.catalog__search input::placeholder {
  color: #ff5000;
  opacity: 0.6;
}
.catalog__wrapper {
  display: flex;
  align-items: stretch;
  align-content: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 50px;
}

.card {
  flex: 0 0 calc((100% - 60px) / 4);
  display: flex;
  padding: 20px;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.card__cover {
  align-self: stretch;
  justify-content: center;
  align-items: center;
  display: flex;
}
.card__cover img {
  aspect-ratio: 203/160;
  width: 100%;
  max-height: 160px;
  height: auto;
  object-fit: contain;
}
.card h2 {
  margin: 0;
  align-self: stretch;
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  line-height: normal;
}
.card__content {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.card__content p {
  margin: 3px 0;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 120%;
}
.card__list {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 10px;
}
.card__list div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.card__list div span {
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}
.card__list div span:last-child {
  flex: 1;
  text-align: right;
  color: #ff5000;
  font-size: 14px;
}

@media (max-width: 1199px) {
  .catalog__filter {
    flex-direction: column;
    align-items: flex-start;
  }
  .catalog__category {
    flex: 1 1 auto;
    width: 100%;
  }
  .catalog__search {
    width: 100%;
  }
  .catalog__search input {
    min-width: 100%;
  }
  .catalog__wrapper {
    gap: 15px;
  }
  .card {
    flex: 0 0 calc((100% - 30px) / 3);
  }
}
@media (max-width: 767.8px) {
  .catalog {
    margin: 40px 0 60px;
  }
  .catalog h1 {
    font-size: 48px;
  }
  .catalog__category {
    flex: 1 1 auto;
    width: 100%;
  }
  .catalog__category button {
    font-size: 15px;
    padding-bottom: 10px;
  }
  .card {
    flex: 0 0 100%;
  }
}
.footer {
  margin-top: 60px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.55;
}
.footer__container {
  display: flex;
  border-top: 1px solid rgba(255, 80, 0, 0.2);
  padding-top: 24px;
  padding-bottom: 30px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.footer p {
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
  max-width: 800px;
}

/* Лого агентства */
.footer-bottom__starcev {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-bottom__starcev:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.footer-bottom__starcev img {
  width: auto;
  display: block;
}

/* Адаптив */
@media (max-width: 768px) {
  .footer {
    margin-top: 40px;
    padding: 18px 0 14px;
    font-size: 12px;
  }
  .footer p,
  .footer-bottom__starcev {
    padding: 0 16px;
  }
  .footer-bottom__starcev img {
    height: 22px;
  }
}