/* Reset and Base Styles */
body {
  font-family: 'Poppins', sans-serif;
  background-color: #ffffff;
  color: #222222;
  margin: 0;
  padding-top: 0; /* Убираем верхний отступ */
  padding-bottom: 140px !important; /* Уменьшаем отступ снизу до приемлемого */
  box-sizing: border-box;
}

/* Дополнительные отступы для страницы с офером */
body.offer-page {
  padding-bottom: 160px !important;
}

/* Специальные стили для страницы оффера */
body.offer-page .container {
  margin: 0;
  padding: 0;
  max-width: 100%;
  width: 100%;
}

/* Для других страниц применяем стандартные стили контейнера */
body:not(.offer-page) .container {
  padding: 15px;
  max-width: 540px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  body {
    padding-top: 36px;
  }

  /* Для страницы оффера убираем padding-top у body, так как он есть у .offer-desktop-layout */
  body.offer-page {
    padding-top: 0 !important;
  }
}

/* Для десктопа убираем нижний отступ body */
@media (min-width: 992px) {
  body {
    padding-bottom: 20px !important;
  }

  body.offer-page {
    padding-bottom: 20px !important;
  }

  /* Для десктопа корректируем стили контейнера */
  body:not(.offer-page) .container {
    max-width: 1200px;
    padding: 20px;
  }
}

/* Layout Components */

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #333;
  text-align: center;
}

/* Header Styles */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  z-index: 1000; /* Увеличиваем z-index, чтобы шапка была поверх навигации */
  padding: 0 12px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Новые стили для прозрачного топ-бара */
.app-header.transparent {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Полупрозрачный фон для заголовка на всех страницах кроме оффера */
.app-header.transparent:not(.offer-page-header) {
  background-color: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

/* Заголовок на страницах кроме оффера */
.app-header.transparent:not(.offer-page-header) .page-title {
  color: #333 !important;
  text-shadow: none !important;
  font-weight: 600 !important;
  font-size: 18px !important;
}

.app-header.transparent.scrolled {
  background-color: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
}

.app-header.transparent .page-title, 
.app-header.transparent .back-btn,
.app-header.transparent .header-bar button,
.app-header.transparent .header-right a,
.app-header.transparent .action-circle-btn {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}

.app-header.transparent.scrolled .page-title, 
.app-header.transparent.scrolled .back-btn,
.app-header.transparent.scrolled .header-bar button,
.app-header.transparent.scrolled .header-right a,
.app-header.transparent.scrolled .action-circle-btn {
  color: #333 !important;
  text-shadow: none !important;
}

.app-header.transparent .app-logo {
  filter: brightness(0) invert(1) !important; /* Делаем логотип белым */
}

.app-header.transparent.scrolled .app-logo {
  filter: none !important;
}

/* Стиль для иконки в кнопке назад */
.app-header.transparent .fa-chevron-left,
.app-header.transparent.scrolled .fa-chevron-left {
  color: #222 !important;
}

/* Стили для кнопок в шапке страницы оффера */
.header-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  height: 36px !important;
  position: absolute !important;
  right: 16px !important;
  top: 0 !important;
  z-index: 1010 !important;
}

/* Стиль для кнопок действий в шапке */
.action-circle-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  transition: transform 0.2s ease, background-color 0.2s ease !important;
  position: relative !important;
  margin: 0 !important;
}

.action-circle-btn:hover {
  transform: scale(1.05);
  background-color: #fff;
}

.action-icon {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  pointer-events: none;
}

/* Стили для кнопки назад */
.back-btn {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border: none;
  margin-right: 10px;
  z-index: 1010;
}

.back-btn i {
  font-size: 20px;
  line-height: 1;
  display: block;
}

.back-btn:hover {
  transform: scale(1.05);
  background-color: #fff;
  color: #111;
}

.app-header.transparent .action-circle-btn,
.app-header.transparent .back-btn {
  background-color: rgba(255, 255, 255, 0.9) !important;
  width: 32px !important;
  height: 32px !important;
}

.app-header.transparent .action-icon,
.app-header.transparent .back-btn i {
  filter: none !important;
}

.app-header.transparent.scrolled .action-circle-btn,
.app-header.transparent.scrolled .back-btn {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

/* Градиент для верхней части страницы с изображением */
.header-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0) 100%);
  z-index: 999;
  pointer-events: none;
}

.header-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  height: 100%;
}

.logo-container {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
}

.app-logo {
  height: 36px;
  width: auto;
  object-fit: contain;
  margin-top: 2px;
}

/* Navigation */
.bottom-navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  z-index: 1000;
}

.bottom-navbar a {
  color: #666;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  position: relative; /* Добавляем для позиционирования бейджа */
}

.bottom-navbar a i {
  font-size: 20px;
  margin-bottom: 4px;
  display: inline-block;
}
.bottom-navbar a svg,
.bottom-navbar a img {
  width: 20px;
  height: 20px;
  margin-bottom: 4px;
  display: block;
}

/* Явно включаем отображение шрифтовых иконок FA */
.fas, .far, .fal, .fad, .fab {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900; /* для .fas */
}
.far { font-weight: 400; }

.bottom-navbar a:hover {
  color: #F05C5D; /* Красный цвет при наведении, такой же как у Complete Profile */
  text-decoration: none; /* Убираем подчеркивание */
}

.bottom-navbar a.active {
  color: #F05C5D;
}

