/* Media queries for smaller screens - apply only to smaller resolutions */
/* For tablets (max-width: 1024px) */
@media (max-width: 1024px) {
    .listings {
      padding: 40px 60px;
    }
    .listing-card {
      gap: 15px;
      min-height: 266px;
    }
    .listing-image-wrapper {
      width: 100%; /* Гибкая ширина */
      max-width: 400px;
    }
    .listing-thumbnails {
      width: 70px;
      max-height: 266px;
    }
    .listing-details {
      gap: 15px;
    }
    .listing-title {
      font-size: 18px;
    }
    body[lang="zh"] .listing-title {
      font-size: 16px;
    }
    .price {
      font-size: 16px;
    }
    .location {
      font-size: 13px;
    }
    .description {
      font-size: 12px;
      -webkit-line-clamp: 2;
      padding-right: 8px;
    }
    .realtor-title {
      font-size: 13px;
    }
    .realtor-name {
      font-size: 12px;
    }
    .realtor-email, .realtor-phone {
      font-size: 11px;
    }
    .spec-property-type, .spec-deal-type {
      font-size: 13px;
      padding: 2px 8px;
    }
    .spec-value {
      font-size: 14px;
    }
    .spec-label {
      font-size: 9px;
    }
    .footer-container {
      padding: 40px 60px;
    }
    .listings-header-actions {
      flex-wrap: wrap;
      gap: 15px; /* Сохранение десктопного отступа */
    }
    .listings-dropdown-btn {
      min-width: 120px; /* Минимальная ширина для компактности */
      width: auto; /* Адаптивная ширина по содержимому */
      box-sizing: border-box;
      padding: 8px 16px; /* Сохранение десктопного padding */
      border: 1px solid #E5E5E5; /* Единый фрейм */
      border-radius: 8px;
      text-align: center; /* Центрирование текста */
      overflow: hidden; /* Обрезка текста при необходимости */
      text-overflow: ellipsis; /* Многоточие для длинного текста */
      white-space: nowrap; /* Предотвращение переноса текста */
    }
  }
  
  /* For mobile devices (max-width: 768px) */
  @media (max-width: 768px) {
    .listings {
      padding: 20px;
      width: 100%;
      max-width: 100vw;
      box-sizing: border-box;
    }
    .listing-card {
      flex-direction: column;
      gap: 10px;
      min-height: 400px;
      padding: 10px;
      width: 100%;
      max-width: 100vw;
      box-sizing: border-box;
    }
    .listing-image-wrapper {
      width: 100%;
      flex-direction: column;
      gap: 10px;
    }
    .listing-image-container {
      width: 100%;
      aspect-ratio: 3 / 2;
      border-radius: 8px;
    }
    .listing-thumbnails {
      flex-direction: row;
      width: 100%;
      max-height: 80px;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      padding-bottom: 5px;
      -webkit-overflow-scrolling: touch; /* Плавная прокрутка на iOS */
    }
    .thumbnail-image {
      width: 80px;
      height: 60px;
      flex-shrink: 0;
      border-radius: 4px;
      margin-right: 5px;
    }
    .listing-details {
      padding: 0;
      flex-direction: column;
      gap: 10px;
      width: 100%;
    }
    .listing-details-header, .listing-details-content {
      min-width: 100%;
    }
    .listing-specs {
      gap: 6px 12px;
      grid-template-columns: repeat(2, auto);
    }
    .offer .filter-container {
      flex-direction: column;
      gap: 8px;
      padding: 8px;
      border: none; /* Убираем фрейм под оффером */
    }
    .offer .filter-container > *::after {
      display: none;
    }
    .offer .offer-title.centered {
      font-size: 24px;
      padding: 5px 0;
      margin-bottom: 10px;
    }
    .offer .location-selector, .offer .deal-type-selector, .offer .property-type-selector, .offer .search-btn {
      flex: 1 1 100%;
      min-width: 100%;
      border: 1px solid #D0D0D0;
      border-radius: 8px;
      height: 40px;
      font-size: 14px;
      margin: 0;
    }
    .offer .search-btn {
      margin-top: 8px;
    }
    .offer .modal-cities {
      width: 90%;
      max-height: 70vh;
    }
    .offer .cities-grid {
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
    .offer .modal-search {
      font-size: 14px;
    }
    .offer .modal-item.city-item {
      font-size: 14px;
      height: 36px;
    }
    .footer-container {
      padding: 20px;
      grid-template-columns: 1fr;
    }
    .listing-title {
      font-size: 16px;
    }
    body[lang="zh"] .listing-title {
      font-size: 14px;
    }
    .price {
      font-size: 16px;
    }
    .location {
      font-size: 12px;
    }
    .description {
      font-size: 12px;
      -webkit-line-clamp: 2;
    }
    .realtor-title {
      font-size: 12px;
    }
    .realtor-name {
      font-size: 11px;
    }
    .realtor-email, .realtor-phone {
      font-size: 10px;
    }
    .spec-property-type, .spec-deal-type {
      font-size: 12px;
      padding: 2px 6px;
    }
    .spec-value {
      font-size: 12px;
    }
    .spec-label {
      font-size: 8px;
    }
    .listings-header {
      padding: 10px 0;
    }
    .listings-header-container {
      flex-wrap: wrap;
      padding: 10px 0;
      gap: 15px; /* Сохранение десктопного отступа */
      width: 100%;
      box-sizing: border-box;
      justify-content: flex-start; /* Выравнивание по левому краю */
    }
    .listings-header-left {
      display: flex;
      align-items: center;
      gap: 15px;
      width: auto;
    }
    .listings-header-actions {
      flex-wrap: wrap;
      gap: 15px; /* Сохранение десктопного отступа */
      width: auto;
      justify-content: flex-start; /* Выравнивание по левому краю */
    }
    .listings-dropdown-btn {
      min-width: 120px; /* Минимальная ширина для компактности */
      width: auto; /* Адаптивная ширина по содержимому */
      box-sizing: border-box;
      padding: 8px 16px; /* Сохранение десктопного padding */
      border: 1px solid #E5E5E5; /* Единый фрейм */
      border-radius: 8px;
      text-align: center; /* Центрирование текста */
      overflow: hidden; /* Обрезка текста при необходимости */
      text-overflow: ellipsis; /* Многоточие для длинного текста */
      white-space: nowrap; /* Предотвращение переноса текста */
      margin: 5px 0;
    }
  }
  
  /* For small mobile devices (max-width: 480px) */
  @media (max-width: 480px) {
    .listings {
      padding: 10px;
    }
    .listing-card {
      gap: 8px;
      min-height: 320px;
    }
    .listing-image-container {
      aspect-ratio: 3 / 2;
    }
    .listing-thumbnails {
      max-height: 60px;
    }
    .thumbnail-image {
      width: 60px;
      height: 45px;
    }
    .offer .offer-title.centered {
      font-size: 20px;
    }
    .offer .location-selector, .offer .deal-type-selector, .offer .property-type-selector, .offer .search-btn {
      font-size: 12px;
      height: 36px;
    }
    .offer .modal-cities {
      max-height: 60vh;
    }
    .offer .cities-grid {
      grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    }
    .offer .modal-item.city-item {
      font-size: 12px;
      height: 32px;
    }
    .footer-container {
      padding: 10px;
    }
    .footer h3 {
      font-size: 12px;
    }
    .footer p, .footer-about-link, .footer-disclaimer-link {
      font-size: 10px;
    }
    .about-page {
      padding: 10px;
    }
    .about-page h1 {
      font-size: 20px;
    }
    .about-section h2 {
      font-size: 18px;
    }
    .about-section h3 {
      font-size: 14px;
    }
    .about-section p, .about-section li {
      font-size: 12px;
    }
    .listings-header-container {
      padding: 5px 0;
      gap: 10px;
    }
    .listings-header-left {
      display: flex;
      align-items: center;
      gap: 15px;
      width: auto;
    }
    .listings-header-actions {
      flex-wrap: wrap;
      gap: 10px;
      width: auto;
      justify-content: flex-start; /* Выравнивание по левому краю */
    }
    .listings-dropdown-btn {
      min-width: 110px; /* Уменьшенная минимальная ширина */
      width: auto; /* Адаптивная ширина по содержимому */
      box-sizing: border-box;
      padding: 6px 12px; /* Уменьшенный padding */
      border: 1px solid #E5E5E5;
      border-radius: 8px;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 3px 0;
    }
  }