/* @import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap');

*,*::before,*::after {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}
html,body {
    height: 100%;
    font-family: "Roboto Condensed", "Roboto", Arial, "Helvetica Neue", Helvetica, sans-serif;
    /* overflow-y: scroll; */
    scroll-behavior: smooth;
}

.container {
    max-width: 1000px;
    margin: 0px auto;
    padding: 0px 10px;
}

h1 {
  font-size: 16px;
  font-family: "Roboto", Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #0c0013;
  font-weight: 500;
  font-size: clamp(22px, 2vw, 50px);
  text-shadow: 1px 1px 4px #000000;
  letter-spacing: clamp(1px, 1vw, 4px);
  text-align: center;
}

main {
  background-color: #FFFBF0;
  padding-top: 0.2vh;
}

.client-h1 {
  color: #0c0013;
  font-size: clamp(22px, 2vw, 50px);
  font-weight: 600;
  letter-spacing: clamp(1px, 1vw, 4px);
  margin-bottom: 20px;
  text-transform: uppercase;
  text-shadow: 1px 1px 4px #000000;
}

.client-h2 {
  color: #0c0013;
  font-size: clamp(16px, 2vw, 26px);
  font-weight: 400;
  letter-spacing: clamp(1px, 1vw, 3px);
  margin-bottom: 20px;
  text-shadow: 1px 1px 4px #000000;
}

.client-h3 {
  color: #0c0013;
  font-size: clamp(14px, 2vw, 24px);
  font-weight: 400;
  letter-spacing: clamp(1px, 1vw, 3px);
  margin-bottom: 20px;
  text-shadow: 1px 1px 4px #000000;
}

.brand {
  color: #000000;
  font-size: clamp(16px, 2vw, 16px);  
}

.location {
  color: #000000;
  font-size: clamp(14px, 2vw, 14px);
}

@media (max-width: 767px){
    body.lock{
        overflow: hidden;
    }

    main {
      padding-top: 1vh;
    }

    h1 {
      display: block;
    }

    .category__link {
      color: #fff;
      text-transform: uppercase;
      font-size: 16px;
      text-decoration: none;
      white-space: nowrap;
    }
}

.container-fluid {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  border: none;
  border-radius: 20px;
  background: #FFFBF0; /* Фон должен быть немного светлее */
  box-shadow: 
    6px 6px 12px rgba(0, 0, 0, 0.2),
    -6px -6px 12px rgba(255, 255, 255, 0.7);
  box-shadow: 
    3px 3px 6px #b8b9be, 
    -3px -3px 6px #fff;
}