/* Бадж для мобильной навигации */
.bottom-navbar .nav-badge {
  position: absolute;
  top: -2px;
  right: 10px;
  background: #ff5a5f;
  color: white;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: bold;
  min-width: 16px;
  height: 16px;
  text-align: center;
  line-height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Desktop Navigation - старый код закомментирован, используется новый ниже */
/*
@media (min-width: 992px) {
  .bottom-navbar {
    position: fixed;
    top: 50%;
    right: 0;
    bottom: auto;
    left: auto;
    width: 80px;
    height: auto;
    transform: translateY(-50%);
    flex-direction: column;
    justify-content: center;
    padding: 20px 0;
    border-radius: 16px 0 0 16px;
    box-shadow: -2px 0 8px rgba(0,0,0,0.1);
  }

  .bottom-navbar a {
    width: 60px;
    height: 60px;
    justify-content: center;
    align-items: center;
    margin: 8px 0;
    border-radius: 12px;
    transition: background-color 0.2s ease;
  }

  .bottom-navbar a:hover {
    background-color: #f5f5f5;
  }

  .bottom-navbar a.active {
    background-color: rgba(255, 90, 95, 0.1);
  }

  .bottom-navbar a i {
    font-size: 24px;
    margin-bottom: 2px;
  }

  .bottom-navbar a span {
    display: none;
  }
}
*/

/* Desktop Navigation - под шапкой слева */
@media (min-width: 992px) {
  .bottom-navbar {
    position: fixed;
    top: 56px; /* Позиционируем под шапкой */
    left: 20px;
    bottom: auto;
    right: auto;
    width: auto;
    height: auto;
    transform: none;
    flex-direction: column; /* Вертикальное расположение */
    align-items: flex-start; /* Выравниваем по левому краю */
    justify-content: flex-start;
    padding: 12px;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 100; /* Не перекрывает шапку */
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .bottom-navbar a {
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /* Изменено с center на flex-start */
    align-items: center;
    width: 140px; /* Ensure same width */
    height: 48px; /* Ensure same height */
    padding: 0 12px; /* Добавлен одинаковый padding слева и справа */
    margin: 4px 0;
    box-sizing: border-box;
    border-radius: 12px;
    transition: background-color 0.2s ease, color 0.2s ease;
    position: relative;
    color: #666; /* Default text color */
    text-decoration: none;
  }

  .bottom-navbar a:hover {
    background-color: rgba(240, 92, 93, 0.1);
    color: #F05C5D;
    text-decoration: none;
    transform: translateY(-2px);
  }

  .bottom-navbar a.active {
    background-color: rgba(240, 92, 93, 0.15);
    color: #F05C5D;
  }

  .bottom-navbar a i {
    font-size: 20px;
    width: 24px; /* Фиксированная ширина для иконок */
    text-align: center; /* Центрируем иконку в её области */
    margin-right: 8px; /* Отступ между иконкой и текстом */
    flex-shrink: 0; /* Не даем иконке сжиматься */
  }

  /* Показываем текст метки */
  .bottom-navbar a span {
    display: inline-block;
    flex: 1; /* Занимает оставшееся место */
  }

  /* Бадж для непрочитанных сообщений */
  .nav-badge {
    position: absolute;
    top: 4px;
    right: 8px;
    background: #ff5a5f;
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: bold;
    min-width: 16px;
    height: 16px;
    text-align: center;
    line-height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }

  /* Корректируем отступы для контейнера на десктопе */
  .container {
    padding-left: 8px;
    padding-right: 8px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* Form Styles */
.form-group {
  margin-bottom: 16px;
  position: relative;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-weight: 500;
  font-size: 14px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
  margin-top: 5px;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: #ff5a5f;
  outline: none;
}

/* Button Styles */
button,
.btn {
  padding: 12px;
  background-color: #ff5a5f;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-decoration: none;
  display: inline-block;
}

button:hover,
.btn:hover {
  background-color: #f44336;
}

.logout-btn {
  background-color: transparent;
  color: #666;
  border: 1px solid #ddd;
}

.logout-btn:hover {
  background-color: #f5f5f5;
}

/* Card Styles */
.sitter-card {
  background-color: #fff;
  margin: 10px 0;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #ddd;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.sitter-card:hover {
  background-color: #f9f9f9;
}

.sitter-card .card-content {
  position: relative;
  padding: 20px;
  text-align: center;
}

.sitter-info {
  margin-top: 10px;
}

.sitter-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.sitter-location {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.sitter-rating {
  color: #ff5a5f;
  font-weight: 600;
  margin-top: 5px;
}

/* Gallery and Photos */
/* Gallery and Photos - УДАЛЕНО: старые стили заменены новыми в разделе OFFER REDESIGN */
/*
.offer-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin: 0;
}

.offer-photo {
  position: relative;
  padding-bottom: 75%;
  overflow: hidden;
  border-radius: 8px;
}

.offer-photo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
*/

/* Reviews */
.reviews-list {
  margin-top: 20px;
}

.review-item {
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.review-item p {
  margin: 5px 0;
  color: #333;
}

/* Responsive Design */
@media (min-width: 992px) {
  .container {
    max-width: 1200px;
  }
  
  /* Удалены стили для .bottom-navbar чтобы не конфликтовать с новым позиционированием */
}

/* Utility Classes */
.text-center {
  text-align: center;
}

.mt-20 {
  margin-top: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

/* Заголовок формы */
h2 {
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: #333;
}

/* Ссылка «Нет аккаунта?» */
.bottom-link {
  margin-top: 15px;
  text-align: center;
}

.bottom-link a {
  color: #008489;  /* Бирюзовый цвет ссылок, как у Airbnb */
  font-weight: bold;
  text-decoration: none;
}

.bottom-link a:hover {
  text-decoration: underline;
}

/* Стили для кнопок на странице авторизации */
.auth-buttons {
  margin-top: 20px;
  text-align: center;
}

.auth-buttons a {
  display: inline-block;
  padding: 12px 25px;
  background-color: #ff5a5f; /* Красный, как на Airbnb */
  color: white;
  font-size: 16px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  margin: 10px;
  transition: background-color 0.3s ease;
}

.auth-buttons a:hover {
  background-color: #f44336; /* Темный красный на hover */
}

/* Выравнивание текста в блоках */
.container p {
  text-align: center; /* Центрируем текст в абзацах */
  font-size: 16px;
  color: #333;
  margin-bottom: 20px; /* Отступ снизу для красоты */
}

/* Увеличиваем межстрочный интервал для лучшего восприятия */
.container p small {
  font-size: 14px;
  color: #555;
  text-align: center; /* Центрируем мелкий текст */
  display: block;
  margin-top: 10px;
}

/* Стили для формы добавления нового ситтера */
form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}

form button {
  width: 100%;
  padding: 12px;
  background-color: #ff5a5f;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

form button:hover {
  background-color: #f44336;
}

/* Стили для карточек ситтеров */
#sitter-list {
  margin-top: 20px;
}

.sitter-card h3 {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.sitter-card p {
  overflow-wrap: break-word;   /* или word-wrap: break-word; */
  word-break: break-word;
  hyphens: auto;               /* Если нужно расставлять дефисы */
}

/* Стили для мелких текстов */
.bottom-link {
  text-align: center;
  margin-top: 15px;
}

.bottom-link a {
  color: #008489;  /* Цвет ссылок */
  text-decoration: none;
  font-weight: bold;
}

.bottom-link a:hover {
  text-decoration: underline;
}

/* Шапка с кнопкой выхода */
.header-bar {
  position: relative;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* Делаем карточку flex-контейнером */
.sitter-card .card-content {
  position: relative; /* Нужен для абсолютного позиционирования картинки */
  padding: 20px;      /* Например, чтобы был небольшой отступ */
  text-align: center; /* Чтобы текст был в центре, как в предыдущих вариантах */
}

/* Стили для блока с текстом */
.sitter-card .sitter-info {
  max-width: 80%; /* Чтобы текст не налезал на картинку */
}

.sitter-card .paw-icon {
  position: absolute; 
  top: 10px;     /* Отступ сверху */
  right: 10px;   /* Отступ справа */
  width: 32px;   /* Меньше размер, чтобы была компактнее */
  height: auto;
  cursor: pointer;
  opacity: 0.5;  /* Немного прозрачная, чтобы не отвлекала */
}

/* Стили для выпадающего списка */
form select {
  padding: 12px;
  font-size: 16px;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  background-color: #f9f9f9;
  margin-top: 5px;
  margin-bottom: 20px; /* Добавлен отступ */
  width: 100%;
  box-sizing: border-box;
}

select:focus {
  border-color: #ff5a5f;  /* Красновато-розовый цвет при фокусе */
  outline: none;
}

/* Styles for profile page */
.profile-details {
  background-color: #f9f9f9;
  padding: 1em;
  margin-bottom: 1em;
  border-radius: 5px;
  max-width: 600px;
}
.profile-details p {
  margin: 0.2em 0;
}

/* Buttons and forms */
button {
  background-color: #ff5a5f;
  color: white;
  border: none;
  padding: 0.5em 1em;
  margin: 0.5em 0;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}
button:hover {
  background-color: #f44336;
}
.booking-form {
  margin: 1em 0;
  padding: 1em;
  background: #f1f1f1;
  border-radius: 5px;
  max-width: 400px;
}
.booking-form label {
  margin-right: 0.5em;
}
.booking-form input[type="date"] {
  margin-right: 1em;
}

/* Reviews list styling */
.reviews-list {
  list-style: none;
  padding: 0;
  max-width: 600px;
}
.review-item {
  background: #fffdf0;
  border: 1px solid #ebe4b7;
  padding: 0.5em;
  margin-bottom: 0.5em;
  border-radius: 3px;
}
.review-item p {
  margin: 0.3em 0;
}

/* Filter form styling */
.filter-form input, .filter-form select {
  margin-right: 0.5em;
  padding: 0.3em;
}
.filter-form button {
  padding: 0.4em 0.8em;
}

/* Стили для кнопки "Выйти" */
.logout-btn {
  width: 100%;
  padding: 12px;
  background-color: #ff5a5f;  /* Красный цвет кнопки */
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 20px;
}

.logout-btn:hover {
  background-color: #f44336;
}

.header-bar {
  position: absolute;
  display: flex;
  flex-direction: row;
  gap: 10px;
  top: 5px;
  right: 20px;
  align-items: center; /* Выравниваем по центру */
}

.header-bar button {
  flex-shrink: 0; /* Запрещаем сжимать кнопки */
}

.logout-btn {
  flex: 0 0 auto; /* Запрещаем кнопкам растягиваться или сжиматься */
  width: 140px;   /* Фиксированная ширина для кнопок, настроить по желанию */
  padding: 6px 10px; /* сохранить текущий padding */
}
.profile-btn {
  flex: 0 0 auto; /* Запрещаем кнопкам растягиваться или сжиматься */
  width: 140px;   /* Фиксированная ширина для кнопок, настроить по желанию */
  padding: 6px 10px; /* сохранить текущий padding */
  background-color: #ff5a5f;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-bottom: 20px;
}
.profile-btn:hover {
  background-color: #f44336;
}

/* Styles for profile page container */
.profile-container {
  margin-top: 80px; /* Добавляем отступ сверху для размещения кнопки */
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
  padding: 30px;
  width: 100%;
  max-width: 600px;
}

.profile-container h2 {
  margin-top: 0;
  margin-bottom: 20px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: #333;
}

/* Styles for admin button */
.admin-btn {
  flex: 0 0 auto;
  width: 140px;
  padding: 2px 8px;
  background-color: #ff5a5f;
  color: white;
  font-size: 13px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-bottom: 20px;

  /* Новые свойства для ограничения размера */
  box-sizing: border-box;
  max-width: 140px; /* Ограничиваем максимальную ширину */
  white-space: nowrap; /* Запрещаем перенос текста */
  overflow: hidden;
  text-overflow: ellipsis; /* Обрезка текста, если не помещается */
}

.admin-btn:hover {
  background-color: #f44336;
}

.back-btn {
  background-color: transparent;
  border: none;
  color: #555;
  font-size: 24px;
  cursor: pointer;
  padding: 0; /* Без внутренних отступов */
  display: flex;
  align-items: center;
  margin-right: 10px; /* Добавляем отступ между кнопкой назад и заголовком */
}

.back-btn i {
  font-size: 20px;
}

.back-btn:hover {
  color: #111; /* пример изменения цвета текста при наведении */
  background-color: transparent;
}

.page-title {
  font-size: 17px; /* Уменьшенный шрифт для мобильного вида */
  font-weight: 600;
  color: #333;
  margin: 0;
  line-height: 1.2;
  max-width: 300px;        /* expanded from 200px */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-photo {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
}

/* Стили для сетки карточек */
.sitter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  padding: 0;
  margin: 0;
}

@media (max-width: 768px) {
  .sitter-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .container {
    padding: 10px;
  }
}

/* Стили для карточки */
.sitter-card {
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
  cursor: pointer;
}

.sitter-card:hover {
  transform: translateY(-5px);
}

.sitter-photo {
  position: relative;
  width: 100%;
  height: 180px; /* Фиксированная высота */
  overflow: hidden;
}

.sitter-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Растягиваем и центрируем без искажений */
}

/* Иконка "лайк" */
.like-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.7);
  padding: 5px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
}

/* Информация о ситтере */
.sitter-info {
  padding: 10px;
  text-align: left;
}

.sitter-name {
  font-size: 16px;
  font-weight: bold;
}

.sitter-location {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

.sitter-rating {
  margin-top: 6px;
  font-size: 14px;
  color: #ff5a5f;
  font-weight: bold;
}

/* Styles for datepicker calendar */
.datepicker {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  background-color: #f9f9f9;
  margin-bottom: 20px;
}

.flatpickr-calendar {
  z-index: 9999 !important;
}

.offer-container {
  padding: 15px;
  margin: 0 auto;
  max-width: 800px;
}

/* УДАЛЕНО: старые стили для галереи заменены новыми в разделе OFFER REDESIGN */
/*
.offer-gallery {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  margin-bottom: 20px;
}

.offer-photo {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}
*/

.offer-details p {
  font-size: 16px;
  margin: 10px 0;
}

.btn-profile {
  background-color: #ff5a5f;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 15px;
}

.btn-profile:hover {
  background-color: #f44336;
}

.reviews {
  margin-top: 30px;
}

.reviews ul {
  list-style-type: none;
  padding: 0;
}

.reviews li {
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
}

.page-title {
  font-size: 17px;
  font-weight: 600;
  color: #333;
  margin: 0;
  line-height: 1.2;
  flex: 1;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* Отступ сверху для контейнера на всех страницах кроме offer-page */
body:not(.offer-page) .container {
  padding-top: 48px !important;
}

/* Исключения для страницы профиля */
.container .profile-view-page {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.header-left {
  display: flex;
  align-items: center; /* Выравнивание по центру вертикально */
}

.page-title-wrapper {
  flex-grow: 1; /* Заголовок будет занимать оставшееся пространство */
  display: flex;
  justify-content: center; /* Выравнивание заголовка по центру */
}

.offer-gallery {
  position: relative;
  max-width: 100%;
  height: auto;
  overflow: hidden;
}

.slider-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.slides {
  display: flex;
  transition: transform 0.5s ease;
}

.slide {
  min-width: 100%;
  max-width: 100%;
  display: none;
}

.offer-photo {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 24px;
  padding: 10px;
  cursor: pointer;
  border: none;
  z-index: 10;
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

.slider-btn:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Стили для сетки предложений */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.offer-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 220px;
}

.offer-photo {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f7f7f7;
  cursor: pointer;
}

.offer-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.offer-info {
  padding: 12px 10px 10px 10px;
  width: 100%;
  text-align: center;
}

.offer-info h3 {
  font-size: 1.1em;
  margin: 0 0 6px 0;
  font-weight: 600;
}

.offer-location {
  color: #888;
  font-size: 0.95em;
  margin: 0;
}

.offer-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.user-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
}

.user-name {
  font-size: 0.9em;
  font-weight: 500;
}

.user-rating {
  font-size: 0.85em;
  color: #ff9800;
}

.favorite-btn {
  background: none;
  border: none;
  font-size: 1.2em;
  color: #ff5a5f;
  cursor: pointer;
  margin-top: 10px;
}
.favorite-btn:hover {
  color: #f44336;
}

/* Новые стили для главной страницы с карточками предложений */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Мобильная версия - 2 столбца */
  gap: 12px;
  padding: 12px;
  margin: 0 auto;
  max-width: 100%;
  padding-bottom: 80px;
}

.service-card {
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  border: 1px solid #ebebeb;
  max-width: 100%;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.service-card:hover {
  transform: translateY(-1px);
}

.service-photo-container {
  position: relative;
  width: 100%;
  padding-bottom: 85%; /* Немного уменьшаем высоту фото */
  overflow: hidden;
  background-color: #f5f5f5;
}

.service-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.favorite-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  padding: 0;
  z-index: 10; /* увеличен z-index */
  outline: none;
}

.favorite-icon i {
  font-size: 11px;
  color: #ff5a5f;
}

.favorite-icon:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

.favorite-icon .far {
  opacity: 0.7;
}

.favorite-icon .fas {
  opacity: 1;
}

.service-details {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 65px; /* Уменьшаем минимальную высоту */
}

.service-title {
  font-size: 12px;
  font-weight: 600;
  color: #222222;
  margin: 0;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.service-location {
  font-size: 11px;
  color: #717171;
  margin: 0;
}

.service-provider {
  display: flex;
  align-items: center;
  margin-top: 4px;
  gap: 4px;
}

.provider-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
}

.provider-info {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.provider-name {
  font-size: 11px;
  font-weight: 500;
  color: #222222;
  margin: 0;
}

.provider-rating {
  display: flex;
  align-items: center;
  gap: 2px;
}

.provider-rating i {
  font-size: 10px;
  color: #ffd700;
}

.provider-rating span {
  font-size: 10px;
  color: #717171;
}

/* Адаптивность для карточек услуг */
@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    padding: 16px;
    padding-bottom: 90px; /* Больший отступ для десктопной версии */
    max-width: 1200px;
  }
  
  .service-title {
    font-size: 13px;
  }
  
  .service-location {
    font-size: 12px;
  }
  
  .provider-name {
    font-size: 12px;
  }
  
  .provider-rating span {
    font-size: 11px;
  }
}

/* Для очень маленьких экранов */
@media (max-width: 360px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 8px;
    padding-bottom: 70px; /* Немного меньший отступ для маленьких экранов */
  }
  
  .service-details {
    padding: 6px;
    min-height: 60px;
  }
}

/* Стили для кнопок в шапке */
.admin-btn, .logout-btn, .profile-btn {
  padding: 2px 8px;
  font-size: 13px;
  height: 24px;
  line-height: 20px;
  white-space: nowrap;
  border-radius: 4px;
}

/* Медиа-запрос для мобильных устройств */
@media (max-width: 768px) {
  .admin-btn, .logout-btn, .profile-btn {
    padding: 2px 6px;
    font-size: 12px;
  }
}

/* Authentication Styles */
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f7f7f7;
    padding: 20px;
}

.auth-box {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
}

.auth-box h2 {
    margin-bottom: 30px;
    text-align: center;
    color: #484848;
    font-weight: 600;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #484848;
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.form-control:focus {
    border-color: #ff5a5f;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 90, 95, 0.2);
}

.btn-primary {
    background-color: #ff5a5f;
    border: none;
    padding: 12px;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    width: 100%;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #ff4146;
}

.auth-links {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
}

.auth-links span {
    color: #8E8E93;
}

.auth-link-primary {
    color: #ff5a5f;
    text-decoration: none;
    font-weight: 600;
}

.auth-link-primary:hover {
    text-decoration: underline;
}

.alert {
    padding: 12px;
    border-radius: 12px;
    margin: 0 20px 20px;
    font-size: 14px;
    text-align: center;
}

.alert-error {
    background-color: #fff5f5;
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.2);
}

.alert-success {
    background-color: #f0fff4;
    color: #48bb78;
    border: 1px solid rgba(72, 187, 120, 0.2);
}

.alert-info {
    background-color: #fff5f5;
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.2);
}

.alert-warning {
    background-color: #fff5f5;
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.2);
}

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
}

.form-check-input {
    margin: 0;
}

.form-check-label {
    margin: 0;
    cursor: pointer;
}

/* Registration page styles */
.auth-page {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.auth-content {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 24px 0 40px;
    flex: 1;
}

.auth-content h1 {
    font-size: 28px;
    font-weight: 600;
    color: #333;
    margin: 0 0 24px;
    padding: 0 20px;
}

.auth-content form {
    padding: 20px;
    background: #fff;
    border-radius: 16px;
}

.auth-content .form-group {
    margin-bottom: 20px;
    background: #fff;
    border-radius: 12px;
}

.auth-content .form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    margin-bottom: 8px;
}

.auth-content .form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #e1e1e1;
    border-radius: 12px;
    font-size: 15px;
    background: #fafafa;
    box-sizing: border-box;
}

.auth-content .form-group input:focus {
    outline: none;
    border-color: #ff6b6b;
    background: white;
    box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.1);
}

.auth-content button[type="submit"] {
    width: 100%;
    padding: 14px;
    background: #ff6b6b;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 4px;
}

.auth-content button[type="submit"]:hover {
    background: #ff5252;
}

.auth-content .auth-links {
    margin-top: 24px;
    padding: 0 20px;
}

.auth-messages {
    padding: 0 20px 16px;
}

.auth-content .alert {
    margin: 0 20px 20px;
    padding: 12px;
    border-radius: 12px;
    font-size: 14px;
    text-align: center;
    background-color: #fff5f5;
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.2);
}

@media (max-width: 480px) {
    .auth-content {
        padding: 16px;
    }

    .auth-content h1 {
        font-size: 24px;
        margin: 0 0 20px;
    }

    .auth-content .form-group {
        margin-bottom: 16px;
    }

    .auth-content .form-group input {
        padding: 10px 14px;
    }

    .auth-content button[type="submit"] {
        padding: 12px;
    }
}

.auth-content .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 24px;
    padding: 0;
}

.auth-content .form-check-input {
    width: 18px;
    height: 18px;
    margin: 0;
    border: 2px solid #e1e1e1;
    border-radius: 4px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    background: #fafafa;
}

.auth-content .form-check-input:checked {
    background-color: #ff6b6b;
    border-color: #ff6b6b;
}

.auth-content .form-check-input:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.auth-content .form-check-label {
    font-size: 14px;
    color: #666;
    cursor: pointer;
    user-select: none;
}

