@import './vars.css';

/*Слайдер градиент*/
.catalog-gradient-bg-slider {
  background: linear-gradient(
    270deg,
    rgba(211, 134, 84, 0.8) 0%,
    rgba(211, 134, 84, 0.168) 100%
  );
  border-radius: 24px;
}

/* Breadcrumbs */
.breadcrumbs--active {
  color: var(--secondary);
}

/* Catalog product cards */
.catalog-product-card {
  width: calc(100% / 2 - 8px);
  margin: 0px 4px 16px 4px;
}

@media (min-width: 570px) {
  .catalog-product-card {
    width: calc(100% / 3 - 8px);
  }
}

@media (min-width: 744px) {
  .catalog-product-card {
    width: calc(100% / 4 - 16px);
    margin: 0px 8px 24px 8px;
  }
}

@media (min-width: 1024px) {
  .catalog-product-card {
    width: calc(100% / 4 - 16px);
  }
}

@media (min-width: 1200px) {
  .catalog-product-card {
    width: calc(100% / 7 - 16px);
  }
}

/* Catalog link to category */
.link-to-category {
  position: relative;
  padding-right: 25px;
}

.link-to-category::after {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  transform: rotate(-135deg);
  transform-origin: 3px 6px;
  border-left: 1px solid;
  border-bottom: 1px solid;
  border-color: var(--base-blue);
  transition: transform 0.3s ease, border-color 0.3s ease;
  position: absolute;
  top: 7px;
  right: 8px;
}

/* Catalog search input */
.catalog_search_input {
  color: var(--secondary);
  border: var(--line-primary) solid 1px;
  border-radius: 10px;
  padding-left: 12px;
  display: flex;
}

.catalog_search_input::-webkit-input-placeholder {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
}

/* Catalog filters products */
.filter-catalog-btn {
  border-radius: 10px;
  line-height: 22px;
  position: relative;
  padding: 7px 11px;
}

.filter-catalog-dropdown {
  border-radius: 10px;
  line-height: 22px;
  position: relative;
  padding: 7px 32px 7px 9px;
}

.filter-catalog-dropdown::after {
  content: url('../images/icons/arrowDownSelect.svg');
  display: block;
  width: 14px;
  height: 14px;
  /*transform-origin: 3px 6px;*/
  border-color: #b9b9c1;
  transition: transform 0.3s ease, border-color 0.3s ease;
  position: absolute;
  /*top: 12px;*/
  right: 12px;
}

.filter-catalog-dropdown.activeDropDown::after {
  transform: rotate(180deg);
  transform-origin: 7px 7px;
}

.catalog-filter-tag {
  background-color: var(--base);
  font-size: 14px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  color: white;
  border-radius: 1000px;
  height: 38px;
  flex-shrink: 0;
}

.dropdown-content {
  transition: all 0.3s ease;
}

.dropdown-content::before {
  content: '';
  display: none;
  width: 30px;
  height: 30px;
  transform: rotate(-45deg);
  background-color: #fff;
  border-radius: 5px;
  position: absolute;
  top: -10px;
}

.dropdown-content__catalog-item {
  cursor: pointer;
  position: relative;
}

.dropdown-content__catalog-item.has-child::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  transform: rotate(-135deg);
  border-left: 2px solid;
  border-bottom: 2px solid;
  border-color: #b9b9c1;
  transition: transform 0.3s ease, border-color 0.3s ease;
  position: absolute;
  top: 5px;
  right: 15px;
}

.dropdown-content__catalog-item:hover {
  color: var(--black);
}

.dropdown-content.active {
  display: block;
}

.m-сd-content_main.active {
  border-right: #e5e7eb solid 1px;
  margin-right: 8px;
}

/* FILTERS MODALS */
.category_filter .category_filter-item {
  padding: 8px 24px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s all;
  position: relative;
}

.category_filter .category_filter-item:hover {
  background-color: #f4f8ff;
}

.category_filter .category_filter-item.active {
  background-color: #f4f8ff;
  color: var(--base-blue);
  padding: 8px 12px;
}

.category_filter .category_filter-item.main-category::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  transform-origin: 3px 6px;
  border-left: 1px solid;
  border-bottom: 1px solid;
  border-color: var(--secondary);
  transition: transform 0.3s ease, border-color 0.3s ease;
  position: absolute;
  top: 12px;
  left: 6px;
}

.limiter {
  overflow: hidden;
  position: relative;
  margin-bottom: 10px;
}

.limiter .bottom {
  position: absolute;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgb(255 217 29 / 0%),
    rgb(255 255 255) 85%
  );
  width: 100%;
  height: 50px;
  opacity: 1;
  transition: 0.3s;
}

[data-more-checker^='read-more'] {
  opacity: 0;
  position: absolute;
}

[data-more-checker^='read-more']:checked ~ .limiter {
  max-height: 360px;
  overflow-y: auto;
}

[data-more-checker^='read-more']:checked ~ .catalog_search_input {
  display: flex;
}

input:valid ~ .input-icons .shape {
  display: block;
}

input {
  color: black !important;
}

[data-more-checker^='read-more']:checked ~ .limiter .bottom {
  opacity: 0;
  transition: 0.3s;
}

[data-more-checker^='read-more-catalog'] ~ .read-more-button:before {
  content: 'Показать все';
  color: var(--base-blue);
  cursor: pointer;
  line-height: 22px;
}

[data-more-checker^='read-more-catalog']:checked ~ .read-more-button:before {
  content: 'Скрыть';
}

.select-item {
  padding: 12px;
  cursor: pointer;
  border-radius: 12px;
  list-style: none;
}

.select-item:hover {
  background-color: var(--blue25);
  color: var(--base-blue);
}

.catalog-banner-prev,
.catalog-banner-next {
  box-shadow: 0px 4px 70px 0px rgba(13, 12, 26, 0.3);
}

.expert-commision {
  background: #3f8bff;
  color: #fff;
  border-color: #3f8bff;
}

.expert-commision > .active-filters-count {
  background: #fff !important;
  color: #3f8bff !important;
}

.expert-commision.filter-catalog-dropdown:hover {
  color: #fff;
  border-color: #3f8bff;
}

.expert-commision.filter-catalog-dropdown::after {
  content: url('../images/icons/arrowDownSelectWhite.svg');
}