.card-body {
  height: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 3%;
}
.card-body {
background-color: #FFFBF0;
}
.category-body {
  height: 20vh;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-body {
  height: 15vh;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-description {
  color: #74016a;
  font-size: clamp(18px,2vw, 20px);
}

.description-index-h1 {
  color: #ffffff;
  font-size: clamp(18px,2vw, 20px);
  text-shadow: 2px 2px 4px #000000;
}

.description-index-h2 {
  color: #eeeeee;
  font-size: clamp(18px,2vw, 20px);
  text-shadow: 3px 3px 4px #000000;
}

.description-h1 {
  color: #000000;
  font-size: clamp(18px,2vw, 20px);
  text-shadow: 1px 1px 4px #000000;
}

.description-h2 {
  color: #000000;
  font-size: clamp(18px,2vw, 20px);
  text-shadow: 1px 1px 2px #000000;
}

.card-name-feed {
  color: #130011;
  height: 46px;
  font-size: clamp(15px,2vw, 16px);
  font-weight: 600;
  text-shadow: 2px 2px 5px rgba(22, 0, 20, 0.3), 
               -2px -2px 5px rgba(255, 255, 255, 0.8);
}

.text-price {
  color: rgb(181, 41, 220);
}

.card-description {
  color: #160014;
  font-size: clamp(13px, 2vw, 14px);
  height: 170px;
  overflow-y: scroll;
  scroll-behavior: smooth;
  text-shadow: 2px 2px 5px rgba(22, 0, 20, 0.3), 
               -2px -2px 5px rgba(255, 255, 255, 0.8);
    &::-webkit-scrollbar {
    width: 4px; /* ширина скроллбара */
    }
    
    &::-webkit-scrollbar-track {
    background: #ffffff; /* цвет фона скроллбара */
    }
    
    &::-webkit-scrollbar-thumb {
    background: #888; /* цвет ползунка скроллбара */
    }
    
    &::-webkit-scrollbar-thumb:hover {
    background: #555; /* изменение цвета ползунка при наведении */
    }
}

.card-description-feed {
  color: #160014;
  font-size: clamp(14px, 2vw, 14px);
  height: 170px;
  overflow-y: scroll;
  scroll-behavior: smooth;
  text-shadow: 2px 2px 5px rgba(22, 0, 20, 0.3), 
               -2px -2px 5px rgba(255, 255, 255, 0.8);
    &::-webkit-scrollbar {
    width: 4px; /* ширина скроллбара */
    }
    
    &::-webkit-scrollbar-track {
    background: #ffffff; /* цвет фона скроллбара */
    }
    
    &::-webkit-scrollbar-thumb {
    background: #888; /* цвет ползунка скроллбара */
    }
    
    &::-webkit-scrollbar-thumb:hover {
    background: #555; /* изменение цвета ползунка при наведении */
    }
}

.row {
  width: 100%;
  height: 100%;
}

.wrapper {  
  background-color: #FFFBF0;
  border-radius: 10px;
}

.swiper {
  display: flex;
  height: auto;
  margin: 0 auto;
  width: 100%;
  border-radius: 20px;
}

.swiper-text {
  text-align: left;
  margin: 25px auto;
  max-width: 450px;
  display: flex;
  padding: 1px;
  padding-left: 10px;
  margin-top: 10px;
  background-color: #ffffff;
}

.swiper-wrapper {
  box-sizing: content-box;
  flex: 1 1 auto;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 1 / 1.4;
  position: relative;
  overflow: hidden;
  background-color: white;
}

.swiper-slide.feed {
  height: 68vh;
}

.swiper-slide img,
.swiper-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.swiper-button-prev {
  background-color: #bb8b5f00;
  left: 20px;
}

.swiper-button-next {
  background-color: #48971b00;
  right: 20px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  color: #ff8c88;
  font-size: 20px;
}

.swiper-pagination-bullet {
  background-color: transparent;
  width: 9px;
  height: 9px;
  opacity: 1;
  border-radius: 50%;
  border: 1px solid #ffffff;
}

.swiper-pagination-bullet-active {
  background-color: #ff8c88;
}

.scroll-button {
  text-align: left;
  margin: auto;
  max-width: 450px;
  padding-left: 10px;
}

.scroll-btn {
  cursor: pointer;
  text-decoration: none;
}

footer {
  justify-content: center;
  font-size: smaller;
  color: rgb(0, 0, 0);
  text-align: center;
  padding-bottom: 50px;
  width: 100%;
}

.brand_text, .location_text {
  color: #333; /* Цвет текста */
  text-shadow: 2px 2px 5px rgba(22, 0, 20, 0.3), 
              -2px -2px 5px rgba(255, 255, 255, 0.8);
  }

  .card-name {
  color: #130011;
  height: 46px;
  font-size: clamp(14px,2vw, 16px);
  font-weight: 600;
  text-shadow: 2px 2px 5px rgba(22, 0, 20, 0.3), 
               -2px -2px 5px rgba(255, 255, 255, 0.8);
}

.card-name {
    /* Чтобы иконка и цена могли располагаться рядом */
    display: flex; 
    align-items: center;
    justify-content: space-between; /* Распределяем содержимое по ширине */
}

.card-name .card-action-icon {
    /* Стили для кликабельной области */
    cursor: pointer;
    color: #8B6B4D; /* Цвет для привлечения внимания, например, синий */
    margin-left: 5px;
    padding: 5px; /* Увеличиваем кликабельную область */
    transition: color 0.2s;
    /* Убедимся, что иконка не ломает строку, если .card-name станет flex-контейнером */
    flex-shrink: 0; 
}

.card-name .card-action-icon:hover {
    color: #8B6B4D;
}

.card-name .brand_text {
    /* Если .card-name теперь flex, возможно, потребуется скорректировать размер текста */
    flex-grow: 1; 
    margin-right: 5px; /* Отступ от иконки */
}

/* 1. Делаем контейнер .card-name Flex-контейнером */
.card-name {
    display: flex; /* Активируем Flexbox */
    align-items: center; /* Выравниваем элементы по вертикали (по центру) */
    justify-content: space-between; /* <-- КЛЮЧЕВОЕ СВОЙСТВО: Разделяет крайние элементы */
    padding-right: 5px; /* Убираем небольшой отступ от правого края, если нужен */
}

/* 2. Стиль для группы текста/цены */
.card-name .card-info-group {
    /* Эта группа занимает столько места, сколько нужно */
    flex-grow: 1; 
    text-align: left;
    flex-grow: 1;
    min-width: 0;
}

/* 3. Стиль для самой иконки (Прибита Flexbox, остается только отступ) */
.card-name .card-action-icon {
    /* Остальные стили для кликабельной области */
    cursor: pointer;
    color: #8B6B4D; 
    padding: 5px; 
    transition: color 0.2s;
    
    /* Убеждаемся, что она не сжимается */
    flex-shrink: 0; 
    
    /* Добавляем маленький отступ справа (если нужно, чтобы не прилипал к границе .card) */
    /* Так как мы уже добавили padding-right к .card-name, тут это может не понадобиться, но можно использовать margin: */
    /* margin-left: auto; */ /* Не нужен, т.к. используется justify-content: space-between */
    margin-right: -5px; /* НЕБОЛЬШОЙ ОТСТУП справа, если нужен */
}

.card-name .card-action-icon:hover {
    color: #8B6B4D;
}

.card-name .card-action-icon i {
    /* Уменьшаем размер шрифта, который определяет размер иконки Font Awesome */
    font-size: 0.85em; /* Можно использовать px (например, 14px) или em/rem */
    /* 0.85em сделает иконку на 15% меньше стандартного размера текста */
    
    /* Дополнительно: можно сдвинуть немного вверх/вниз для идеального центрирования */
    vertical-align: middle; 
}

.row .card-item {
    transition: all 0.9s ease-in-out; /* Плавное изменение размера */
}

body.no-scroll {
    overflow: hidden; 
    /* Скрывает полосу прокрутки */
    /* Ширина скроллбара обычно 17px, но может варьироваться. 
       Это значение нужно подобрать или рассчитать, но 17px — стандартная практика. */
    /* padding-right: 15px;  */
}

/* @media (min-width: 768px) {
    body.no-scroll {
        padding-right: 17px; 
    }
} */