.profile-view-page {
    padding: 64px 24px 24px !important;
    max-width: 768px;
    margin: 0 auto;
    position: relative;
    margin-top: 0 !important;
    /* padding-top overridden above */
    border-top: none !important;
    z-index: 5;
    padding-top: 5px !important; /* Add top padding to move the profile block down by 5px */
}

.profile-hero-card {
    position: relative;
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-top: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 24px;
}

.profile-avatar-wrapper {
    display: flex;
    justify-content: center;
}

.profile-avatar-container {
    width: 140px;
    height: 140px;
    position: relative;
}

.profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.verification-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 32px;
    height: 32px;
    background: #F05C5D;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}

.verification-badge i {
    color: white;
    font-size: 14px;
}

.profile-hero-info {
    flex: 1;
    text-align: center;
}

.profile-name {
    font-size: 28px;
    font-weight: bold;
    margin: 0 0 8px;
    color: #2d3436;
}

.profile-badge {
    display: inline-block;
    padding: 4px 12px;
    background: #f1f2f6;
    border-radius: 16px;
    font-size: 14px;
    color: #636e72;
    margin-bottom: 16px;
}

.profile-stats {
    display: flex;
    gap: 24px;
    justify-content: center;
}

.stat-block {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #636e72;
    font-size: 14px;
}

.stat-block i {
    color: #F05C5D;
}

/* Action Buttons */
.profile-actions {
    display: flex;
    gap: 12px;
    margin: 20px 0;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.action-button {
    padding: 10px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.action-button.outlined {
    border: 1.5px solid #F05C5D;
    background: none;
    color: #F05C5D;
    flex: 1;
    justify-content: center;
    min-width: 200px;
}

.action-button.outlined:hover {
    background: rgba(240, 92, 93, 0.1);
}

.action-button.disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background-color: #f5f5f5;
    color: #666;
    border: 1px solid #ddd;
}

.action-button.error {
    background-color: #ffebee;
    color: #d32f2f;
    border: 1px solid #d32f2f;
}

.action-button.error:hover {
    background-color: #ffcdd2;
}

.action-button.filled {
    background: none;
    color: #666;
    padding: 8px 16px;
    font-size: 13px;
    border: 1px solid #ddd;
    margin-left: auto;
}

.action-button.filled:hover {
    background: #f5f5f5;
    color: #333;
}

.action-button i {
    font-size: 16px;
}

/* Profile Details */
.profile-details {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.details-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #636e72;
    font-size: 14px;
}

.detail-item i {
    font-size: 16px;
    color: #F05C5D;
    opacity: 0.8;
}

.detail-item.bio {
    align-items: flex-start;
}

.profile-incomplete {
    border: 2px dashed #dfe6e9;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
}

.incomplete-content {
    color: #636e72;
}

.complete-profile-link {
    color: #F05C5D;
    text-decoration: none;
    font-weight: 500;
    margin-top: 8px;
    display: inline-block;
}

/* Reviews Section */
.reviews-section {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.reviews-header {
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.reviews-header:hover {
    background-color: #f8f9fa;
}

.reviews-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reviews-header i {
    color: #F05C5D;
    transition: transform 0.2s;
}

.reviews-header.expanded i {
    transform: rotate(180deg);
}

.reviews-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.reviews-content.expanded {
    max-height: 1000px;
}

.review-item {
    padding: 16px 24px;
    border-top: 1px solid #f1f2f6;
}

.review-rating {
    margin-bottom: 8px;
}

.review-rating i {
    color: #F05C5D;
    font-size: 14px;
}

.review-text {
    color: #636e72;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.show-all-reviews {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 16px 24px;
    border: none;
    background: none;
    color: #F05C5D;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.show-all-reviews:hover {
    background-color: #f8f9fa;
}

.reviews-empty {
    padding: 32px 24px;
    text-align: center;
    color: #636e72;
}

.empty-illustration {
    width: 48px;
    height: 48px;
    background: #f1f2f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.empty-illustration i {
    font-size: 24px;
    color: #F05C5D;
    opacity: 0.5;
}

/* Accessibility */
@media (max-width: 480px) {
    .profile-hero-card {
        flex-direction: column;
        text-align: center;
    }

    .profile-stats {
        justify-content: center;
    }

    .profile-actions {
        flex-direction: column;
    }

    .action-button {
        width: 100%;
    }
}

.edit-profile-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    color: #666;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    border-radius: 8px;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    /* Убираю transform, чтобы не сдвигать кнопку вниз */
}

.profile-view-page .edit-profile-btn {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    /* Убираю transform */
}

.edit-profile-btn:hover {
    color: #333;
    background: #fff;
    transform: translateY(-1px);
}

.edit-profile-btn i {
    font-size: 16px;
}

/* Edit Profile Page Styles */
.edit-profile-page {
    padding: 16px 16px 0;
    background-color: #ffffff;
    padding-bottom: 90px !important; /* Добавлен нижний отступ для избежания перекрытия кнопки нижней панелью */
}

.avatar-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}

.avatar-container {
    width: 120px;
    height: 120px;
    border-radius: 60px;
    overflow: hidden;
    margin-bottom: 12px;
    border: 2px solid #FFFFFF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #FFFFFF;
}

.profile-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.change-photo-btn {
    background: none;
    border: none;
    color: #ff5a5f;
    font-size: 14px;
    padding: 8px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.change-photo-btn:hover {
    opacity: 0.8;
    background: none;
}

.form-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.form-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.form-card label {
    display: block;
    font-size: 13px;
    color: #8E8E93;
    margin-bottom: 8px;
}

.form-card input, 
.form-card textarea {
    width: 100%;
    border: none;
    font-size: 17px;
    color: #000000;
    background: transparent;
    resize: none;
}

.form-card input::placeholder, 
.form-card textarea::placeholder {
    color: #C7C7CC;
}

.form-card input:focus, 
.form-card textarea:focus {
    outline: none;
}

.location-wrapper {
    position: relative;
}

.location-input-container {
    width: 100%;
}

.city-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-radius: 12px;
    margin-top: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

.city-result {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 17px;
    color: #000000;
}

.city-result:hover {
    background-color: #F5F5F5;
}

.save-button {
    width: 100%;
    background: #ff5a5f;
    color: #FFFFFF;
    border: none;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.save-button:disabled {
    opacity: 0.5;
    cursor: default;
}

.save-button:not(:disabled):hover {
    background: #f44336;
}

.save-button:not(:disabled):active {
    background: #e53935;
}

/* --- ЧИПСЫ ДЛЯ become_sitter --- */
.chip-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.chip-new {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 22px;
  background: #f7f7f7;
  color: #222;
  font-size: 16px;
  cursor: pointer;
  border: 2px solid #e0e0e0;
  transition: background 0.2s, border 0.2s, color 0.2s;
  user-select: none;
  outline: none;
  font-weight: 500;
  margin-bottom: 4px;
}

.chip-group input[type="checkbox"] {
  display: none;
}

.chip-group input[type="checkbox"]:checked + label.chip-new {
  background: rgba(255,90,95,0.15);
  color: #ff5a5f;
  border-color: #ff5a5f;
  font-weight: 600;
}

.chip-new:focus {
  box-shadow: 0 0 0 2px rgba(255,90,95,0.15);
}

.chip-new:hover:not(:active) {
  background: #f7f7f7;
  border-color: #ff5a5f;
}

/* --- Language Switcher --- */
.lang-switcher {
  position: relative;
  display: inline-block;
}
.lang-btn {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #555;
  padding: 4px 8px;
  border-radius: 50%;
  transition: background 0.2s;
}
.lang-btn:hover, .lang-btn:focus {
  background: #f5f5f5;
  outline: none;
}
.lang-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 32px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  min-width: 120px;
  z-index: 1001;
  padding: 6px 0;
}
.lang-dropdown a {
  display: block;
  padding: 8px 16px;
  color: #333;
  text-decoration: none;
  font-size: 15px;
  transition: background 0.2s;
}
.lang-dropdown a:hover {
  background: #f5f5f5;
}

/* --- Custom Switch Toggle for Additional Options --- */
.switch-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 8px;
  width: 100%;
}

.switch-toggle {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  user-select: none;
  padding: 2px 0;
  margin-bottom: 8px;
  overflow: hidden;
  max-width: 100%;
}

.switch-label {
  font-size: 16px;
  color: #222;
  font-weight: 500;
  margin-right: 18px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.switch-toggle input[type="checkbox"] {
  display: none;
}

.slider {
  position: relative;
  min-width: 48px;
  width: 48px;
  height: 28px;
  background: #e0e0e0;
  border-radius: 28px;
  transition: background 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  flex-shrink: 0;
  margin-left: 8px;
  display: flex;
  align-items: center;
}

.slider:before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

.switch-toggle input[type="checkbox"]:checked + .slider {
  background: #ff5a5f;
}

.switch-toggle input[type="checkbox"]:checked + .slider:before {
  transform: translateX(20px);
  background: #fff;
}

.slider:active:before {
  width: 22px;
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  margin: 18px 0 14px 0;
  color: #222;
  gap: 10px;
}

.section-icon {
  font-size: 20px;
  color: #ff5a5f;
  margin-right: 8px;
  flex-shrink: 0;
}

.subtitle {
  font-size: 15px;
  color: #888;
  font-weight: 500;
  margin-bottom: 8px;
  margin-top: 8px;
  display: block;
}

.offers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Мобильная версия - 2 столбца */
  gap: 12px;
  padding: 12px;
  margin: 0 auto;
  max-width: 100%;
  padding-bottom: 80px;
}

.service-card {
  background: white;
  border-radius: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: transform 0.2s;
  cursor: pointer;
  max-width: 360px;
  min-width: 280px;
  width: 100%;
  margin: 0 auto;
}

.service-photo-container {
  position: relative;
  width: 100%;
  padding-bottom: 45%; /* Более низкое фото */
  overflow: hidden;
  background-color: #f5f5f5;
}

.service-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.favorite-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  padding: 0;
  z-index: 10; /* увеличен z-index */
  outline: none;
}

.favorite-icon i {
  font-size: 11px;
  color: #ff5a5f;
}

.favorite-icon:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

.favorite-icon .far {
  opacity: 0.7;
}

.favorite-icon .fas {
  opacity: 1;
}

.service-details {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 65px; /* Уменьшаем минимальную высоту */
}

.service-title {
  font-size: 12px;
  font-weight: 600;
  color: #222222;
  margin: 0;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.service-location {
  font-size: 11px;
  color: #717171;
  margin: 0;
}

.service-provider {
  display: flex;
  align-items: center;
  margin-top: 4px;
  gap: 4px;
}

.provider-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
}

.provider-info {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.provider-name {
  font-size: 11px;
  font-weight: 500;
  color: #222222;
  margin: 0;
}

.provider-rating {
  display: flex;
  align-items: center;
  gap: 2px;
}

.provider-rating i {
  font-size: 10px;
  color: #ffd700;
}

.provider-rating span {
  font-size: 10px;
  color: #717171;
}

/* Адаптивность для карточек услуг */
@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    padding: 16px;
    padding-bottom: 90px; /* Больший отступ для десктопной версии */
    max-width: 1200px;
  }
  
  .service-title {
    font-size: 13px;
  }
  
  .service-location {
    font-size: 12px;
  }
  
  .provider-name {
    font-size: 12px;
  }
  
  .provider-rating span {
    font-size: 11px;
  }
}

/* Для очень маленьких экранов */
@media (max-width: 360px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 8px;
    padding-bottom: 70px; /* Немного меньший отступ для маленьких экранов */
  }
  
  .service-details {
    padding: 6px;
    min-height: 60px;
  }
}

/* Стили для кнопок в шапке */
.admin-btn, .logout-btn, .profile-btn {
  padding: 2px 8px;
  font-size: 13px;
  height: 24px;
  line-height: 20px;
  white-space: nowrap;
  border-radius: 4px;
}

/* Медиа-запрос для мобильных устройств */
@media (max-width: 768px) {
  .admin-btn, .logout-btn, .profile-btn {
    padding: 2px 6px;
    font-size: 12px;
  }
}

/* Authentication Styles */
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f7f7f7;
    padding: 20px;
}

.auth-box {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
}

.auth-box h2 {
    margin-bottom: 30px;
    text-align: center;
    color: #484848;
    font-weight: 600;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #484848;
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.form-control:focus {
    border-color: #ff5a5f;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 90, 95, 0.2);
}

.btn-primary {
    background-color: #ff5a5f;
    border: none;
    padding: 12px;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    width: 100%;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #ff4146;
}

.auth-links {
    margin-top: 20px;
    text-align: center;
}

.auth-links a {
    color: #ff5a5f;
    text-decoration: none;
}

.auth-links a:hover {
    text-decoration: underline;
}

.alert {
    padding: 12px;
    border-radius: 12px;
    margin: 0 20px 20px;
    font-size: 14px;
    text-align: center;
}

.alert-error {
    background-color: #fff5f5;
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.2);
}

.alert-success {
    background-color: #f0fff4;
    color: #48bb78;
    border: 1px solid rgba(72, 187, 120, 0.2);
}

.alert-info {
    background-color: #fff5f5;
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.2);
}

.alert-warning {
    background-color: #fff5f5;
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.2);
}

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
}

.form-check-input {
    margin: 0;
}

.form-check-label {
    margin: 0;
    cursor: pointer;
}

/* Registration page styles */
.auth-page {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.auth-content {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 0;
    flex: 1;
}

.auth-content h1 {
    font-size: 28px;
    font-weight: 600;
    color: #333;
    margin: 0 0 24px;
    padding: 0 20px;
}

.auth-content form {
    padding: 20px;
    background: #fff;
    border-radius: 16px;
}

.auth-content .form-group {
    margin-bottom: 20px;
    background: #fff;
    border-radius: 12px;
}

.auth-content .form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    margin-bottom: 8px;
}

.auth-content .form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #e1e1e1;
    border-radius: 12px;
    font-size: 15px;
    background: #fafafa;
    box-sizing: border-box;
}

.auth-content .form-group input:focus {
    outline: none;
    border-color: #ff6b6b;
    background: white;
    box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.1);
}

