@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');


.custom-title-show-ads {
  font-size: 25px;       /* или 1.875rem */
  font-weight: 700;
  margin-bottom: 1.5rem; /* 24px */
   color: #333;             /* Цвет, если нужно */
}

@media (max-width: 768px) {
  .custom-title-show-ads {
    font-size: 23px;
  }
}
.darken-on-hover {
    transition: filter 0.2s ease;
}
.darken-on-hover:hover {
    filter: brightness(90%);
}


header {
  /* Новый шрифт + общие настройки */
  font-family: 'Inter', sans-serif;

  background-color: #152333;
  color: #fff;
  
  /* Если хотите чуть уменьшить/убрать отступы */
  padding: 0.5rem 0;
}


header a {
  /* Чтобы ссылки были того же цвета, без подчеркивания */
  color: #fff;
  text-decoration: none;
  transition: color 0.2s;
}
header a:hover {
  text-decoration: underline;
  color: #eee; /* или #0094e6, если хотите акцент */
}

/* Заголовок/logo, если нужно чуть больше шрифт/полужирный */
header #logo a {
  font-weight: 600;
  font-size: 1.25rem; /* пример, подберите нужный */
}

/* Кнопка */
header .btn-primary {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  /* Уберите фикс. ширину/высоту, используйте отступы */
  width: auto;
  height: auto;
  padding: 5px 15px;
  background: #0af;
  color: #fff;
  border-radius:.25rem;
  border: 0;
  transition: background 0.3s ease;
   margin-left: 10px; 
   margin-top: 0; 
   margin-bottom: 0;
}
header .btn-primary:hover {
  background: #0094e6;
}

/* ======================
   Header (merged styles)
   ====================== */
