body {
      font-family: 'Montserrat', sans-serif;
      background-color: #f3f4f6;
    }
    .gradient-bg {
      background: linear-gradient(135deg, #3b82f6, #053fbd);
    }
    .shadow-custom {
      box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1);
    }
    .photo-upload-area {
      min-height: 150px;
      border: 2px dashed #cbd5e1;
      background-color: #f8fafc;
      transition: all 0.3s ease;
    }
    .photo-upload-area:hover, .photo-upload-area.dragover {
      border-color: #3b82f6;
      background-color: #eff6ff;
    }
    .thumbnail {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 8px;
    }
    .feature-icon {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1rem;
      font-size: 4rem;
      cursor: pointer;
    }
    .spinner {
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top: 3px solid white;
      width: 20px;
      height: 20px;
      animation: spin 1s linear infinite;
      display: inline-block;
      margin-right: 8px;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .service-offer {
      border-left: 4px solid #3b82f6;
    }
    .request-card {
      transition: all 0.3s ease;
      cursor: pointer;
    }
    .request-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.2);
    }
    .badge {
      display: inline-block;
      padding: 0.25rem 0.5rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 600;
    }
    .badge-open {
      background-color: #dbeafe;
      color: #1e40af;
    }
    .badge-in-progress {
      background-color: #fef3c7;
      color: #92400e;
    }
    .badge-completed {
      background-color: #dcfce7;
      color: #166534;
    }
    .photo-gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      gap: 10px;
    }
    .photo-gallery img {
      width: 100%;
      height: 100px;
      object-fit: cover;
      border-radius: 8px;
      cursor: pointer;
      transition: transform 0.2s;
    }
    .photo-gallery img:hover {
      transform: scale(1.05);
    }
    .loading-spinner {
      display: inline-block;
      width: 50px;
      height: 50px;
      border: 3px solid rgba(59, 130, 246, 0.2);
      border-radius: 50%;
      border-top-color: #3b82f6;
      animation: spin 1s ease-in-out infinite;
    }
	
	.message-bubble {
	  max-width: 80%;
	  padding: 0.75rem 1rem;
	  border-radius: 1rem;
	  margin-bottom: 0.5rem;
	  position: relative;
	}
	.message-client {
	  background-color: #dbeafe;
	  color: #1e3a8a;
	  border-top-left-radius: 0;
	  margin-right: auto;
	}
	.message-service {
	  background-color: #e2e8f0;
	  color: #1e293b;
	  border-top-right-radius: 0;
	  margin-left: auto;
	}
	.message-time {
	  font-size: 0.7rem;
	  color: #64748b;
	  margin-top: 0.25rem;
	  text-align: right;
	}
	.text-2xl {
    font-size: 5rem !important;
    line-height: 5rem !important;
	}
	.text-lg {
    font-size: 1.5rem !important;
    line-height: 1.75rem !important;
	}
	.text-sm {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
	}
	.title {
    text-align: center;
    font-size: 2rem !important;
	}
	.title1 {
		font-size: 2.5rem;
	}
	.title2 {
		font-size: 1.5rem;
	}
	
	/* Стили для кнопки выхода */
	#logoutBtn {
	  background-color: transparent;
	  border: 1px solid #d1d5db;
	  padding: 0.5rem 1rem;
	  border-radius: 0.375rem;
	  transition: all 0.2s ease;
	  font-size: 0.875rem;
	}

	#logoutBtn:hover {
	  background-color: #f3f4f6;
	  border-color: #9ca3af;
	}
	
	/* Стили для кнопки входа */
	#authBtn {
	  background-color: transparent;
	  border: 1px solid #d1d5db;
	  padding: 0.5rem 1rem;
	  border-radius: 0.375rem;
	  transition: all 0.2s ease;
	  font-size: 0.875rem;
	}

	#authBtn:hover {
	  background-color: #f3f4f6;
	  border-color: #9ca3af;
	}
	

	/* Этот класс будет добавляться модальному окну при открытии */
	.modal-open-fullscreen {
	  position: fixed;
	  inset: 0;
	  width: 100%;
	  height: 100%;
	  z-index: 50;
	  padding: 0; /* Убираем внутренние отступы, если они были */
	}

	/* Растягиваем внутренний контейнер чтобы он занял все 100% высоты и стал flex-колонкой 
	*/
	.modal-open-fullscreen > div {
	  width: 100%;
	  height: 100%;
	  max-width: none;
	  max-height: none;
	  border-radius: 0;
	  display: flex;
	  flex-direction: column;
	}

	/* Заставляем блок с сообщениями (#chatModalMessages)
	  растянуться и занять все доступное пространство
	*/
	.modal-open-fullscreen #chatModalMessages {
	  flex: 1; /* Это самый важный стиль */
	  overflow-y: auto; /* Добавляем прокрутку */
	}

	/* Стиль для отмененных/закрытых заявок в списке */
	.request-card-closed {
	  opacity: 0.7;
	  background-color: #f9fafb; /* bg-gray-50 */
	}

	.request-card-closed h3 {
	  text-decoration: line-through;
	  color: #6b7280; /* text-gray-500 */
	}

	.request-card-closed .view-request-btn {
	  color: #6b7280; /* text-gray-500 */
	  pointer-events: none; /* Отключаем клик по кнопке "детали" */
	}
	
	#cookieDisclaimer {
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	}

	#cookieDisclaimer a {
	  transition: color 0.3s ease;
	}
	
	/* Стили для кнопки переключения пароля */
	.password-toggle {
	  transition: color 0.2s ease;
	}

	.password-toggle:hover {
	  color: #4b5563;
	}
	
	/* ========================================
   Стили для модальных окон (Отклонение)
   ======================================== */

	.modal-overlay {
	  position: fixed;
	  /* Растягиваем на весь экран */
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  
	  /* Полупрозрачный черный фон */
	  background-color: rgba(0, 0, 0, 0.6);
	  
	  /* Центрируем содержимое (само окно) */
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  
	  /* Должно быть выше всего остального контента */
	  z-index: 50; 
	}

	.modal-content {
	  background-color: #ffffff;
	  padding: 1.5rem; /* 24px */
	  border-radius: 0.5rem; /* 8px */
	  
	  /* Тень, как у других элементов */
	  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	  
	  /* Занимает всю ширину на мобильных */
	  width: 100%; 
	  
	  /* Отступы по бокам на мобильных */
	  margin: 1rem; 
	  
	  /* Ограничение ширины на десктопе.
		 Оно уже задано Tailwind-классом `max-w-md` 
		 в самом HTML-коде модального окна.
	  */
	}