.auth-content button[type="submit"] {
    width: 100%;
    padding: 14px;
    background: #ff6b6b;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 4px;
}

.auth-content button[type="submit"]:hover {
    background: #ff5252;
}

.auth-content .auth-links {
    margin-top: 24px;
    text-align: center;
    padding: 0 20px;
}

.auth-content .auth-links a {
    color: #666;
    text-decoration: none;
    font-size: 14px;
}

.auth-content .auth-links a:hover {
    color: #ff6b6b;
}

.auth-content .alert {
    margin: 0 20px 20px;
    padding: 12px;
    border-radius: 12px;
    font-size: 14px;
    text-align: center;
    background-color: #fff5f5;
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.2);
}

@media (max-width: 480px) {
    .auth-content {
        padding: 16px;
    }

    .auth-content h1 {
        font-size: 24px;
        margin: 0 0 20px;
    }

    .auth-content .form-group {
        margin-bottom: 16px;
    }

    .auth-content .form-group input {
        padding: 10px 14px;
    }

    .auth-content button[type="submit"] {
        padding: 12px;
    }
}

.auth-content .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 24px;
    padding: 0;
}

.auth-content .form-check-input {
    width: 18px;
    height: 18px;
    margin: 0;
    border: 2px solid #e1e1e1;
    border-radius: 4px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    background: #fafafa;
}

.auth-content .form-check-input:checked {
    background-color: #ff6b6b;
    border-color: #ff6b6b;
}

.auth-content .form-check-input:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.auth-content .form-check-label {
    font-size: 14px;
    color: #666;
    cursor: pointer;
    user-select: none;
}

.profile-view-page {
    padding: 64px 24px 24px !important;
    max-width: 768px;
    margin: 0 auto;
    position: relative;
}

.profile-hero-card {
    position: relative;
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-top: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 24px;
}

.profile-avatar-wrapper {
    display: flex;
    justify-content: center;
}

.profile-avatar-container {
    width: 140px;
    height: 140px;
    position: relative;
}

.profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.verification-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 32px;
    height: 32px;
    background: #F05C5D;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}

.verification-badge i {
    color: white;
    font-size: 14px;
}

.profile-hero-info {
    flex: 1;
    text-align: center;
}

.profile-name {
    font-size: 28px;
    font-weight: bold;
    margin: 0 0 8px;
    color: #2d3436;
}

.profile-badge {
    display: inline-block;
    padding: 4px 12px;
    background: #f1f2f6;
    border-radius: 16px;
    font-size: 14px;
    color: #636e72;
    margin-bottom: 16px;
}

.profile-stats {
    display: flex;
    gap: 24px;
    justify-content: center;
}

.stat-block {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #636e72;
    font-size: 14px;
}

.stat-block i {
    color: #F05C5D;
}

/* Action Buttons */
.profile-actions {
    display: flex;
    gap: 12px;
    margin: 20px 0;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.action-button {
    padding: 10px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.action-button.outlined {
    border: 1.5px solid #F05C5D;
    background: none;
    color: #F05C5D;
    flex: 1;
    justify-content: center;
    min-width: 200px;
}

.action-button.outlined:hover {
    background: rgba(240, 92, 93, 0.1);
}

.action-button.disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background-color: #f5f5f5;
    color: #666;
    border: 1px solid #ddd;
}

.action-button.error {
    background-color: #ffebee;
    color: #d32f2f;
    border: 1px solid #d32f2f;
}

.action-button.error:hover {
    background-color: #ffcdd2;
}

.action-button.filled {
    background: none;
    color: #666;
    padding: 8px 16px;
    font-size: 13px;
    border: 1px solid #ddd;
    margin-left: auto;
}

.action-button.filled:hover {
    background: #f5f5f5;
    color: #333;
}

.action-button i {
    font-size: 16px;
}

/* Profile Details */
.profile-details {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.details-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #636e72;
    font-size: 14px;
}

.detail-item i {
    font-size: 16px;
    color: #F05C5D;
    opacity: 0.8;
}

.detail-item.bio {
    align-items: flex-start;
}

.profile-incomplete {
    border: 2px dashed #dfe6e9;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
}

.incomplete-content {
    color: #636e72;
}

.complete-profile-link {
    color: #F05C5D;
    text-decoration: none;
    font-weight: 500;
    margin-top: 8px;
    display: inline-block;
}

/* Reviews Section */
.reviews-section {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.reviews-header {
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.reviews-header:hover {
    background-color: #f8f9fa;
}

.reviews-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reviews-header i {
    color: #F05C5D;
    transition: transform 0.2s;
}

.reviews-header.expanded i {
    transform: rotate(180deg);
}

.reviews-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.reviews-content.expanded {
    max-height: 1000px;
}

.review-item {
    padding: 16px 24px;
    border-top: 1px solid #f1f2f6;
}

.review-rating {
    margin-bottom: 8px;
}

.review-rating i {
    color: #F05C5D;
    font-size: 14px;
}

.review-text {
    color: #636e72;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.show-all-reviews {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 16px 24px;
    border: none;
    background: none;
    color: #F05C5D;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.show-all-reviews:hover {
    background-color: #f8f9fa;
}

.reviews-empty {
    padding: 32px 24px;
    text-align: center;
    color: #636e72;
}

.empty-illustration {
    width: 48px;
    height: 48px;
    background: #f1f2f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.empty-illustration i {
    font-size: 24px;
    color: #F05C5D;
    opacity: 0.5;
}

/* Accessibility */
@media (max-width: 480px) {
    .profile-hero-card {
        flex-direction: column;
        text-align: center;
    }

    .profile-stats {
        justify-content: center;
    }

    .profile-actions {
        flex-direction: column;
    }

    .action-button {
        width: 100%;
    }
}

.edit-profile-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    color: #666;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    border-radius: 8px;
    z-index: 10; /* Увеличиваем z-index для обеспечения кликабельности */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.edit-profile-btn:hover {
    color: #333;
    background: #fff;
    transform: translateY(-1px);
}

.edit-profile-btn i {
    font-size: 16px;
}

/* Edit Profile Page Styles */
.edit-profile-page {
    padding: 16px 16px 0;
    background-color: #ffffff;
    padding-bottom: 90px !important; /* Добавлен нижний отступ для избежания перекрытия кнопки нижней панелью */
}

.avatar-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}

.avatar-container {
    width: 120px;
    height: 120px;
    border-radius: 60px;
    overflow: hidden;
    margin-bottom: 12px;
    border: 2px solid #FFFFFF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #FFFFFF;
}

.profile-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.change-photo-btn {
    background: none;
    border: none;
    color: #ff5a5f;
    font-size: 14px;
    padding: 8px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.change-photo-btn:hover {
    opacity: 0.8;
    background: none;
}

.form-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.form-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.form-card label {
    display: block;
    font-size: 13px;
    color: #8E8E93;
    margin-bottom: 8px;
}

.form-card input, 
.form-card textarea {
    width: 100%;
    border: none;
    font-size: 17px;
    color: #000000;
    background: transparent;
    resize: none;
}

.form-card input::placeholder, 
.form-card textarea::placeholder {
    color: #C7C7CC;
}

.form-card input:focus, 
.form-card textarea:focus {
    outline: none;
}

.location-wrapper {
    position: relative;
}

.location-input-container {
    width: 100%;
}

.city-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-radius: 12px;
    margin-top: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

.city-result {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 17px;
    color: #000000;
}

.city-result:hover {
    background-color: #F5F5F5;
}

.save-button {
    width: 100%;
    background: #ff5a5f;
    color: #FFFFFF;
    border: none;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.save-button:disabled {
    opacity: 0.5;
    cursor: default;
}

.save-button:not(:disabled):hover {
    background: #f44336;
}

.save-button:not(:disabled):active {
    background: #e53935;
}

/* --- ЧИПСЫ ДЛЯ become_sitter --- */
.chip-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.chip-new {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 22px;
  background: #f7f7f7;
  color: #222;
  font-size: 16px;
  cursor: pointer;
  border: 2px solid #e0e0e0;
  transition: background 0.2s, border 0.2s, color 0.2s;
  user-select: none;
  outline: none;
  font-weight: 500;
  margin-bottom: 4px;
}

.chip-group input[type="checkbox"] {
  display: none;
}

.chip-group input[type="checkbox"]:checked + label.chip-new {
  background: rgba(255,90,95,0.15);
  color: #ff5a5f;
  border-color: #ff5a5f;
  font-weight: 600;
}

.chip-new:focus {
  box-shadow: 0 0 0 2px rgba(255,90,95,0.15);
}

.chip-new:hover:not(:active) {
  background: #f7f7f7;
  border-color: #ff5a5f;
}

/* --- Language Switcher --- */
.lang-switcher {
  position: relative;
  display: inline-block;
}
.lang-btn {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #555;
  padding: 4px 8px;
  border-radius: 50%;
  transition: background 0.2s;
}
.lang-btn:hover, .lang-btn:focus {
  background: #f5f5f5;
  outline: none;
}
.lang-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 32px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  min-width: 120px;
  z-index: 1001;
  padding: 6px 0;
}
.lang-dropdown a {
  display: block;
  padding: 8px 16px;
  color: #333;
  text-decoration: none;
  font-size: 15px;
  transition: background 0.2s;
}
.lang-dropdown a:hover {
  background: #f5f5f5;
}

/* --- Custom Switch Toggle for Additional Options --- */
.switch-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 8px;
  width: 100%;
}

.switch-toggle {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  user-select: none;
  padding: 2px 0;
  margin-bottom: 8px;
  overflow: hidden;
  max-width: 100%;
}

.switch-label {
  font-size: 16px;
  color: #222;
  font-weight: 500;
  margin-right: 18px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.switch-toggle input[type="checkbox"] {
  display: none;
}

.slider {
  position: relative;
  min-width: 48px;
  width: 48px;
  height: 28px;
  background: #e0e0e0;
  border-radius: 28px;
  transition: background 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  flex-shrink: 0;
  margin-left: 8px;
  display: flex;
  align-items: center;
}

.slider:before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

.switch-toggle input[type="checkbox"]:checked + .slider {
  background: #ff5a5f;
}

.switch-toggle input[type="checkbox"]:checked + .slider:before {
  transform: translateX(20px);
  background: #fff;
}

.slider:active:before {
  width: 22px;
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  margin: 18px 0 14px 0;
  color: #222;
  gap: 10px;
}

.section-icon {
  font-size: 20px;
  color: #ff5a5f;
  margin-right: 8px;
  flex-shrink: 0;
}

.subtitle {
  font-size: 15px;
  color: #888;
  font-weight: 500;
  margin-bottom: 8px;
  margin-top: 8px;
  display: block;
}

@media (max-width: 1024px) {
  .offers-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    padding: 8px;
    max-width: 100%;
  }
  .service-card {
    max-width: 320px;
    min-width: 220px;
  }
  .service-photo-container {
    padding-bottom: 50%;
  }
}

@media (max-width: 600px) {
  .offers-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 4px;
    max-width: 100%;
  }
  .service-card {
    max-width: 100%;
    min-width: 0;
  }
  .service-photo-container {
    padding-bottom: 60%;
  }
}

.action-button {
}

.action-button.disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background-color: #f5f5f5;
    color: #666;
}

.action-button.error {
    background-color: #ffebee;
    color: #d32f2f;
    border-color: #d32f2f;
}

.action-button.error:hover {
    background-color: #ffcdd2;
}

