/*
Содержание:
1. Стили верхней части
2. Стили нижней части
*/





.top-logo {
  max-height: 30px;
}

.top-menu-btn-cont {
  width: auto;
}

.btn-acc-cont {
  position: relative;
  padding: 5px;
  border: solid 1.5px var(--gray215);
  border-radius: var(--btn-border-radius);
}

.uspr-user-pic {
  width: 35px;
  height: 35px;
  border: solid 1.5px var(--gray215);
  border-radius: var(--btn-border-radius);
  object-fit: cover; /* Масштабируем изображение, сохраняя соотношение сторон */
}

/* Нижняя часть */
.footer-content {
  width: 100%;
  height: auto;
  padding: 10px 0px;
  background-color: var(--gray215);
}

.footer-cont {
  width: var(--page-width);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
/*
Содержание:
1. Стили стартовой страницы
*/

.cont-cat-choice,
.cont-type-choice {
  margin-bottom: 10px;
  gap: 10px;
  justify-content: space-between; /* Переопределяем flex-row-right */
  align-items: flex-start; /* Выравнивание по верхнему краю */
}

.cont-cat-choice-1,
.cont-type-choice-1 {
  gap: 5px; /* Отступ между кнопками */
  row-gap: 5px; /* Отступ между рядами */
  flex: 1; /* Занимаем всё доступное пространство */
  overflow: visible; /* Убираем скрытие для JS управления */
  display: flex;
  flex-wrap: nowrap; /* Запрещаем перенос по умолчанию */
  justify-content: flex-start; /* Выравнивание кнопок слева */
}

.cont-cat-choice-1.expanded,
.cont-type-choice-1.expanded {
  flex-wrap: wrap; /* Разрешаем перенос при раскрытии */
}

/* кнопки категорий и типов */
.btn-cat {
  width: auto;
  height: 30px;
  border: 0.5px solid var(--gray185);
  border-radius: var(--btn-border-radius);
  text-align: left;
  white-space: nowrap; /* Запрещаем перенос текста */
  transition: opacity 0.2s ease;
}

.btn-type {
  width: auto;
  height: 30px;
  border: 0.5px solid var(--gray185);
  border-radius: var(--btn-border-radius);
  background-color: var(--gray215);
  text-align: left;
  white-space: nowrap; /* Запрещаем перенос текста */
  transition: opacity 0.2s ease;
}

/* Скрытые кнопки */
.btn-cat.hidden-overflow,
.btn-type.hidden-overflow {
  display: none;
}

.btn-cat:hover,
.btn-type:hover {
  background-color: var(--brand);
}

/* контейнер недавно добавленных объявлений */
.cont-recent-ads {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 равных столбцов */
  gap: 20px;
}

/* контейнер рекомендованных объявлений */
.cont-recom-ads {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 равных столбцов */
  gap: 20px;
}

/* секции */
.mini-ad-card {
  display: flex;
  flex-direction: column; /* Располагаем картинку сверху, текст снизу */
  border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
  overflow: hidden;
  cursor: pointer;
  height: 100%; /* Занимает всю доступную высоту в grid */
}

.mini-ad-card img {
  width: 100%;
  aspect-ratio: 1 / 1; /* Картинка всегда квадратная */
  object-fit: cover; /* Картинка масштабируется, сохраняя пропорции */
  border: 0.5px solid var(--gray185);
  border-radius: var(--card-border-radius);
}

.mini-ad-card-text-cont {
  padding: 10px 0 0 0;
  min-height: 100px; /* Минимальная высота для работы justify-content: space-between */
  flex: 1; /* Занимает всю доступную высоту контейнера */
}

/*
Содержание:
1. Стили страницы просмотра объявлений
*/

.page-ads-list-left {
  min-width: 200px;
  width: 250px;
  height: 100%;
  margin: 0 10px 0 0;
}

.filter-sect {
  height: 100%;
  position: sticky; /* Липкое положение */
  top: 0; /* Прикрепить к верхнему краю при скроллинге */
  left: 0;
}

.page-ads-list-right {
  width: 100%;
}

/* блок информации о найденных объявлениях и страницах */
.cont-ads-summ {
  height: 50px;
  margin-bottom: 10px;
}

/* Стили для фильтров на стартовой странице */
.start-page-filters-container {
  display: flex;
  justify-content: center;
  margin: 30px 0;
  padding: 20px 0;
}

.start-page-filters {
  gap: 20px;
  justify-content: center;
  max-width: 800px;
  width: 100%;
  align-items: end;
}

.start-page-filters.flex-row {
  align-items: end;
}

.start-page-filters .filter-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 150px;
}

.start-page-filters .filter-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
  text-align: center;
}

.start-page-filters .select-filter {
  width: 100%;
  min-width: 150px;
}

.start-page-filters .btn {
  min-width: 120px;
  height: 40px;
  margin-top: 0;
}

.cont-pages button {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid var(--gray185);
  background-color: var(--white);
  cursor: pointer;
}

.cont-pages button.active {
  background-color: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}

.cont-pages button:disabled {
  background-color: var(--gray235);
  cursor: not-allowed;
}

.cont-sort-filt-labels {
  width: 100%;
  padding-bottom: 10px;
}

.cont-filt-labels {
  width: 100%;
  height: auto;
  margin-left: 5px;
  gap: 5px;
}

.cont-filt-delete {
  width: 75px;
  border-left: solid 0.1px var(--gray-text);
}

.ads-wrapper {
  height: 100%;
  width: 100%;
}


.clear-filter {
  width: 25px;
  height: auto;
}

.clear-filter:hover {
  transform: scale(1.1);
}

.clear-filter:active {
  transform: scale(1.05);
}

/* filters */
label {
  cursor: pointer;
  font-size: var(--filters-font-size);
}

/* filter labels */
.filt-label {
  width: auto;
  height: 30px;
  background-color: var(--brand);
  border-radius: var(--btn-border-radius);
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}