.hoverable-link,
.header-icon-link,
.header-text-link,
.user-name-link { color:#fff; text-decoration:none; transition: color .2s, background-color .2s; }
.hoverable-link:hover,
.header-icon-link:hover,
.header-text-link:hover,
.user-name-link:hover { color:#fff; background-color: rgba(255,255,255,0.1); border-radius:4px; text-decoration:none; }
.header-icon-link { font-size:1.3rem; display:inline-flex; align-items:center; margin-right:0; }
.header-text-link { font-size:.95rem; }
.header-message-badge { position:absolute; top:-4px; right:-4px; font-size:.6rem; display:none; background-color:#ff4053; color:#fff; }
.user-menu-hover { position:relative; }
.header-user-dropdown { right:0; left:auto; max-width:min(90vw, 280px); width:max-content; min-width:220px; overflow-wrap:anywhere; }
@media (max-width: 576px) {
  .header-user-dropdown { max-width:calc(100vw - 1.5rem); }
}

/* Layout */
.header-wrap { row-gap:0; align-items:center; }
.header-actions { width:100%; justify-content:flex-end; min-width:0; }
.header-cta { flex:0 0 auto; display:flex; align-items:center; }

@media (min-width:768px) and (max-width:1199.98px) {
  .header-wrap {
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "brand actions"
      "brand cta";
    align-items: center;
    column-gap: .75rem;
    row-gap: .25rem;
  }
  .header-brand {
    grid-area: brand;
  }
  .header-actions {
    grid-area: actions;
    justify-content: flex-end;
    width: 100%;
    margin-left: 0 !important;
    justify-self: end;
  }
  .header-cta {
    grid-area: cta;
    justify-content: flex-end;
    margin-left: 0 !important;
    justify-self: end;
  }
}

@media (min-width:1200px){
  .header-wrap { flex-wrap:nowrap; }
  .header-actions {
    width:auto;
    justify-content:flex-start;
    margin-left:auto;
  }
  .header-cta {
    margin-left:1rem !important;
  }
}

/* Link wrapping inside navbar */
.navbar .container a, .navbar .container .dropdown { white-space: normal; }
.user-name-link { max-width:180px; overflow:hidden; text-overflow:ellipsis; }

/* Logo and button alignment */
.navbar-brand { padding-top:0; padding-bottom:0; display:flex; align-items:center; }
.navbar-brand img { display:block; height:40px; }

/* SVG wordmark */
.brand-svg { height:40px; width:auto; display:block; color:#fff; }
.brand-svg-text { font-family:'Poppins','Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; font-weight:700; font-size:32px; letter-spacing:.3px; }
.brand-svg-main { font-weight:700; }
.brand-svg-accent { fill:#8fd2ff; font-weight:600; }

/* CTA button base for header */
.add-ad-btn { display:inline-flex; align-items:center; padding:.5rem 1rem; }
.add-ad-btn i { margin-right:.4rem; }

@media (max-width:576px){ .add-ad-btn { padding-left:.6rem; padding-right:.6rem; } }
@media (max-width:430px){ .navbar-brand img{ height:30px; } .brand-svg{ height:34px; } .navbar-brand{ transform: translateY(1px);} .add-ad-btn{ display:inline-flex; align-items:center; padding:.38rem .72rem; font-size:.95rem; } }
@media (max-width:380px){ .navbar-brand img{ height:28px; } .brand-svg{ height:30px; } .navbar-brand{ transform: translateY(2px);} .add-ad-btn{ padding:.34rem .64rem; font-size:.92rem; } }

/* ======================
   Header responsive tweaks
   ====================== */
@media (max-width: 1000px) {
  .top .icon li { padding: 0 10px 0 0; }
  .topnav ul li { padding: 0 0 0 15px; line-height: 15px; }
  .topnav ul li a,
  #language .text,
  .top .icon li a { font-size: 12px; }
}

@media (max-width: 767px) {
  .top .icon { text-align: center; }
  .topnav { overflow: hidden; background-color: #333; float: none; margin: 20px 0 0 0; }
  .topnav ul li { display: block; padding: 0; }
  .topnav ul li a { padding: 14px 16px; color: #fff; }
  .topnav ul li a:hover { background-color: #ddd; color: black; }
  header #logo { margin: 10px 0 20px; }
  #logo img { margin: 0 auto; }
  .paddright { padding-right: 15px; }
  header .category .bootstrap-select.btn-group { margin-bottom: 20px; }
  header .center { text-align: center; }
}

@media (min-width: 600px) and (max-width: 766px) {
  #language .text { margin-right: 0; }
  .top .icon li a i,
  #language .text .la-language { margin-right: 1px; }
  .top .icon li { padding: 0 1px 0 0; }
  .topnav ul li a,
  #language .text,
  .top .icon li a { font-size: 11px; }
  .topnav { background-color: transparent; margin: 0; }
  .topnav ul li a { color: #000; padding: 6px 0; }
  .topnav ul li { display: inline-block; }
  .paddright { padding-right: 0; }
}

/* ======================
   Search toolbar layout
   ====================== */
.search-toolbar { row-gap: .5rem; }
.search-toolbar .categories-box { order: 1; }
.search-toolbar .search-box { order: 2; }
.search-toolbar .location-box { order: 3; }

@media (max-width: 576px) {
  .search-toolbar .categories-box { order: 1; }
  .search-toolbar .location-box { order: 2; }
  .search-toolbar .search-box { order: 3; flex-basis: 100%; }
}

/* Контейнер для списка категорий (как у Avito) */
.categories-wrap {
  /* Горизонтальные и вертикальные отступы */
  padding: 1rem 0;
  
  /* Можно добавить легкий фон, если нужно */
  /* background-color: #fafafa; */
}

/* Flex-контейнер со свободным переносом */
.categories-list {
  display: flex;
  flex-wrap: wrap;       /* строки переносятся */
  gap: 10px;             /* промежуток между пунктами */
  list-style: none;      /* убираем буллеты */
  margin: 0;
  padding: 0;
}

/* Каждая «плашка» (категория) */
.category-chip {
  display: inline-flex;       /* чтобы иконка + текст шли в одну строчку */
  align-items: center;        /* выравниваем по вертикали */
  /* Минимальные отступы */
  padding: 10px 15px;
  border-radius: 12px;        /* скруглённые углы, как «чипы» */
  
  /* Светлый фон, тонкая граница */
  background-color: #f5f5f5;  
  border: 1px solid #eee;

  /* Чтобы чип был кликабельным (если нужно) */
  cursor: pointer;
  transition: background-color 0.2s;
}

/* Hover-эффект  */
.category-chip:hover {
  background-color: #ebebeb;
}

/* Иконка внутри чипа */
.category-chip img {
  width: 24px; 
  height: 24px; /* подберите под себя */
  margin-right: 8px; /* отступ от текста */
  object-fit: cover; /* если нужно обрезать */
}

/* Текст */
.category-chip span {
  font-size: 14px;    /* подберите размер */
  font-weight: 500;   /* чуть полужирный */
}

/* Пример, если нужен тень (тогда можно убрать границу) */
/*
.category-chip {
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border: none;
}
*/


/* ====== ДРОПЗОН ====== */
 /* Контейнер-обёртка: превью слева, dropzone справа */
.dropzone-wrapper {
  display: flex;
 
  align-items: flex-start; /* или center */
  margin-top: 15px;
}

/* МАЛЕНЬКАЯ Dropzone */
.dropzone-sm {
  width: 100px; 
  height: 80px;
  border: 2px dashed #ccc;
  background: #f9f9f9;
  position: relative;
  border-radius: 6px;
  cursor: pointer;
  
}

/* Иконка камеры по центру (SVG Base64) */
.dropzone-sm::before {
  content: "";
  display: block;
  position: absolute;
  width: 32px;
  height: 32px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNyAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOS4xNzc2IDExLjY2NjdDOS4xNzc2IDkuMzcxNjcgMTEuMDM4MSA3LjUxMTE2IDEzLjMzMzIgNy41MTExNkMxNS42MjgyIDcuNTExMTYgMTcuNDg4NyA5LjM3MTY3IDE3LjQ4ODcgMTEuNjY2N0MxNy40ODg3IDEzLjk2MTggMTUuNjI4MiAxNS44MjIzIDEzLjMzMzIgMTUuODIyM0MxMS4wMzgxIDE1LjgyMjMgOS4xNzc2IDEzLjk2MTggOS4xNzc2IDExLjY2NjdaIiBmaWxsPSJibGFjayIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAuNjE0OSAwLjI2NjYwMkM5LjQ4MDgxIDAuMjY2NjAyIDguNDA4MTcgMC43ODIxNDEgNy42OTk2OSAxLjY2Nzc1TDYuNDM0MTggMy4yNDk2NUM2LjI1NzA1IDMuNDcxMDUgNS45ODg4OSAzLjU5OTkzIDUuNzA1MzYgMy41OTk5M0gzLjczMzI3QzEuODE4NjggMy41OTk5MyAwLjI2NjYwMiA1LjE1MjAyIDAuMjY2NjAyIDcuMDY2NlYxOC4yNjY2QzAuMjY2NjAyIDIwLjE4MTIgMS44MTg2OCAyMS43MzMzIDMuNzMzMjcgMjEuNzMzM0gyMi45MzMzQzI0Ljg0NzkgMjEuNzMzMyAyNi4zOTk5IDIwLjE4MTIgMjYuMzk5OSAxOC4yNjY2VjcuMDY2NkMyNi4zOTk5IDUuMTUyMDIgMjQuODQ3OSAzLjU5OTkzIDIyLjkzMzMgMy41OTk5M0gyMC45NjEyQzIwLjY3NzcgMy41OTk5MyAyMC40MDk1IDMuNDcxMDUgMjAuMjMyNCAzLjI0OTY1TDE4Ljk2NjggMS42Njc3M0MxOC4yNTg0IDAuNzgyMTM0IDE3LjE4NTcgMC4yNjY2MDIgMTYuMDUxNiAwLjI2NjYwMkgxMC42MTQ5Wk0zLjMzMzMgNy45OTk1QzMuMzMzMyA3LjM4NjMgMy44MzA4IDYuODg4ODMgNC40NDQ0NiA2Ljg4ODgzSDUuNTU1NTZDNi4xNjkyMSA2Ljg4ODgzIDYuNjY2NyA3LjM4NjMgNi42NjY3IDcuOTk5NUM2LjY2NjcgOC42MTM2IDYuMTY5MiA5LjExMTA2IDUuNTU1NTYgOS4xMTEwNkg0LjQ0NDQ2QzMuODMwOSA5LjExMTA2IDMuMzMzMyA4LjYxMzYgMy4zMzMzIDcuOTk5NVpNMTMuMzMzMiA1LjM3NzgzQzkuODU5MCA1LjM3NzgzIDcuMDQ0MjcgOC4xOTM0NiA3LjA0NDI3IDExLjY2NjdDNy4wNDQyNyAxNS4xNCA5Ljg1OTAgMTcuOTU1NiAxMy4zMzMyIDE3Ljk1NTZDMTYuODA2NCAxNy45NTU2IDE5LjYyMiAxNS4xNCAxOS42MjIgMTEuNjY2N0MxOS42MjIgOC4xOTM0NiAxNi44MDY0IDUuMzc3ODMgMTMuMzMzMiA1LjM3NzgzWiIgZmlsbD0iYmxhY2siLz48L3N2Zz4=")
      no-repeat center center;
  background-size: contain; 
  opacity: 0.4;
}

/* Превью (Dropzone создаёт) */
.dz-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Каждый блок превью (80x80) */
.dz-preview {
  position: relative;
  width: 80px;
  height: 80px;
  cursor: move;
  overflow: hidden; /* ВАЖНО: если вдруг image окажется больше, скрываем её */
}

/* Картинка внутри превью */
.dz-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  transition: transform 0.2s ease-in-out;
}

.dz-preview:hover img {
  transform: scale(1.05);
}

/* Убираем стандартные детали Dropzone */
.dz-preview .dz-details,
.dz-preview .dz-error-mark,
.dz-preview .dz-success-mark {
  display: none !important;
}

/* Ссылка "Удалить" (если addRemoveLinks: true) */
.dz-preview .dz-remove {
  /* Сам фон (красный кружок) можно задать здесь */
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ff5858;
  color: white;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  line-height: 17px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}

/* Чтобы там был виден «×» */
.dz-preview .dz-remove::after {
  content: '×';
  display: block;
}

/* При наведении — кружок ярче */
.dz-preview .dz-remove:hover {
  background: #ff0000;
}


  /* ====== Модальное окно (переименованные классы) ====== */

/* обёртка – общий контекст, чтобы стили не конфликтовали */
.custom-modal-wrapper {
    /* Можно ничего не ставить, но это «пространство имён» */
}

/* Оверлей */
.custom-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; 
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Контейнер модалки */
.custom-modal {
  position: relative;
  overflow: visible;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  max-width: 630px; /* слегка шире */
  z-index: 10000;
}

/* Кнопка закрытия */
.custom-modal-close-btn {
  position: absolute;
  top: -15px;
  right: -15px;
  background: red;
  color: white;
  font-size: 18px;
  border: none;
  padding: 10px 14px;
  border-radius: 50%;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Тело модалки с прокруткой */
.custom-modal-body {
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 10px;
}

/* Сетка внутри тела */
.custom-modal-content {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  justify-content: center;
  margin-bottom: 15px;
}

/* Блок для изображения */
.modal-image-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden; 
}

/* Курсор "4 стрелки" при наведении */
.modal-image-container:hover img {
  cursor: all-scroll !important;
}

/* Стили изображений */
.custom-modal img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.2s;
}

/* Кнопка поворота */
.rotate-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #007bff;
  color: white;
  font-size: 14px;
  border: none;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
}

/* Кнопка удаления */
.delete-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: red;
  color: white;
  font-size: 14px;
  border: none;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
}

/* Кнопка "Продолжить" */
.custom-continue-btn {
  display: block;
  width: 100%;
  padding: 10px 20px;
  background: #007bff;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.custom-continue-btn:hover {
  background: #0056b3;
}



.mySwiper {
  width: 100%;
  height: 250px; /* или 200px, как вам удобно */
  overflow: hidden;
  position: relative;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  /* НЕ задаём width и height тут, Swiper сам выставит под slidesPerView:1 */
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Header logo sizing (responsive) */
.brand-svg { height: 30px; width: auto; display: block; }
@media (min-width: 576px) { .brand-svg { height: 36px; } }
@media (min-width: 768px) { .brand-svg { height: 48px; } }
@media (min-width: 1200px) { .brand-svg { height: 52px; } }

/* Extra-tight layout for very small screens (<=380px) */
@media (max-width: 380px) {
  header .navbar-brand { margin-right: .25rem !important; }
  .brand-svg { height: 28px; }
  .header-cta { gap: .25rem !important; }
  .add-ad-btn { padding: .32rem .56rem; font-size: .9rem; }
  .header-user-area .rounded-circle { width: 32px !important; height: 32px !important; font-size: 14px !important; }
  .user-name-link { gap: .4rem !important; }
}