/* --- Offer Edit/Become Sitter custom styles (moved from become_sitter.html) --- */
.intervals-list {
  margin-top: 10px;
  margin-bottom: 5px;
  width: 100%;
}
.interval-item {
  display: flex;
  align-items: center;
  background: #f7f7f7;
  border-radius: 8px;
  padding: 6px 12px;
  margin-bottom: 6px;
  font-size: 15px;
  color: #222;
  gap: 10px;
  position: relative;
  width: 100%;
  min-height: 40px;
}
.interval-item span {
  display: block;
  padding-right: 40px;
  width: 100%;
}
.remove-interval {
  background: #ff5a5f;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  transition: background 0.15s, color 0.15s;
  z-index: 2;
  padding: 0;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.remove-interval:hover {
  background: #c62828;
  color: #fff;
}
.remove-photo-btn {
  background: #ff5a5f;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  transition: background 0.15s, color 0.15s;
  z-index: 2;
  padding: 0;
  position: absolute;
  top: 2px;
  right: 2px;
}
.remove-photo-btn:hover {
  background: #c62828;
  color: #fff;
}

.submit-button {
  width: 100%;
  background: #ff5a5f;
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 16px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, background 0.2s;
  margin-top: 40px;
}
.submit-button:disabled {
  opacity: 0.5;
  background: #ff5a5f;
  cursor: default;
  pointer-events: none;
}
.submit-button:not(:disabled):hover {
  background: #f44336;
}
.submit-button:not(:disabled):active {
  background: #e53935;
}

/* --- EDGE-TO-EDGE OFFER GALLERY (Airbnb style) --- */
.offer-gallery,
.airbnb-slider,
.edge-to-edge-slider {
  position: relative !important;
  width: 100vw !important;
  left: 50% !important;
  right: 50% !important;
  transform: translateX(-50%) !important;
  max-width: none !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  border-radius: 0 !important;
  background: #fff !important;
  overflow: hidden !important;
  display: block !important;
  padding: 0 !important;
  gap: 0 !important;
  box-shadow: none !important;
}

.slider-container {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  overflow: visible;
  display: block;
}

.slides {
  width: 100vw !important;
  max-width: 100vw !important;
  display: flex !important;
  transition: transform 0.5s ease;
  margin: 0;
  padding: 0;
}

.slide {
  min-width: 100vw !important;
  max-width: 100vw !important;
  display: none;
  margin: 0;
  padding: 0;
  border-radius: 0 !important;
}

.airbnb-slider-img {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 50vh !important;
  min-height: 180px !important;
  max-height: 420px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  display: block;
  background: #f7f7f7;
  margin: 0;
  padding: 0;
}

@media (max-width: 600px) {
  .airbnb-slider-img {
    height: 180px !important;
    min-height: 120px !important;
    max-height: 220px !important;
  }
}

/* Удаляем конфликтующие старые стили для .offer-gallery, .offer-photo, .slide */
.offer-gallery,
.offer-photo,
.slide {
  box-shadow: none !important;
  border-radius: 0 !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* --- END EDGE-TO-EDGE OFFER GALLERY --- */

/* --- AIRBNB HERO INFO CARD --- */
.airbnb-hero-info {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  padding: 24px 18px 18px 18px;
  max-width: 600px;
  margin: -60px auto 0 auto;
  position: relative;
  z-index: 2;
  text-align: left;
}
@media (max-width: 600px) {
  .airbnb-hero-info {
    margin-top: -40px;
    padding: 18px 8px 12px 8px;
    border-radius: 18px;
  }
}
  /* Удаляем лишние стили у старых hero-карточек */
.profile-hero-card, .profile-hero-info {
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* --- END AIRBNB HERO INFO CARD --- */

/* Media queries для кнопок header-actions */
@media (max-width: 480px) {
  .header-actions {
    position: absolute !important;
    right: 16px !important;
    top: 0 !important;
    height: 36px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  
  .app-header.transparent .action-circle-btn {
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    margin-right: 0 !important;
  }
}

/* Fix для кнопок в iOS */
.header-actions .action-circle-btn {
  float: none !important;
  display: inline-flex !important;
  vertical-align: middle !important;
}

@media (max-width: 600px) {
  .profile-view-page {
    padding: 0 !important;
    max-width: 100vw !important;
    margin: 0 !important;
  }
}

/* Удаляю невалидный блок и строки */
/* --- FIXED EDGE-TO-EDGE HEIGHT --- */
.offer-gallery,
.airbnb-slider,
.edge-to-edge-slider {
  height: 260px !important;
  min-height: 180px !important;
  max-height: 320px !important;
}
@media (min-width: 600px) {
  .offer-gallery,
  .airbnb-slider,
  .edge-to-edge-slider {
    height: 350px !important;
    min-height: 240px !important;
    max-height: 420px !important;
  }
}
.airbnb-slider-img {
  height: 100% !important;
  min-height: 180px !important;
  max-height: 420px !important;
}
.airbnb-hero-info {
  margin-top: -80px;
}
@media (max-width: 600px) {
  .airbnb-hero-info {
    margin-top: -60px;
  }
}

/* --- EDGE-TO-EDGE GALLERY HEIGHT UPDATE --- */
.offer-gallery,
.airbnb-slider,
.edge-to-edge-slider {
  height: 340px !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
@media (min-width: 600px) {
  .offer-gallery,
  .airbnb-slider,
  .edge-to-edge-slider {
    height: 440px !important;
  }
}
.airbnb-slider-img {
  height: 100% !important;
}

/* --- EDGE-TO-EDGE GALLERY HEIGHT INCREASE --- */
.offer-gallery,
.airbnb-slider,
.edge-to-edge-slider {
  height: 70vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  position: relative !important;
  width: 100vw !important;
  left: 50% !important;
  right: 50% !important;
  transform: translateX(-50%) !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

@media (min-width: 600px) {
  .offer-gallery,
  .airbnb-slider,
  .edge-to-edge-slider {
    height: 80vh !important;
  }
}

.airbnb-slider-img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Снимаем отступы верхнего контейнера на странице offer */
.offer-page .profile-view-page,
.offer-page .container,
.profile-view-page {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* --- EDGE-TO-EDGE BODY RESET --- */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}
body.offer-page {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}
body.offer-page .container {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}
body.offer-page header.app-header {
  margin: 0 !important;
  margin-bottom: 0 !important;
}

/* --- OFFER REDESIGN (AIRBNB STYLE) --- */

/* Color tokens */
:root {
  --offer-primary-text: #212121;
  --offer-secondary-text: #616161;
  --offer-surface-white: #FFFFFF;
  --offer-surface-gray: #F9F9F9;
  --offer-accent: #F05C5D;
  --offer-secondary: #B79AD6;
  --offer-gray-100: #F1F2F6;
  --offer-shadow-card: 0 4px 12px rgba(0,0,0,0.05);
  --offer-shadow-floating: 0 8px 16px rgba(0,0,0,0.1);
}

/* Gallery Hero (Edge-to-edge) */
.gallery-hero {
  position: relative;
  width: 100vw;
  height: 70vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: block;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
  margin-left: 0;
  margin-right: 0;
}

.gallery-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-slide {
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
}

.gallery-controls {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 16px; /* Увеличиваем отступ между кнопками */
  z-index: 10;
}

.gallery-control-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.gallery-control-btn:hover {
  background: #fff;
  transform: scale(1.05);
}

/* Removed old gallery-control-btn styles to avoid conflicts */

.gallery-counter {
  position: absolute;
  bottom: 32px;
  right: 16px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 12px;
  z-index: 10;
}

/* Hero info card */
.offer-hero-info {
  position: relative;
  background: var(--offer-surface-white);
  border-radius: 12px;
  padding: 24px;
  margin-top: -20px;
  margin-left: 16px;
  margin-right: 16px;
  box-shadow: var(--offer-shadow-card);
  z-index: 20;
}

.offer-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--offer-primary-text);
  margin: 0 0 16px 0;
  line-height: 1.25;
}

.host-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  text-decoration: none;
}

.host-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.host-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--offer-primary-text);
}

.tag-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.tag-row::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.tag-item {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-size: 15px;
  color: var(--offer-secondary-text);
}

.chip-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--offer-gray-100);
  border-radius: 16px;
  font-size: 14px;
  color: var(--offer-primary-text);
  white-space: nowrap;
}

.chip-pill.accent {
  background: var(--offer-accent);
  color: white;
  font-weight: 500;
}

/* Section cards */
.offer-section {
  background: var(--offer-surface-white);
  border-radius: 12px;
  padding: 20px;
  margin: 16px 16px;
  box-shadow: var(--offer-shadow-card);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--offer-primary-text);
}

.section-title .icon {
  width: 24px;
  height: 24px;
  color: var(--offer-accent);
}

.section-content {
  font-size: 15px;
  line-height: 1.5;
  color: var(--offer-secondary-text);
}

.options-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--offer-primary-text);
}

.option-icon {
  width: 24px;
  height: 24px;
  color: var(--offer-accent);
}

/* Calendar and booking */
.date-picker-field {
  background: var(--offer-surface-gray);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 15px;
  width: 100%;
  margin-bottom: 12px;
  cursor: pointer;
}

.booking-helper {
  font-size: 14px;
  color: var(--offer-secondary-text);
  margin-bottom: 16px;
}

.booking-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: transparent;
  border: 2px solid var(--offer-accent);
  color: var(--offer-accent);
  font-size: 17px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.booking-btn:hover {
  background: rgba(240, 92, 93, 0.05);
}

.booking-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Reviews section */
.reviews-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.review-item {
  border-bottom: 1px solid var(--offer-gray-100);
  padding-bottom: 16px;
}

.review-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.review-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.reviewer-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.reviewer-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--offer-primary-text);
}

.review-stars {
  display: flex;
  gap: 2px;
  color: var(--offer-accent);
  font-size: 14px;
  margin-bottom: 4px;
}

.review-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--offer-secondary-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.empty-reviews {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
  color: var(--offer-secondary-text);
  text-align: center;
}

.empty-reviews img {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  opacity: 0.6;
}

/* Sticky price bar */
.sticky-price-bar {
  position: fixed;
  bottom: 56px; /* space for bottom nav */
  left: 0;
  right: 0;
  background: var(--offer-surface-white);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
  padding-top: 16px;
  padding-bottom: 16px;
}

.price-info {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  white-space: nowrap;
}

.price-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--offer-accent);
  margin-right: 5px;
}

.price-period {
  font-size: 14px;
  color: var(--offer-secondary-text);
}

/* Центрируем текст в кнопке Book */
.action-btn {
  background: var(--offer-accent);
  color: white;
  border: none;
  border-radius: 16px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  height: 44px;
  min-width: 120px;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Увеличиваем расстояние между кнопками в шапке */
.gallery-controls {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 16px; /* Увеличиваем отступ между кнопками */
  z-index: 10;
}

/* Переносим блок с принимаемыми животными на новую строку */
.pet-types-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  width: 100%;
}

/* Изменяем цвет выделения в календаре */
.flatpickr-day.selected, 
.flatpickr-day.startRange, 
.flatpickr-day.endRange, 
.flatpickr-day.selected.inRange, 
.flatpickr-day.startRange.inRange, 
.flatpickr-day.endRange.inRange, 
.flatpickr-day.selected:focus, 
.flatpickr-day.startRange:focus, 
.flatpickr-day.endRange:focus, 
.flatpickr-day.selected:hover, 
.flatpickr-day.startRange:hover, 
.flatpickr-day.endRange:hover, 
.flatpickr-day.selected.prevMonthDay, 
.flatpickr-day.startRange.prevMonthDay, 
.flatpickr-day.endRange.prevMonthDay, 
.flatpickr-day.selected.nextMonthDay, 
.flatpickr-day.startRange.nextMonthDay, 
.flatpickr-day.endRange.nextMonthDay {
  background: #F05C5D !important;
  border-color: #F05C5D !important;
  color: #fff !important;
  box-shadow: none !important;
}

.flatpickr-day.inRange, 
.flatpickr-day.prevMonthDay.inRange, 
.flatpickr-day.nextMonthDay.inRange, 
.flatpickr-day.today.inRange, 
.flatpickr-day.prevMonthDay.today.inRange, 
.flatpickr-day.nextMonthDay.today.inRange, 
.flatpickr-day:hover, 
.flatpickr-day.prevMonthDay:hover, 
.flatpickr-day.nextMonthDay:hover, 
.flatpickr-day:focus, 
.flatpickr-day.prevMonthDay:focus, 
.flatpickr-day.nextMonthDay:focus {
  background: rgba(240, 92, 93, 0.1) !important;
  border-color: rgba(240, 92, 93, 0.3) !important;
}

/* Переопределяем все синие цвета в календаре */
.flatpickr-calendar {
  --cal-color: #F05C5D !important;
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg {
  fill: #F05C5D !important;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: #333 !important;
}

.flatpickr-day.today {
  border-color: #F05C5D !important;
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  background: rgba(240, 92, 93, 0.2) !important;
  border-color: #F05C5D !important;
  color: #333 !important;
}

/* Синяя полоса между датами диапазона */
.rangeMode .flatpickr-day.inRange {
  background-color: rgba(240, 92, 93, 0.1) !important;
  border-color: rgba(240, 92, 93, 0.2) !important;
  box-shadow: -5px 0 0 rgba(240, 92, 93, 0.1), 5px 0 0 rgba(240, 92, 93, 0.1) !important;
}

/* Переопределяем активный день недели */
.flatpickr-calendar .flatpickr-weekday {
  color: rgba(0,0,0,0.54) !important;
}

/* Переопределяем стили для hover состояния */
.flatpickr-day:hover {
  background: rgba(240, 92, 93, 0.1) !important;
  border-color: rgba(240, 92, 93, 0.1) !important;
}

/* Удаляем синюю линию между датами */
.flatpickr-day.inRange:before, 
.flatpickr-day.inRange:after,
.flatpickr-day.startRange:before,
.flatpickr-day.startRange:after,
.flatpickr-day.endRange:before,
.flatpickr-day.endRange:after {
  background: rgba(240, 92, 93, 0.1) !important;
}

/* Исправляем отступы на странице offer */
.offer-section {
  margin-bottom: 24px;
}

/* The shake animation for the "Book" button */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
  animation: shake 0.6s ease-in-out;
}

/* Responsive adjustments */
@media (min-width: 768px) {
  .gallery-hero {
    height: 80vh;
    max-height: 600px;
  }
  
  .offer-hero-info {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -40px;
  }
  
  .offer-section {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .sticky-price-bar {
    display: none; /* Hide on desktop as per requirements */
  }
}

/* Accessibility overrides */
.gallery-control-btn,
.action-btn,
.booking-btn {
  min-width: 44px;
  min-height: 44px;
}

/* Дополнительный отступ для страницы offer */
.offer-section:last-of-type {
  margin-bottom: 80px;
}

/* Специальные отступы для раздела с отзывами */
#reviews {
  margin-bottom: 80px !important;
}

/* Стили для пустых отзывов */
.empty-reviews {
  padding-bottom: 30px !important;
  margin-bottom: 20px !important;
}

/* Стили для новой парящей кнопки Book */
.floating-book-btn {
  position: fixed;
  bottom: 76px; /* space for bottom nav + margin */
  right: 20px;
  background: #F05C5D;
  color: white;
  border: none;
  border-radius: 28px;
  padding: 8px 16px; /* Уменьшаем отступы */
  font-size: 14px; /* Уменьшаем размер шрифта */
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(240, 92, 93, 0.4);
  cursor: pointer;
  z-index: 1000;
  display: flex;
  flex-direction: row; /* Меняем на горизонтальное выравнивание */
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-width: auto; /* Убираем минимальную ширину */
  text-align: center;
  gap: 8px; /* Добавляем отступ между элементами */
}

.floating-book-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(240, 92, 93, 0.5);
}

.floating-book-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(240, 92, 93, 0.3);
}

.btn-price-info {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 0; /* Убираем отступ снизу */
}

/* Удаляем стили для выбранных дат */
.floating-book-btn.dates-selected {
  /* Убираем изменение цвета */
  min-width: auto;
  padding: 8px 16px;
}

.floating-book-btn.dates-selected .btn-price-info {
  font-size: 14px;
  font-weight: 600;
}

/* Медиа-запрос для десктопа */
@media (min-width: 768px) {
  .floating-book-btn {
    right: 40px;
    bottom: 40px;
    min-width: auto;
    font-size: 15px;
    padding: 10px 20px;
  }
}

/* Make edit button positioned relative to the profile name container */
.profile-hero-info {
    position: relative;
}

