/* =================================================================
   LAYOUT.CSS - Каркас сайта
================================================================= */

/* ===================================
   1. ОБЩАЯ СТРУКТУРА (FINAL NO-SCROLL)
====================================== */

html {
	width: 100%;
	height: 100%;
	background-color: var(--color-primary, #0c284d) !important;
	overflow-y: scroll; 
	overflow-x: hidden !important;
}

html:has(body.modal-open) {
	overflow: hidden !important;
	padding-right: 0 !important; 
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	width: 100%;
	overflow-x: hidden !important;
	background: transparent !important;
}

body::before {
	content: "";
	position: fixed;
	top: -10vh;
	left: 0;
	width: 100%;
	height: 120vh;
	z-index: -1;
	background-color: var(--color-primary, #0c284d);
	background-image: url('/assets/theme/img/fon2.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
}

/* Персональные фоны */
body.page-fleet::before { background-image: url('/assets/theme/img/fon3.jpg'); }
body.page-rates::before { background-image: url('/assets/theme/img/fon2.jpg'); }
body.page-services::before { background-image: url('/assets/theme/img/fon5.jpg'); }
body.page-contacts::before { background-image: url('/assets/theme/img/fon4.jpg'); }

/* Основной контейнер контента */
.main-content {
	background: rgba(255, 255, 255, 0.85);
	border-radius: var(--border-radius-lg, 8px);
	padding: var(--spacing-2, 10px) var(--spacing-3, 15px);
	max-width: var(--container-wide, 1200px);
	width: 100%;
	box-shadow: 0 5px 15px rgba(0,0,0,0.05);
	margin: calc(var(--header-height, 90px) + 20px) auto var(--spacing-8, 60px);
	flex: 1 0 auto; 
	display: flex;
	flex-direction: column;
}

.main-content p {
	font-size: var(--font-size-base, 1rem);
	margin-bottom: var(--spacing-4, 1.5rem);
	line-height: var(--line-height-lg, 1.6);
	color: var(--color-text, #333);
}

.main-content a {
	color: var(--color-accent, #e67e22);
	text-decoration: none;
	font-weight: 500;
}
.main-content a:hover {
	color: var(--color-primary, #0c284d);
	text-decoration: underline;
}

/* ===================================
   2. ШАПКА (HEADER)
====================================== */

/* Базовое состояние (Прозрачная, без рамок) */
.navigation-bar.fixed-top {
	transition: background-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
	background: transparent !important;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1030;
	border-bottom: none !important; /* УБРАЛИ РАМКУ */
}

/* ЭФФЕКТ ПРИ СКРОЛЛЕ (Ваш код) */
.navigation-bar.fixed-top.header-scrolled {
	background: rgba(12, 40, 77, 0.8) !important; /* Ваш синий цвет */
	backdrop-filter: blur(8px) saturate(180%);
	-webkit-backdrop-filter: blur(8px) saturate(180%);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 4px 8px rgba(0, 0, 0, 0.15);
	transition: background-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}

/* Контейнер внутри шапки */
.navbar-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: var(--container-wide, 1200px);
	height: var(--header-height, 90px);
	margin: 0 auto;
	padding-left: 15px;
	padding-right: 15px;
	position: relative;
}

/* Логотип */
.navbar-brand .logo-img {
	max-height: 100px;
	width: auto;
	filter: brightness(0) invert(1);
	transition: transform 0.3s ease;
}

.navigation-bar.fixed-top.header-scrolled .navbar-brand .logo-img {
	transform: scale(0.9);
}

/* Верхний ряд контактов */
.header-top-row {
	border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}
.phone-link, .bi { color: #fff !important; transition: color 0.2s; }
.phone-link:hover { color: var(--color-accent, #e67e22) !important; }

/* ===================================
   3. ДЕСКТОПНОЕ МЕНЮ (Fix Version)
   Используем селектор .header-menu-row ul для надежности
====================================== */

/* 1. Контейнер списка */
.header-menu-row ul {
	display: flex !important;       /* В строку */
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-end;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: 15px; /* Отступ между пунктами */
}

.header-menu-row ul > li {
	position: relative !important;
	display: block !important;
	margin: 0 !important;
	height: 100%;
}

/* 2. Ссылки первого уровня */
.header-menu-row ul > li > a {
	display: block;
	padding: 10px 15px;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	color: #ffffff !important;
	border-radius: 4px;
	border-bottom: 2px solid transparent;
	transition: all 0.3s ease;
	white-space: nowrap;
}

.header-menu-row ul > li > a:hover,
.header-menu-row ul > li.active > a {
	background: rgba(255, 255, 255, 0.1);
	border-bottom-color: var(--color-accent, #e67e22);
	color: #ffffff !important;
}

/* Стрелка 1-го уровня */
.header-menu-row ul > li.has-children > a { padding-right: 30px; }
.header-menu-row ul > li.has-children > a::after {
	content: "▾";
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	color: var(--color-accent, #e67e22);
}

/* 3. Выпадающее меню (Уровень 2) */
.header-menu-row ul li ul {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 250px;
	background: rgba(20, 20, 20, 0.95) !important;
	backdrop-filter: blur(10px);
	
	/* Сброс флекса родителя */
	display: block !important;
	flex-direction: column !important;
	
	padding: 10px 0;
	margin: 0;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	transition: all 0.3s ease;
	z-index: 9999;
	
	border-top: 3px solid var(--color-accent, #e67e22);
	box-shadow: 0 15px 30px rgba(0,0,0,0.4);
	border-radius: 0 0 5px 5px;
}

.header-menu-row ul li:hover > ul {
	opacity: 1; visibility: visible; transform: translateY(0);
}

.header-menu-row ul li ul li {
	display: block !important;
	width: 100%;
	margin: 0;
}

.header-menu-row ul li ul li a {
	display: block;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 400;
	text-transform: none;
	color: #cccccc !important;
	background: transparent;
	border-bottom: 1px solid rgba(255,255,255,0.05);
}

.header-menu-row ul li ul li:last-child a { border-bottom: none; }

.header-menu-row ul li ul li a:hover {
	background: rgba(255, 255, 255, 0.05);
	color: var(--color-accent, #e67e22) !important;
	padding-left: 25px;
}

/* 4. Третий уровень (сбоку) */
.header-menu-row ul li ul ul {
	top: 0;
	left: 100%;
	margin-top: 0;
}

.header-menu-row ul li ul li.has-children > a::after {
	content: "▸";
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
}
.header-menu-row ul li ul li.has-children > a:hover::after {
	color: var(--color-accent, #e67e22);
}

/* ===================================
   4. МОБИЛЬНОЕ МЕНЮ (SIDEBAR + ACCORDION)
====================================== */

/* Гамбургер */
.sidemenu_btn {
	width: 40px; height: 40px;
	display: flex; flex-direction: column;
	justify-content: center; align-items: center;
	cursor: pointer; z-index: 1050; padding: 5px;
}
.sidemenu_btn span {
	height: 3px; width: 30px; background: #fff; display: block;
	margin: 3px 0; border-radius: 2px; transition: 0.3s ease;
}
.sidemenu_btn:hover span { background: var(--color-accent, #e67e22); }

/* Боковая панель */
.side-menu {
	position: fixed; top: 0; right: 0;
	width: 300px; height: 100%;
	/* Цвет фона как у шапки (Темно-синий) */
	background: #0c284d; 
	z-index: 1060;
	transform: translate3d(100%, 0, 0);
	transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
	box-shadow: -10px 0 30px rgba(0,0,0,0.5);
	display: flex; flex-direction: column;
}
.side-menu.side-menu-active { transform: translate3d(0, 0, 0); }

/* Крестик */
.side-menu .btn-close {
	position: absolute; top: 20px; right: 20px;
	width: 30px; height: 30px;
	background: none; opacity: 1; z-index: 10;
}
.side-menu .btn-close::before, .side-menu .btn-close::after {
	content: ''; position: absolute; top: 50%; left: 0;
	width: 100%; height: 2px; background: #fff; transition: 0.3s;
}
.side-menu .btn-close::before { transform: rotate(45deg); }
.side-menu .btn-close::after { transform: rotate(-45deg); }
.side-menu .btn-close:hover::before, .side-menu .btn-close:hover::after {
	background: var(--color-accent, #e67e22);
}

/* Оверлей */
#close_side_menu {
	display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(0,0,0,0.7); z-index: 1055; backdrop-filter: blur(5px);
}

.side-menu .inner-wrapper { height: 100%; display: flex; flex-direction: column; padding-top: 70px; }
.side-menu .side-nav { flex: 1; overflow-y: auto; padding: 0; }

/* --- Логика Аккордеона --- */
.dsm-mobile-menu { list-style: none; padding: 0; margin: 0; }
.dsm-mobile-menu .nav-item { border-bottom: 1px solid rgba(255,255,255,0.1); }

.nav-split { display: flex; align-items: center; justify-content: space-between; position: relative; }
.nav-split .nav-link {
	flex: 1; display: block; padding: 15px 20px; color: #ffffff;
	font-size: 16px; font-weight: 500; text-decoration: none; transition: color 0.3s;
}
.nav-split .nav-link:hover, .nav-split .nav-link.active { color: var(--color-accent, #e67e22); }

/* Кнопка открытия подменю (Галочка) */
.submenu-toggle {
	width: 50px; height: 100%; min-height: 54px;
	display: flex; align-items: center; justify-content: center;
	background: transparent; /* УБРАЛ ФОН */
	border: none;
	border-left: 1px solid rgba(255,255,255,0.1);
	cursor: pointer; transition: all 0.3s;
}

/* Рисуем галочку (шеврон) через CSS */
.submenu-toggle::after {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	border-right: 2px solid #fff;   /* Правая линия */
	border-bottom: 2px solid #fff;  /* Нижняя линия */
	transform: rotate(45deg);       /* Поворот = стрелка вниз */
	transition: transform 0.3s ease;
	margin-top: -4px;               /* Центровка */
}

/* Активное состояние кнопки (когда открыто) */
.nav-item.open > .nav-split > .submenu-toggle {
	background: transparent; /* УБРАЛ ОРАНЖЕВЫЙ ФОН */
	/* Можно оставить легкую подсветку границы, если нужно, или убрать вовсе */
}

/* Поворачиваем галочку вверх и красим в оранжевый */
.nav-item.open > .nav-split > .submenu-toggle::after {
	transform: rotate(-135deg);     /* Поворот = стрелка вверх */
	margin-top: 4px;
	border-color: var(--color-accent, #e67e22); /* Галочка становится оранжевой */
}

/* Выпадающий список */
.dsm-mobile-submenu {
	list-style: none; padding: 0; margin: 0;
	/* Фон подменю чуть темнее основного синего */
	background: rgba(0,0,0,0.2);
	max-height: 0; overflow: hidden;
	transition: max-height 0.4s ease-out;
}
.dsm-mobile-submenu.open { max-height: 1000px; }

.dsm-mobile-submenu li a {
	display: block; padding: 12px 20px 12px 35px;
	font-size: 14px; color: rgba(255,255,255,0.7);
	text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dsm-mobile-submenu li a:hover {
	color: var(--color-accent, #e67e22);
	background: rgba(255,255,255,0.05);
}
.dsm-mobile-submenu .dsm-mobile-submenu li a { padding-left: 50px; font-size: 13px; }

/* Футер в боковом меню */
.side-menu-footer {
	padding: 25px 20px 35px; 
	background: rgba(0,0,0,0.2); 
	text-align: center; 
	border-top: 1px solid rgba(255,255,255,0.1);
}

.side-phone-link {
	display: block; 
	font-size: 1.3rem; 
	color: #fff !important; /* Всегда белый */
	text-decoration: none !important; /* Без подчеркивания */
	font-weight: 700; 
	margin-top: 5px;
	transition: none; /* Убираем плавность, так как цвет не меняется */
}

/* При наведении: Оставляем белый цвет и без подчеркивания */
.side-phone-link:hover {
	color: #fff !important; 
	text-decoration: none !important;
}

.side-phone-link i { 
	color: var(--color-accent, #e67e22); 
	margin-right: 8px; 
	font-size: 1.3rem; 
}

/* ===================================
   5. HERO BANNER (Вернули старый код)
====================================== */

.hero {
  margin-top: 0;
  min-height: 100vh; /* Высота на весь экран */
  display: flex;
  align-items: center;
  position: relative;
  background-color: var(--color-gray-900, #000); /* Подложка */
  color: var(--color-white);
  /* Добавлено на случай, если картинка задается через JS/HTML */
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat;
}

/* Оверлей (затемнение) */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Полупрозрачный черный */
  z-index: 1;
}

/* Контент должен быть выше затемнения */
.hero .container {
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  margin-bottom: 1.5rem;
   
  /* Исправление ухода за экран */
  width: 100%;              /* Ширина строго по контейнеру */
  max-width: 100%;          /* Не больше экрана */
  word-wrap: break-word;    /* Переносить длинные слова */
  overflow-wrap: break-word; 
  white-space: normal;      /* Разрешить перенос строк */
   
  /* Сброс лишних отступов, из-за которых может быть сдвиг */
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}

/* Кнопка внутри баннера */
.hero .btn-dsm {
  font-size: 1.2rem;
  padding: 10px 30px;
  background-color: var(--color-accent);
  border: 2px solid var(--color-accent);
  color: var(--color-white);
  border-radius: 50px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  display: inline-block;
  text-decoration: none;
}

.hero .btn-dsm:hover {
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
  transform: translateY(-3px);
}

/* Адаптив */
@media (max-width: 768px) {
  .hero {
	min-height: 85vh;
	text-align: center;
  }

  .hero h1 {
	font-size: 2rem;        /* Уменьшаем шрифт, чтобы влезал */
	line-height: 1.2;       /* Плотнее строки */
	text-align: center;     /* На мобильных лучше смотрится по центру */
  }
   
  /* Если контейнер тоже имеет отступы, сбрасываем их */
  .hero .col-lg-8 {
	padding-left: 15px;
	padding-right: 15px;
	width: 100%;
  }
   
  .hero .btn-dsm {
	font-size: 1rem;
	padding: 12px 30px;
	width: 100%;
	max-width: 300px;
  }
}

/* ===================================
   6. ХЛЕБНЫЕ КРОШКИ
====================================== */
.breadcrumbs {
	padding: 5px 0;
	margin-bottom: 20px;
	border-radius: 4px;
}
.breadcrumbs ol {
	display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; align-items: center;
}
.breadcrumbs li {
	font-size: 14px; color: #6c757d; display: flex; align-items: center;
}
.breadcrumbs li + li::before {
	content: "/"; padding: 0 10px; color: #adb5bd;
}
.breadcrumbs li a {
	color: var(--color-primary); text-decoration: none; font-weight: 500; transition: color 0.2s;
}
.breadcrumbs li a:hover {
	color: var(--color-accent); text-decoration: underline;
}
/* Если крошки на темном фоне в баннере */
.hero .breadcrumbs li { color: rgba(255,255,255,0.8); }
.hero .breadcrumbs li a { color: #fff; }
.hero .breadcrumbs li + li::before { color: rgba(255,255,255,0.5); }

/* ===================================
   7. ВИДЖЕТЫ И ФУТЕР
====================================== */
.footer {
	margin-top: auto; background: var(--gradient-footer, #111);
	padding: 40px 0 20px; color: #fff; font-size: 14px;
}
.footer h3 {
	color: #fff; font-size: 18px; margin-bottom: 20px; position: relative; padding-bottom: 10px;
}
.footer h3::after {
	content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background: var(--color-accent, #e67e22);
}
.footer a {
	color: rgba(255,255,255,0.6); text-decoration: none; transition: 0.3s; display: block; margin-bottom: 5px;
}
.footer a:hover { color: var(--color-accent, #e67e22); transform: translateX(5px); }

/* Кнопка наверх */
/* --- Кнопка НАВЕРХ (Ваш стиль) --- */
.back-to-top {
	width: 50px !important; 
	height: 50px !important; 
	position: fixed !important;
	bottom: 30px !important; /* Самый низ */
	right: 30px !important;
	background: var(--color-primary, #0c284d);
	color: #fff !important; 
	border-radius: 5px; 
	z-index: 999; 
	display: none !important;
	align-items: center; 
	justify-content: center; 
	box-shadow: 0 5px 15px rgba(0,0,0,0.3); 
	transition: 0.3s;
	text-decoration: none !important;
	font-size: 24px; /* Размер стрелки */
}
.back-to-top.open { display: flex !important; }
.back-to-top:hover { 
	background: var(--color-accent, #e67e22); 
	transform: translateY(-5px); 
}

/* --- Кнопка MAX --- */
.max-widget {
	position: fixed;
	/* 95px (TG bottom) + 50px (высота) + 15px (зазор) = 160px */
	bottom: 160px; 
	right: 30px;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	background: var(--color-primary, #0c284d);
	border-radius: 5px;
	color: white;
	text-decoration: none;
	box-shadow: 0 5px 15px rgba(0, 95, 249, 0.4);
	transition: all 0.3s ease;
}

.max-widget:hover {
	transform: translateY(-5px);
	background: #0c284d;
	color: white;
}

/* Стили для SVG внутри кнопки */
.max-widget svg {
	width: 30px;
	height: 30px;
}

.max-widget img {
	display: block;
	width: 40px;
	height: auto;
	object-fit: contain;
}

/* Анимация пульсации для MAX */
.max-pulse {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 5px;
	border: 2px solid #0c284d;
	opacity: 0;
	animation: pulse-cycle 6s infinite;
	animation-delay: 2s;
	z-index: -1;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
	.max-widget {
		right: 20px;
		width: 45px;
		height: 45px;
		/* 80px (TG bottom mobile) + 45px (высота) + 10px (зазор) = 135px */
		bottom: 135px;
	}
	.max-widget svg {
		width: 24px;
		height: 24px;
	}
}

/* --- Кнопка ТЕЛЕГРАМ (Адаптированный стиль) --- */
.telegram-widget {
	position: fixed;
	/* 30px (отступ) + 50px (высота кнопки вверх) + 15px (зазор) = 95px */
	bottom: 95px; 
	right: 30px; /* Выровнено по правому краю с кнопкой Наверх */
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px; /* Сделал такого же размера, как кнопка Наверх */
	height: 50px;
	background: var(--color-primary, #0c284d);
	border-radius: 5px; /* Скругление как у кнопки Наверх для единообразия */
	color: white;
	text-decoration: none;
	box-shadow: 0 5px 15px rgba(36, 161, 222, 0.4);
	transition: all 0.3s ease;
}

.telegram-widget:hover {
	transform: translateY(-5px); /* Анимация такая же, как у кнопки Наверх */
	background: var(--color-primary, #0c284d);
	color: white;
}

.telegram-widget .telegram-icon,
.telegram-widget i.bi {
	font-size: 33px !important;
	line-height: 1 !important;
	display: inline-block !important;
}

/* Анимация пульсации (из вашего кода) */
.telegram-pulse {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 5px; /* Пульсация повторяет форму кнопки */
	border: 2px solid var(--color-primary, #0c284d);
	opacity: 0;
	animation: pulse-cycle 5s infinite;
	animation-delay: 0s;
	z-index: -1;
}

@keyframes pulse-cycle {
	/* 0% - 10%: активная фаза (быстрое расширение) */
	0% { transform: scale(1); opacity: 0.8; }
	10% { transform: scale(1.6); opacity: 0; }
	
	/* 10% - 100%: фаза ожидания (кольцо невидимо) */
	10.1% { transform: scale(1); opacity: 0; } 
	100% { transform: scale(1); opacity: 0; }
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
	.back-to-top, .telegram-widget {
		right: 20px;
		width: 45px;
		height: 45px;
	}
	.telegram-widget {
		bottom: 80px;
	}
	.telegram-icon {
		font-size: 24px;
	}
}

/* Виджет связи */
.contact-widget {
	position: fixed !important; bottom: 100px !important; right: 30px !important; z-index: 999;
	display: flex; flex-direction: column; align-items: center; gap: 15px;
}
.main-contact-btn {
	width: 60px !important; height: 60px !important; border-radius: 50%;
	background: var(--color-accent, #e67e22); color: #fff; border: none;
	box-shadow: 0 0 20px rgba(230, 126, 34, 0.4); font-size: 26px;
	cursor: pointer; display: flex; align-items: center; justify-content: center;
	animation: pulse-ring 2s infinite;
}
@keyframes pulse-ring {
	0% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0.7); }
	70% { box-shadow: 0 0 0 15px rgba(230, 126, 34, 0); }
	100% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0); }
}

/* ===================================
   8. АДАПТИВНОСТЬ (FINAL FIX 1024px)
====================================== */

/* --- МОБИЛЬНЫЕ И ПЛАНШЕТЫ (Ширина <= 1024px) --- */
@media (max-width: 1024px) {
	
	/* 1. Принудительно ПОКАЗЫВАЕМ гамбургер */
	/* Используем !important, чтобы перебить bootstrap класс d-lg-none */
	.sidemenu_btn { 
		display: flex !important; 
	}

	/* 2. Принудительно СКРЫВАЕМ весь правый десктопный блок */
	/* (Там где телефон, кнопка и меню) */
	.navbar-wrapper > div.d-lg-flex {
		display: none !important;
	}
}

/* --- ДЕСКТОПЫ (Ширина >= 1025px) --- */
@media (min-width: 1025px) {
	
	/* 1. СКРЫВАЕМ гамбургер */
	.sidemenu_btn {
		display: none !important;
	}
	
	/* 2. ПОКАЗЫВАЕМ правый десктопный блок */
	.navbar-wrapper > div.d-lg-flex {
		display: flex !important;
	}
	
	/* 3. Гарантируем, что само меню внутри видно */
	.header-menu-row {
		display: block !important;
	}
	
	/* 4. Скрываем мобильное меню (на всякий случай) */
	.dsm-mobile-menu {
		display: none !important;
	}
}

/* Исправление для маленьких экранов (телефонов) */
@media (max-width: 768px) {
	.contact-widget { bottom: 80px !important; right: 15px !important; }
	.back-to-top { bottom: 20px !important; right: 15px !important; }
	.hero h1 { font-size: 2rem; }
	.navbar-wrapper { padding-left: 15px; padding-right: 15px; }
}

/* =========================================
   МОБИЛЬНАЯ АДАПТАЦИЯ (ФИНАЛ)
   ========================================= */
@media (max-width: 576px) {
	
	.container,
	.main-content .container {
		padding-left: 5px !important;
		padding-right: 5px !important;
		max-width: 100% !important;
}

	/* 2. ИСПРАВЛЕНИЕ ИКОНКИ "ДОМОЙ" */
	/* Находим блок с хлебными крошками и сдвигаем его чуть вправо,
	   чтобы иконка не липла к краю экрана */
	.breadcrumb, 
	nav[aria-label="breadcrumb"] {
		padding-left: 8px !important; /* Отступ только для иконки */
		margin-bottom: 15px !important;
	}

	/* 3. ВНУТРЕННИЙ ТЕКСТ */
	/* Внутри белых карточек оставляем комфортный отступ (15px), 
	   чтобы текст читался и не лип к границам фона */
	.card-body, 
	.p-4, 
	.p-5 {
		padding: 15px 12px !important; /* 15px сверху/снизу, 12px по бокам */
	}

	/* 4. ШРИФТЫ */
	/* Чуть уменьшаем заголовки, чтобы влезало больше слов в строку */
	h1, .display-5 {
		font-size: 26px !important;
		word-wrap: break-word; /* Перенос длинных слов */
	}
	
	.display-6 {
		font-size: 22px !important;
	}

	/* 5. Убираем лишние отступы у самого главного контейнера */
	.main-content {
		padding-top: 10px !important;
	}
}

/* ===================================
   FIX: МОДАЛЬНЫЕ ОКНА
=================================== */

.modal-backdrop {
	z-index: 1040 !important;
}

.modal {
	z-index: 1055 !important;
	
	/* Убираем внутренние отступы контейнера */
	padding-right: 0 !important; 
	padding-left: 0 !important;
}

/* Общие правила для всех модалок - auto включает скролл при необходимости */
.modal {
	overflow-y: auto !important;
}

/* ДЛЯ КОНКРЕТНОЙ МОДАЛКИ С ФОРМОЙ - отключаем скролл,
   так как она маленькая и целиком влезает в экран */
#contactModal {
	overflow-y: hidden !important;
}

/* Крестик БЕЛЫЙ */
#contactModal .btn-close {
	filter: brightness(0) invert(1) !important;
	opacity: 1 !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* Центрируем окно и убираем лишние margin */
.modal-dialog {
	display: flex;
	align-items: center; /* Центрирование по вертикали */
	min-height: calc(100% - 20px); /* Высота чуть меньше экрана */
	margin: 10px auto; /* Маленькие отступы сверху/снизу */
}

/* ===================================
   9. УЛУЧШЕНИЕ МОДАЛЬНОГО ОКНА ДЛЯ МОБИЛЬНЫХ
====================================== */

/* Специально для модалки с формой */
#contactModal .modal-dialog {
	max-width: 500px; /* Фиксированная ширина на десктопе */
	width: 100%;
	margin: 1.75rem auto;
}

/* На мобильных - почти на всю ширину, но с отступами */
@media (max-width: 576px) {
	#contactModal .modal-dialog {
		max-width: 95%;
		margin: 10px auto;
	}
	
	/* Специально для маленьких экранов */
	.container,
	.main-content .container {
		padding-left: 5px !important;
		padding-right: 5px !important;
		max-width: 100% !important;
	}
	
	/* Иконка "Домой" в хлебных крошках */
	.breadcrumb, 
	nav[aria-label="breadcrumb"] {
		padding-left: 8px !important;
		margin-bottom: 15px !important;
	}
	
	/* Внутренние отступы карточек */
	.card-body, 
	.p-4, 
	.p-5 {
		padding: 15px 12px !important;
	}
	
	/* Шрифты */
	h1, .display-5 {
		font-size: 26px !important;
		word-wrap: break-word;
	}
	
	.display-6 {
		font-size: 22px !important;
	}
	
	/* Главный контейнер */
	.main-content {
		padding-top: 10px !important;
	}
}

/* Остальные стили для модалки */
#contactModal .modal-content {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* Шапка модалки */
#contactModal .modal-header {
	padding: 20px 20px 15px;
	background: linear-gradient(135deg, var(--color-primary, #0c284d) 0%, #1a3a6b 100%);
}

#contactModal .modal-header h5 {
	font-size: 1.3rem;
	letter-spacing: 0.5px;
	color: #fff; /* Заголовок белый */
}

/* Тело модалки */
#contactModal .modal-body {
	padding: 20px 20px 25px;
	background: #fff;
}

/* Поля ввода */
#contactModal .form-control,
#contactModal .form-control-lg {
	border: 2px solid #e9ecef !important;
	border-radius: 12px !important;
	padding: 12px 15px !important;
	font-size: 1rem !important;
	background: #f8f9fa !important;
	transition: all 0.2s ease;
}

#contactModal .form-control:focus,
#contactModal .form-control-lg:focus {
	border-color: var(--color-accent, #e67e22) !important;
	background: #fff !important;
	box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.1) !important;
}

/* Метки */
#contactModal .form-label {
	font-weight: 600;
	color: #495057;
	margin-bottom: 8px;
	font-size: 0.95rem;
}

/* Чекбокс */
#contactModal .form-check {
	margin: 15px 0;
}

#contactModal .form-check-input {
	width: 1.2rem;
	height: 1.2rem;
	margin-right: 10px;
	border: 2px solid #ced4da;
}

#contactModal .form-check-input:checked {
	background-color: var(--color-accent, #e67e22);
	border-color: var(--color-accent, #e67e22);
}

#contactModal .form-check-label {
	font-size: 0.95rem;
	color: #6c757d;
}

/* Кнопка отправки */
#contactModal .btn-primary {
	background: var(--color-accent, #e67e22);
	border: none;
	padding: 14px 20px;
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	border-radius: 50px !important;
	box-shadow: 0 4px 15px rgba(230, 126, 34, 0.3);
	transition: all 0.3s ease;
}

#contactModal .btn-primary:hover {
	background: #d35400;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(230, 126, 34, 0.4);
}

/* Сообщение об ошибке */
#contactModal .alert-danger {
	border-radius: 12px;
	font-size: 0.95rem;
	padding: 12px 15px;
}

/* Сообщение об успехе */
#contactModal #modalSuccessMessage {
	padding: 30px 20px;
}

#contactModal #modalSuccessMessage .text-success {
	color: #2ecc71 !important;
	font-size: 3.5rem;
}