/* Добавляем стили для кнопки редактирования, чтобы она была помещена выше хедера */
.app-header + .container .edit-profile-btn {
    top: -20px !important;
    z-index: 1010 !important; /* Z-index выше, чем у хедера (1000) */
}

/* Удаляю конфликтующие сбросы */
/* .container .profile-view-page {
  margin-top: 0 !important;
  padding-top: 0 !important;
} */
.profile-view-page {
  /* Удаляю padding-top: 0 !important; */
}

/* Добавляю нужный отступ */
.container .profile-view-page {
  margin-top: 5px !important;
}

/* --- MODERN GALLERY NAVIGATION BUTTONS --- */
.gallery-navigation {
  position: absolute;
    top: 0;
  left: 0;
    right: 0;
  bottom: 0;
  pointer-events: none; /* Позволяет кликам проходить через контейнер */
  z-index: 15;
}

.gallery-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5) !important;
  border: none;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  pointer-events: auto; /* Восстанавливаем кликабельность для кнопок */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 20;
}

.gallery-nav-btn:hover {
  background: rgba(255, 255, 255, 0.5) !important;
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.gallery-nav-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.gallery-nav-btn.prev {
  left: 16px;
}

.gallery-nav-btn.next {
  right: 16px;
}

.gallery-navigation .gallery-nav-btn svg {
  width: 24px !important;
  height: 24px !important;
  fill: none !important;
  opacity: 0.8;
  stroke-width: 2.5 !important;
  min-width: 24px !important;
  min-height: 24px !important;
}

.gallery-navigation .gallery-nav-btn:hover svg {
  opacity: 1;
}

.gallery-navigation .gallery-nav-btn:hover svg path {
  stroke: #000 !important;
  stroke-width: 2.5 !important;
}

/* Скрываем кнопки на мобильных если только одно фото */
.gallery-navigation.single-photo {
  display: none;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
  .gallery-nav-btn {
    width: 40px;
    height: 40px;
  }

  .gallery-nav-btn.prev {
    left: 12px;
  }

  .gallery-nav-btn.next {
    right: 12px;
  }

  .gallery-navigation .gallery-nav-btn svg {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }
}

/* Анимация появления кнопок при наведении на галерею */
.gallery-hero .gallery-navigation {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-hero:hover .gallery-navigation {
  opacity: 1;
}

/* На мобильных кнопки всегда видны */
@media (max-width: 768px) {
  .gallery-hero .gallery-navigation {
    opacity: 1;
  }
}

/* Убираем старые стили для slider-btn которые больше не нужны */
.slider-btn {
  display: none !important;
}

.prev-btn, .next-btn {
  display: none !important;
}

/* Create/Edit Offer Page Styles */
.create-offer-page {
    padding: 10px 0 90px 0 !important; /* Минимальный отступ сверху для шапки */
    background-color: #ffffff;
    position: relative;
}

/* Section Card Styles for Offer Creation - убираем стиль карточек */
.section-card {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-bottom: 24px;
    box-shadow: none;
    border: none;
}

.section-header {
    margin-bottom: 16px;
}

.section-content {
    /* Content styles inherit from form styles */
}

/* Стили для полей формы на странице редактирования оффера */
.create-offer-page .form-group {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 16px;
    margin: 0 16px 8px 16px; /* Добавляем боковые отступы только к карточкам */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.create-offer-page .form-group label {
    display: block;
    font-size: 13px;
    color: #8E8E93;
    margin-bottom: 8px;
}

.create-offer-page .form-group input,
.create-offer-page .form-group textarea,
.create-offer-page .form-group select {
    width: 100%;
    border: none;
    font-size: 17px;
    color: #000000;
    background: transparent;
    resize: none;
    padding: 0;
    box-sizing: border-box;
}

.create-offer-page .form-group input::placeholder,
.create-offer-page .form-group textarea::placeholder {
    color: #C7C7CC;
}

.create-offer-page .form-group input:focus,
.create-offer-page .form-group textarea:focus,
.create-offer-page .form-group select:focus {
    outline: none;
}

/* Стили для счетчика символов */
.create-offer-page .char-counter {
    font-size: 12px;
    color: #8E8E93;
    margin-top: 4px;
    text-align: right;
}

/* Стили для автокомплита города */
.create-offer-page .autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-radius: 12px;
    margin-top: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

/* Стили для галереи фото */
.create-offer-page .photo-gallery {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 16px;
    margin: 0 16px 8px 16px; /* Добавляем боковые отступы */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.create-offer-page .photo-placeholder {
    margin-top: 10px;
    color: #888;
    font-size: 14px;
}

/* Адаптивность для карточек услуг */

/* Планшеты */
@media (min-width: 768px) and (max-width: 991px) {
  .services-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    padding: 16px;
    padding-bottom: 90px;
    max-width: 1200px;
  }

  .service-title {
    font-size: 13px;
  }

  .service-location {
    font-size: 12px;
  }

  .provider-name {
    font-size: 12px;
  }

  .provider-rating span {
    font-size: 11px;
  }
}

/* Десктоп */
@media (min-width: 992px) {
  .services-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    padding: 20px;
    max-width: none;
    padding-bottom: 40px;
  }

  .service-title {
    font-size: 14px;
  }

  .service-location {
    font-size: 13px;
  }

  .provider-name {
    font-size: 13px;
  }

  .provider-rating span {
    font-size: 12px;
  }
}

/* Большие экраны */
@media (min-width: 1400px) {
  .services-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
  }
  .service-card {
    min-width: 280px;
  }
}

/* Для очень маленьких экранов */
@media (max-width: 360px) {
  .offers-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 8px;
    padding-bottom: 70px;
  }
  .service-card {
    max-width: 100%;
    min-width: 0;
  }
  .service-photo-container {
    padding-bottom: 60%;
  }
}

.service-location {
  font-size: 11px;
  color: #717171;
    margin: 0;
}

.service-location i {
  color: #ff5a5f;
  margin-right: 4px;
}

/* Адаптивность для offers-grid */

/* Планшеты */
@media (min-width: 768px) and (max-width: 991px) {
  .offers-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    padding: 16px;
    padding-bottom: 90px;
    max-width: 1200px;
  }
  .service-card {
    max-width: 320px;
    min-width: 160px;
  }
  .service-photo-container {
    padding-bottom: 50%;
  }
}

/* Десктоп */
@media (min-width: 992px) {
  .offers-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
    max-width: none;
    padding-bottom: 40px;
  }
  .service-card {
    max-width: none;
    min-width: 220px;
  }
  .service-photo-container {
    padding-bottom: 45%;
  }
}

/* Большие экраны */
@media (min-width: 1400px) {
  .offers-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
  }
  .service-card {
    min-width: 280px;
  }
}

/* Для очень маленьких экранов */
@media (max-width: 360px) {
  .offers-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 8px;
    padding-bottom: 70px;
  }
  .service-card {
    max-width: 100%;
    min-width: 0;
  }
  .service-photo-container {
    padding-bottom: 60%;
  }
}

/* --- OFFER REDESIGN (AIRBNB STYLE) --- */

/* Color tokens */
:root {
  --offer-primary-text: #212121;
  --offer-secondary-text: #616161;
  --offer-surface-white: #FFFFFF;
  --offer-surface-gray: #F9F9F9;
  --offer-accent: #F05C5D;
  --offer-secondary: #B79AD6;
  --offer-gray-100: #F1F2F6;
  --offer-shadow-card: 0 4px 12px rgba(0,0,0,0.05);
  --offer-shadow-floating: 0 8px 16px rgba(0,0,0,0.1);
}

/* Desktop Layout for Offer Page */
.offer-desktop-layout {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  margin: 0;
  padding: 0;
  /* Убираем padding-top для мобильных - галерея должна быть edge-to-edge */
}

.offer-info-col {
  order: 2;
  width: 100%;
  padding: 0 16px; /* Добавляем боковые отступы для мобильных */
  padding-top: 20px; /* Добавляем отступ сверху только для контента */
}

.offer-gallery-col {
  order: 1;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Desktop styles */
@media (min-width: 768px) {
  .offer-desktop-layout {
    flex-direction: row;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
    padding: 20px;
    padding-top: 100px; /* Добавляем отступ сверху для шапки только на десктопе */
  }

  .offer-info-col {
    order: 1;
    flex: 1;
    max-width: 600px;
    padding: 0; /* Убираем боковые отступы на десктопе */
  }

  .offer-gallery-col {
    order: 2;
    flex: 1;
    max-width: 600px;
    position: sticky;
    top: 80px;
    height: fit-content;
  }
}

/* Gallery Hero (Edge-to-edge on mobile, contained on desktop) */
.gallery-hero {
  position: relative;
  width: 100%;
  height: 70vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: block;
  border-radius: 0;
}

/* Mobile: Edge-to-edge gallery */
@media (max-width: 767px) {
  .gallery-hero {
    width: 100vw;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    margin-right: 0;
  }

  /* На мобильных устройствах сохраняем object-fit: cover */
  .gallery-hero-img {
    object-fit: cover;
  }
}

/* Desktop: Contained gallery */
@media (min-width: 768px) {
  .gallery-hero {
    height: 400px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    background-color: #f5f5f5; /* Добавляем фон для случаев, когда изображение не заполняет всю область */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: height 0.3s ease;
  }

  /* Адаптивная высота для разных ориентаций изображений */
  .gallery-hero.portrait-photo {
    height: 500px; /* Увеличиваем высоту для портретных фото */
  }

  .gallery-hero.landscape-photo {
    height: 350px; /* Уменьшаем высоту для альбомных фото */
  }

  .gallery-hero.square-photo {
    height: 400px; /* Стандартная высота для квадратных фото */
  }

  .desktop-gallery-hero {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: height 0.3s ease;
  }

  .desktop-gallery-hero.portrait-photo {
    height: 500px;
  }

  .desktop-gallery-hero.landscape-photo {
    height: 350px;
  }

  .desktop-gallery-hero.square-photo {
    height: 400px;
  }

  /* Для десктопа изменяем object-fit на contain, чтобы изображение полностью помещалось */
  .gallery-hero .gallery-hero-img,
  .desktop-gallery-hero .gallery-hero-img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .gallery-hero .gallery-slide,
  .desktop-gallery-hero .gallery-slide {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.gallery-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-slide {
  width: 100%;
  height: 100%;
  display: none;
}

.gallery-controls {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 16px;
  z-index: 10;
}

.gallery-control-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.gallery-control-btn:hover {
  background: #fff;
  transform: scale(1.05);
}

.gallery-counter {
  position: absolute;
  bottom: 32px;
  right: 16px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 12px;
  z-index: 10;
}

/* Hero info card */
.offer-hero-info {
  position: relative;
  background: var(--offer-surface-white);
  border-radius: 12px;
  padding: 24px;
  margin: 16px;
  box-shadow: var(--offer-shadow-card);
  z-index: 20;
}

/* Mobile: Hero info overlaps gallery */
@media (max-width: 767px) {
  .offer-hero-info {
    margin-top: -20px;
    margin-left: 16px;
    margin-right: 16px;
  }
}

/* Desktop: Hero info is separate */
@media (min-width: 768px) {
  .offer-hero-info {
    margin: 0 0 24px 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
  }
}

@media (min-width: 768px) {
  .offer-hero-info {
    padding: 24px 20px 32px;
    background: white;
  }
}

/* === CHAT BUTTON STYLES === */
.floating-chat-btn {
  position: fixed;
  bottom: 100px; /* Above bottom navbar */
  left: 20px;
  z-index: 1000;
}

.chat-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ff5a5f;
  color: white;
  padding: 12px 20px;
  border-radius: 24px;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.2s ease;
  box-shadow: 0 4px 12px rgba(255, 90, 95, 0.3);
}

.chat-btn:hover {
  background: #f44336;
  color: white;
  text-decoration: none;
}

.chat-btn i {
  font-size: 16px;
}

/* === CHAT LIST STYLES === */
.chat-list-container {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.chat-list-container h2 {
  margin-bottom: 20px;
  color: #333;
}

.chat-rooms-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
}

.chat-room-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background: white;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease;
  position: relative;
}

.chat-room-item:hover {
  background: #f8f9fa;
  text-decoration: none;
  color: inherit;
}

.chat-room-avatar-link {
  display: block;
  text-decoration: none;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.chat-room-avatar-link:hover {
  transform: scale(1.05);
}

.chat-room-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
  flex-shrink: 0;
}

.chat-room-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-room-info-link {
  flex: 1;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  display: block;
  margin-left: 12px; /* shift text block closer to avatar */
  text-align: left; /* force left alignment for inner text */
}

.chat-room-info-link:hover {
  text-decoration: none;
  color: inherit;
}

.default-avatar {
  width: 100%;
  height: 100%;
  background: #f1f2f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #636e72;
}

.chat-room-info {
  flex: 1;
  min-width: 0;
}

.chat-room-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  gap: 8px; /* Add gap between elements */
}

/* Ensure last message aligns left and doesn't center vertically with avatar */
.chat-room-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.chat-room-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1; /* Allow header to take available space */
  min-width: 0; /* Allow shrinking */
  text-align: left;
}

/* Stronger specificity for header text alignment */
.chat-list-container .chat-room-header h4 { text-align: left !important; }

.chat-time {
  font-size: 12px;
  color: #666;
  margin-left: 8px;
  flex-shrink: 0; /* Prevent time from shrinking */
  white-space: nowrap; /* Keep time on one line */
}

.chat-room-preview {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.offer-title { display: none; }

.last-message {
  font-size: 14px;
  color: #666;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left; /* override global .container p centering */
}

/* Increase specificity to beat generic ".container p { text-align:center }" rule */
.chat-list-container .last-message { text-align: left !important; }

.unread-badge {
  position: relative; /* Change from absolute to relative */
  top: auto; /* Reset positioning */
  right: auto; /* Reset positioning */
  background: #ff5a5f;
  color: white;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: bold;
  min-width: 18px;
  text-align: center;
  margin-left: 8px; /* Add margin from time */
  flex-shrink: 0; /* Prevent shrinking */
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
}

.empty-icon {
  font-size: 48px;
  color: #ccc;
  margin-bottom: 16px;
}

.empty-subtitle {
  color: #666;
  margin: 8px 0 0 0;
}

/* === CHAT ROOM STYLES === */
.chat-room-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  max-height: 600px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.chat-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  justify-content: space-between;
}

.back-btn {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  margin-right: 12px;
  transition: background-color 0.2s ease;
  color: #333;
}

.back-btn:hover {
  background-color: #fff;
  text-decoration: none;
  color: #333;
}

.chat-header-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.chat-header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
}

.chat-header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-header-avatar .default-avatar {
  width: 100%;
  height: 100%;
  background: #f1f2f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #636e72;
  font-size: 16px;
}

.chat-header-text h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.offer-info {
  font-size: 12px;
  color: #008489;
  margin: 2px 0 0 0;
}

.offer-link-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #008489;
  transition: all 0.2s ease;
}

.offer-link-btn:hover {
  background: #e9ecef;
  color: #f44336;
  text-decoration: none;
}

.messages-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.messages-list {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.message {
  max-width: 70%;
  word-wrap: break-word;
}

.own-message {
  align-self: flex-end;
}

.other-message {
  align-self: flex-start;
}

.system-message {
  align-self: center;
  max-width: 90%;
}

.system-content {
  text-align: center;
  font-style: italic;
  color: #666;
  font-size: 14px;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 16px;
}

.message-content {
  padding: 12px 16px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.4;
}

.own-message .message-content {
  background: #ff5a5f;
  color: white;
  border-bottom-right-radius: 6px;
}

.other-message .message-content {
  background: #fff;
  color: #374151; /* Темно-серый текст */
  border-bottom-left-radius: 6px;
}

.message-time {
  font-size: 11px;
  color: #999;
  margin-top: 4px;
  text-align: right;
}

.other-message .message-time {
  text-align: left;
}

.chat-input-container {
  padding: 16px 20px;
  border-top: 1px solid #e9ecef;
}

.message-form {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

#messageInput {
  width: 100%;
  border: none;
  background: transparent;
  padding: 2px 4px; /* Уменьшаем отступы с 4px 6px до 2px 4px */
  font-size: 15px;
  line-height: 1.4;
  resize: none;
  outline: none;
  font-family: inherit;
  min-height: 16px; /* Уменьшаем минимальную высоту с 18px до 16px */
  max-height: 120px;
  overflow-y: auto;
}

#messageInput:focus {
  border-color: #ff5a5f;
}

.send-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #ff5a5f;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.send-btn:hover {
  background: #f44336;
}

.send-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .chat-room-container {
    height: calc(100vh - 120px);
  }

  .chat-list-container {
    padding: 16px;
  }

  .chat-room-item {
    padding: 12px 16px;
  }

  .chat-room-avatar {
    width: 44px;
    height: 44px;
  }

  .message {
    max-width: 85%;
  }

  .message-content {
    padding: 10px 14px;
  }

  #messageInput {
    padding: 10px 14px;
  }
}

/* === MODERN CHAT STYLES === */

/* Modern chat container - fullscreen */
.modern-chat-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  background: #f3f4f6; /* Светло-серый фон как в макете */
  z-index: 1000;
}

/* Modern chat header */
.modern-chat-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 8px 16px;
  z-index: 1002;
  display: flex;
  align-items: flex-start; /* Изменяем с center на flex-start для правильного выравнивания */
  gap: 12px;
  height: 64px; /* Fixed height for consistency */
  padding-top: 12px; /* Добавляем отступ сверху для компенсации выравнивания */
}

.back-btn-modern {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent !important;
  color: #6b7280 !important;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  cursor: default !important;
  text-decoration: none !important; /* Убираем подчеркивание ссылки */
  /* Remove all hover effects */
}

/* Override all possible hover effects for back button */
.back-btn-modern:hover,
.back-btn-modern:active,
.back-btn-modern:focus {
  background: transparent !important;
  color: #6b7280 !important;
  cursor: default !important;
  transform: none !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important; /* Убираем подчеркивание при всех состояниях */
}

.modern-chat-header .chat-header-info {
  flex: 1;
  display: flex;
  align-items: flex-start; /* Выравнивание по верхнему краю для правильного позиционирования */
  gap: 5px; /* Gap только между аватаркой и текстовым блоком */
  min-width: 0;
}

.modern-chat-header .chat-header-avatar-link {
  display: block;
  text-decoration: none;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.modern-chat-header .chat-header-avatar-link:hover {
  transform: scale(1.05);
}

.modern-chat-header .chat-header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.modern-chat-header .chat-header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modern-chat-header .chat-header-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Начинаем с верха, не по центру */
  align-items: flex-start; /* Выравниваем текст по левому краю */
  gap: 0; /* Убираем gap между именем и описанием */
  line-height: 1; /* Компактный line-height */
  padding-top: 2px; /* Небольшой отступ сверху для выравнивания с аватаркой */
}

.modern-chat-header .chat-header-text h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Messages area */
.modern-messages-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
  padding-top: 80px; /* Adjust for fixed header height */
  padding-bottom: var(--message-input-height); /* Используем CSS переменную */
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  transition: padding-bottom 0.2s ease; /* Плавный переход при изменении высоты */
}

.modern-messages-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 16px;
  margin-top: auto;
  flex-shrink: 0;
}

/* Modern message styling */
.modern-message {
  display: flex;
  flex-direction: column;
  max-width: 75%; /* Уменьшаем максимальную ширину */
  position: relative;
}

.modern-message.own-message {
  align-self: flex-end;
  align-items: flex-end;
}

.modern-message.other-message {
  align-self: flex-start;
  align-items: flex-start;
}

.modern-message.system-message {
  align-self: center;
  max-width: 100%;
  align-items: center;
}

/* Message bubble */
.message-bubble {
  background: #fff;
  border-radius: 20px 20px 20px 4px; /* Скругления для входящих сообщений */
  padding: 12px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); /* Тень как в макете */
  position: relative;
  max-width: 100%;
  word-wrap: break-word;
}

.own-message .message-bubble {
  background: #f87171; /* Красный цвет как в макете (bg-red-400) */
  color: white;
  border-radius: 20px 20px 4px 20px; /* Скругления для исходящих сообщений */
}

.other-message .message-bubble {
  background: #fff;
  color: #374151; /* Темно-серый текст */
  border-radius: 20px 20px 20px 4px; /* Скругления для входящих сообщений */
}

.message-text {
  font-size: 14px; /* Уменьшаем размер шрифта */
  line-height: 1.4;
  margin: 0;
  white-space: pre-wrap;
}

/* Photo messages */
.photo-message {
  padding: 0; /* Убираем внутренние отступы */
  border-radius: 0; /* Убираем скругление контейнера */
  overflow: visible; /* Позволяем изображению быть видимым */
  max-width: 280px;
  background: none !important; /* Убираем фон принудительно */
  border: none; /* Убираем границы если есть */
  box-shadow: none !important; /* Убираем тень */
}

/* Отменяем стили пузыря сообщений для фото */
.own-message .photo-message,
.other-message .photo-message {
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.message-photo {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
  max-height: 300px; /* Увеличиваем максимальную высоту */
  max-width: 250px; /* Ограничиваем ширину для миниатюр */
  object-fit: cover; /* Обрезаем изображение с сохранением пропорций */
  cursor: pointer; /* Показываем что можно кликнуть */
  transition: all 0.2s ease;
}

.chat-photo-link {
  display: block;
  text-decoration: none;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  max-width: fit-content; /* Адаптируется к размеру изображения */
}

.chat-photo-link:hover .message-photo {
  transform: scale(1.02); /* Небольшое увеличение при наведении */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Добавляем иконку для указания что можно увеличить */
.chat-photo-link::after {
  content: '\f00e'; /* FontAwesome search-plus icon */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.chat-photo-link:hover::after {
  opacity: 1;
}

/* Message meta (time + status) */
.message-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px; /* Уменьшаем gap */
  margin-top: 4px;
  font-size: 11px;
  min-height: 16px; /* Обеспечиваем минимальную высоту для видимости */
}

.other-message .message-meta {
  justify-content: flex-start; /* Для входящих сообщений выравниваем слева */
}

.message-time {
  color: rgba(248, 113, 113, 0.7); /* Светло-красный для исходящих */
  font-size: 11px;
  white-space: nowrap; /* Не переносим время */
}

.other-message .message-time {
  color: #9ca3af; /* Серый для входящих */
}

/* Message status indicators - только для исходящих сообщений */
.own-message .message-status {
  display: flex;
  align-items: center;
  gap: 1px;
  opacity: 0.8;
}

.other-message .message-status {
  display: none; /* Скрываем статусы для входящих сообщений */
}

.message-status i {
  font-size: 14px; /* Увеличиваем размер галочек */
  color: rgba(248, 113, 113, 0.7);
}

.message-status[data-status="sent"] i {
  color: rgba(248, 113, 113, 0.6);
}

.message-status[data-status="read"] i {
  color: rgba(248, 113, 113, 0.7);
}

.status-check-second {
  margin-left: -8px;
}

/* System messages */
.system-content {
  background: rgba(0,0,0,0.1);
  color: #666;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  text-align: center;
  font-style: italic;
}

/* Fixed message input at bottom */
.modern-message-input-container {
  position: fixed;
  bottom: 0; /* Примыкаем к самому низу и на десктопе */
  left: 0; /* Возвращаем к полной ширине */
  right: 0; /* Возвращаем к полной ширине */
  max-width: none; /* Убираем ограничение ширины */
  margin: 0;
  background: transparent; /* Remove background */
  padding: 0; /* Remove all padding for edge-to-edge */
  border-top: none; /* Remove border */
  box-shadow: none; /* Remove shadow */
  z-index: 1001;
}

.modern-message-form {
  width: 100%;
}

.input-wrapper {
  display: flex;
  align-items: center; /* Better center alignment */
  gap: 8px; /* Возвращаем нормальный gap */
  background: #fff; /* Белый фон для всего блока */
  border-radius: 0; /* Remove border radius for edge-to-edge */
  border: none; /* Remove border for cleaner look */
  border-top: none; /* Убираем верхнюю границу полностью */
  min-height: auto; /* Убираем фиксированную высоту */
  box-shadow: none; /* Убираем тень */
}

.attach-btn {
  width: 28px; /* Уменьшаем с 32px до 28px */
  height: 28px; /* Уменьшаем с 32px до 28px */
  border-radius: 50%;
  background: #f87171; /* Красный цвет как у кнопки отправки */
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white; /* Белая иконка */
  cursor: pointer;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
  font-size: 16px; /* Размер иконки плюса */
}

.attach-btn:hover {
  background: #ef4444; /* Темнее красный при наведении */
}

.text-input-container {
  flex: 1;
  position: relative;
}

#messageInput {
  width: 100%;
  border: none;
  background: #f3f4f6; /* Серый фон как в макете */
  padding: 10px 16px; /* Немного уменьшаем отступы */
  font-size: 14px;
  line-height: 1.4;
  resize: none;
  outline: none;
  font-family: inherit;
  min-height: auto; /* Убираем фиксированную высоту */
  max-height: 120px;
  overflow-y: auto;
  border-radius: 20px; /* Немного уменьшаем скругление */
  transition: all 0.2s ease;
}

#messageInput::placeholder {
  color: #9ca3af; /* Серый placeholder */
}

#messageInput:focus {
  background: #f3f4f6;
  outline: 2px solid #d1d5db; /* Серая обводка при фокусе вместо синей */
  outline-offset: 0;
}

.send-btn-modern {
  width: 36px; /* Увеличиваем с 28px до 36px */
  height: 36px; /* Увеличиваем с 28px до 36px */
  border-radius: 50%;
  background: #f87171; /* Красный цвет как в макете */
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
  font-size: 18px; /* Увеличиваем размер иконки */
  position: relative;
}

.send-btn-modern:hover {
  background: #ef4444; /* Темнее при наведении */
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3); /* Добавляем тень при наведении */
}

.send-btn-modern:disabled {
  background: #d1d5db; /* Серый когда отключена */
  cursor: not-allowed;
  box-shadow: none;
}

/* Стиль для иконки отправки */
.send-btn-modern i {
  transform: rotate(0deg); /* Убираем поворот для более понятного вида */
  font-size: 16px; /* Увеличиваем размер иконки для лучшей видимости */
  transition: transform 0.2s ease; /* Плавная анимация при наведении */
}

.send-btn-modern:hover i {
  transform: translateX(2px); /* Легкое движение вправо при наведении */
}

/* Photo preview overlay */
.photo-preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.9);
  display: flex;
  flex-direction: column;
  z-index: 2000;
}

.photo-preview-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.photo-preview-header {
  padding: 16px;
  display: flex;
  justify-content: flex-end;
}

.close-preview-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
}

.close-preview-btn:hover {
  background: rgba(255,255,255,0.2);
}

.photo-preview-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.photo-preview-actions {
  padding: 20px;
  display: flex;
  justify-content: center;
  padding-bottom: 40px;
}

.send-photo-btn {
  background: #ff5a5f;
  color: white;
  border: none;
  border-radius: 24px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.2s ease;
}

.send-photo-btn:hover {
  background: #f44336;
}


/* Loading animation for sending messages */
.message-sending {
  opacity: 0.7;
}

.message-sending .message-status::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  border-top-color: rgba(255,255,255,0.8);
  animation: spin 1s ease-in-out infinite;
  margin-left: 4px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Hide bottom navigation on chat page */
/* body.chat-page .bottom-navbar {
  display: none;
} */

/* Ensure chat takes full height but leaves space for bottom nav */
body.chat-page {
  overflow: hidden;
}

body.chat-page .container {
  padding: 0;
  margin: 0;
  max-width: none;
}

/* Modern chat styles */
.modern-chat-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f0f2f5;
  z-index: 1000;
}

/* Desktop centering */
@media (min-width: 768px) {
  .modern-chat-container {
    max-width: 800px; /* Limit width on desktop */
    left: 50%;
    transform: translateX(-50%);
    border-left: 1px solid #e9ecef;
    border-right: 1px solid #e9ecef;
  }
}

/* Hide base page back button when chat is active */
body.chat-page .app-header .back-btn {
  display: none;
}

/* Усиленная специфичность для современного чата */
.modern-chat-container .modern-message .message-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  margin-top: 4px !important;
  font-size: 11px !important;
  min-height: 16px !important;
}

.modern-chat-container .modern-message.other-message .message-meta {
  justify-content: flex-start !important;
}

.modern-chat-container .modern-message .message-time {
  color: rgba(248, 113, 113, 0.7) !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  text-align: right !important;
}

.modern-chat-container .modern-message.other-message .message-time {
  color: #9ca3af !important;
  text-align: left !important;
}

.modern-chat-container .modern-message.own-message .message-status {
  display: flex !important;
  align-items: center !important;
  gap: 1px !important;
  opacity: 0.8 !important;
}

.modern-chat-container .modern-message.other-message .message-status {
  display: none !important;
}

.modern-chat-container .modern-message .message-status i {
  font-size: 14px !important;
  color: rgba(248, 113, 113, 0.7) !important;
}

.modern-chat-container .modern-message .message-status[data-status="sent"] i {
  color: rgba(248, 113, 113, 0.6) !important;
}

.modern-chat-container .modern-message .message-status[data-status="read"] i {
  color: rgba(248, 113, 113, 0.7) !important;
}

.modern-chat-container .modern-message .status-check-second {
  margin-left: -8px !important;
}

.modern-chat-container .modern-message .message-time {
  color: rgba(248, 113, 113, 0.7) !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  text-align: right !important;
}

.modern-chat-container .modern-message.other-message .message-time {
  color: #9ca3af !important;
  text-align: left !important;
}

.modern-chat-container .modern-message.own-message .message-time {
  color: rgba(255, 255, 255, 0.8) !important; /* Белый цвет для исходящих сообщений */
  text-align: right !important;
}

.modern-chat-container .modern-message .message-status i {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.8) !important; /* Белый цвет для видимости на красном фоне */
}

.modern-chat-container .modern-message .message-status[data-status="sent"] i {
  color: rgba(255, 255, 255, 0.6) !important; /* Немного прозрачнее для отправленных */
}

.modern-chat-container .modern-message .message-status[data-status="read"] i {
  color: rgba(255, 255, 255, 0.8) !important; /* Более яркий для прочитанных */
}

.modern-chat-container .modern-message.own-message .message-status[data-status="read"] i {
  color: rgba(255, 255, 255, 0.8) !important; /* Более яркий для прочитанных */
}

/* Дополнительные перекрывающие стили для гарантированной видимости */
.modern-chat-container .own-message .message-meta .message-time {
  color: rgba(255, 255, 255, 0.8) !important;
  margin-top: 0 !important;
}

.modern-chat-container .own-message .message-meta .message-status {
  display: flex !important;
}

.modern-chat-container .own-message .message-meta .message-status i {
  color: rgba(255, 255, 255, 0.8) !important;
}

@media (min-width: 768px) {
  .modern-message {
    max-width: 60%;
  }

  .photo-message {
    max-width: 320px;
  }

  .modern-message-input-container {
    padding: 16px 20px;
  }

  .modern-messages-area {
    --message-input-height: 126px; /* Больше места на десктопе (110px + 16px отступ) */
    padding-bottom: var(--message-input-height);
  }

  .modern-messages-list {
    padding: 0 20px;
  }
}

/* Override all possible hover effects for back button */
.back-btn-modern:hover,
.back-btn-modern:active,
.back-btn-modern:focus {
  background: transparent !important;
  color: #6b7280 !important;
  cursor: default !important;
  transform: none !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important; /* Убираем подчеркивание при всех состояниях */
}

/* Override general button styles that might interfere */
.modern-chat-header .back-btn-modern {
  background: transparent !important;
  color: #6b7280 !important;
  cursor: default !important;
}

.modern-chat-header .back-btn-modern:hover,
.modern-chat-header .back-btn-modern:active,
.modern-chat-header .back-btn-modern:focus {
  background: transparent !important;
  color: #6b7280 !important;
  cursor: default !important;
  transform: none !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  text-decoration: none !important; /* Убираем подчеркивание при всех состояниях */
}

.modern-chat-header .offer-info {
  font-size: 14px;
  color: #374151; /* Темно-серый цвет вместо синего */
  margin: 0 !important; /* Убираем все margins полностью */
  padding: 0 !important; /* Убираем все paddings */
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block !important; /* Обеспечиваем блочное поведение */
  text-align: left !important; /* Убираем центрирование из общего стиля .offer-info */
}

/* PhotoSwipe специальные стили для чата */
.pswp {
  z-index: 9999; /* Высокий z-index чтобы быть поверх всего */
}

.pswp__bg {
  background: rgba(0, 0, 0, 0.9); /* Темный фон */
}

/* Убираем возможные конфликты */
.modern-chat-container .pswp {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* CSS переменная для динамической высоты панели ввода */
:root {
  --message-input-height: 106px; /* Высота по умолчанию на мобильном (90px + 16px отступ) */
}

/* Contact info styles for sitter profile */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-info .tag-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--offer-primary-text);
}

.contact-info .tag-item i {
  color: var(--offer-accent);
  width: 16px;
  text-align: center;
}

/* Show all reviews link */
.show-all-reviews {
  display: inline-block;
  margin-top: 16px;
  color: var(--offer-accent);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.show-all-reviews:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Fix для страницы профиля - показать первый слайд по умолчанию */
.gallery-slide:first-child {
  display: flex;
}

/* Уменьшаем высоту галереи для страницы профиля ситтера */
@media (min-width: 768px) {
  body.offer-page .desktop-gallery-hero {
    height: 300px; /* Уменьшаем с 400px до 300px для профиля ситтера */
  }
  
  body.offer-page .gallery-hero {
    height: 300px; /* Уменьшаем с 400px до 300px для профиля ситтера */
  }
}

/* Правильное масштабирование изображения в галерее профиля */
.gallery-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Убираем лишние отступы в контейнере слайда */
.gallery-slide {
  height: 100%;
  width: 100%;
  position: relative;
}

.slider-container {
  height: 100%;
}

/* Дополнительные стили для мобильной версии */
@media (max-width: 767px) {
  .gallery-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* Booking Message Styles */
.booking-request-message {
    background: linear-gradient(145deg, #f8f9fa, #ffffff);
    border: 2px solid #e8f4f8;
    border-radius: 16px;
    padding: 20px;
    margin: 10px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.booking-request-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff5a5f, #ff8a80);
}

.booking-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: #ff5a5f;
    font-weight: 600;
    font-size: 16px;
}

.booking-header i {
    font-size: 20px;
    color: #ff5a5f;
}

.booking-details {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #f0f0f0;
}

.booking-info p {
    margin: 8px 0;
    color: #484848;
    line-height: 1.4;
}

.booking-info p:first-child {
    margin-top: 0;
    font-size: 15px;
}

.booking-info p:last-child {
    margin-bottom: 0;
    font-weight: 600;
    color: #ff5a5f;
    font-size: 16px;
}

.booking-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}

.booking-actions .btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.booking-actions .btn-success {
    background: linear-gradient(135deg, #48bb78, #38a169);
    color: white;
}

.booking-actions .btn-success:hover {
    background: linear-gradient(135deg, #38a169, #2f855a);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(72, 187, 120, 0.3);
}

.booking-actions .btn-danger {
    background: linear-gradient(135deg, #f56565, #e53e3e);
    color: white;
}

.booking-actions .btn-danger:hover {
    background: linear-gradient(135deg, #e53e3e, #c53030);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 101, 101, 0.3);
}

.booking-actions .btn:active {
    transform: translateY(0);
}

.booking-status {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.booking-status.confirmed {
    background: linear-gradient(135deg, #c6f6d5, #9ae6b4);
    color: #22543d;
    border: 1px solid #9ae6b4;
}

.booking-status.rejected {
    background: linear-gradient(135deg, #fed7d7, #feb2b2);
    color: #742a2a;
    border: 1px solid #feb2b2;
}

.booking-status i {
    font-size: 16px;
}

.booking-request-message .message-meta {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
    text-align: right;
}

.booking-request-message .message-time {
    color: #999;
    font-size: 12px;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .booking-request-message {
        padding: 16px;
        margin: 8px 0;
    }
    
    .booking-header {
        font-size: 15px;
    }
    
    .booking-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .booking-actions .btn {
        font-size: 13px;
        padding: 10px 14px;
    }
    
    .booking-info p {
        font-size: 14px;
    }
}

/* Animation for booking actions */
@keyframes buttonLoading {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

.booking-actions .btn:disabled {
    animation: buttonLoading 1.5s infinite;
    cursor: not-allowed;
}

.booking-actions .btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* ================================
   TYPING INDICATOR STYLES
   ================================ */

.typing-indicator-container {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 12px;
    color: #999;
    opacity: 0.8;
}

.typing-text {
    font-style: italic;
}

.typing-dots {
    display: flex;
    gap: 2px;
}

.typing-dots span {
    width: 4px;
    height: 4px;
    background-color: #999;
    border-radius: 50%;
    animation: typing-bounce 1.4s infinite ease-in-out both;
}

.typing-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0;
}

@keyframes typing-bounce {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .typing-indicator-container {
        font-size: 11px;
    }
    
    .typing-dots span {
        width: 3px;
        height: 3px;
    }
}

/* Payment card styles — unified with Booking Request */
.payment-message {
    background: linear-gradient(145deg, #fbfbfd, #ffffff);
    color: #1f2937;
    border: 2px solid #eef6fb;
    border-radius: 16px;
    padding: 20px;
    margin: 10px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

/* Accent strip on top (variant colors below) */
.payment-message::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2);
}

/* Variants */
.payment-message.payment-request::before {
    background: linear-gradient(90deg, #f093fb, #f5576c);
}

.payment-message.payment-success::before {
    background: linear-gradient(90deg, #4facfe, #00f2fe);
}

/* Keep plain background for variants (we use the accent strip) */
.payment-request,
.payment-success {
    background: linear-gradient(145deg, #f8f9fa, #ffffff);
}

/* Inner light panel like .booking-details */
.payment-message .payment-details {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #f0f0f0;
}

.payment-message .booking-header { margin-bottom: 12px; }
.payment-message .message-meta {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
    text-align: right;
}

/* Icon color harmonized per variant */
.payment-message.payment-request .booking-header i { color: #f5576c; }
.payment-message.payment-success .booking-header i { color: #00bcd4; }

/* Accent the title text like Booking Request */
.payment-message.payment-request .booking-header strong { color: #f5576c; }
.payment-message.payment-success .booking-header strong { color: #00bcd4; }

.payment-form {
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin-top: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: relative;
    overflow: visible;
}

.payment-form .stripe-element {
    clear: both;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Дополнительные стили для Stripe Elements */
.stripe-element .StripeElement {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    line-height: inherit;
}

/* Исправление возможных проблем с z-index */
.payment-form {
    isolation: isolate;
}

.payment-form .stripe-element {
    contain: layout style;
}

.payment-amount {
    font-size: 1.5em;
    font-weight: bold;
    margin: 10px 0;
}

.platform-fee {
    font-size: 0.9em;
    opacity: 0.8;
    margin: 5px 0;
}

.stripe-element {
    background: white;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #e1e5e9;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    margin: 10px 0;
    min-height: 40px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* --- Stripe Elements clickability fix in chat ---
   Ensure the Stripe iframe sits above any decorative overlays and is fully clickable */
.payment-message,
.payment-details,
.payment-form,
.stripe-element {
    position: relative;
    z-index: 2;
}

/* Some browsers may inherit pointer-events from ancestors; ensure inputs remain interactive */
.stripe-element iframe,
.StripeElement,
.StripeElement iframe {
    pointer-events: auto !important;
}

/* Establish local stacking context to avoid accidental overlays from siblings */
.modern-messages-area,
.modern-messages-list,
.modern-message {
    position: relative;
}

.stripe-element.StripeElement--focus {
    border-color: #667eea;
    box-shadow: 0 1px 3px 0 #cfd7df;
}

.stripe-element.StripeElement--invalid {
    border-color: #fa755a;
}

.payment-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    width: 100%;
    margin-top: 15px;
}

.payment-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.payment-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.payment-status {
    text-align: center;
    margin: 10px 0;
    font-weight: bold;
}

.payment-error {
    color: #fa755a;
    margin: 10px 0;
    text-align: center;
    min-height: 20px;
    clear: both;
    font-size: 14px;
}

.booking-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
}

.status-pending {
    background: #ffeaa7;
    color: #d63031;
}

.status-payment-pending {
    background: #fd79a8;
    color: white;
}

.status-paid {
    background: #00b894;
    color: white;
}

.status-completed {
    background: #00cec9;
    color: white;
}

.status-rejected {
    background: #636e72;
    color: white;
}

/* Sitter payment setup */
.stripe-onboarding-section {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    border-left: 4px solid #667eea;
}

.stripe-status {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.stripe-status-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 10px;
}

.status-success {
    background: #00b894;
}

.status-pending {
    background: #fdcb6e;
}

.status-error {
    background: #e17055;
}

.onboarding-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    transition: all 0.3s;
}

.onboarding-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    text-decoration: none;
    color: white;
}
/* New booking status styles */
.booking-status.cancelled { background-color: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; }
.booking-status.expired { background-color: #fef3c7; color: #d97706; border: 1px solid #fcd34d; }

/* Mobile responsive для Stripe Elements */
@media (max-width: 768px) {
    .payment-form {
        padding: 15px;
        margin-top: 10px;
    }
    
    .stripe-element {
        padding: 8px 10px;
        margin: 8px 0;
        font-size: 16px; /* Предотвращает zoom на iOS */
    }
    
    .payment-button {
        padding: 10px 20px;
        margin-top: 10px;
    }
}