/* Стили для подвала */

 .main-footer {
 background-color: #1c1c1b; /* Темный фон как в шапке */
 color: #ffffff;
 margin-top: 30px;
 padding: 30px 20px;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 font-size: 14px;
 border-top: 3px solid #d7b369; /* Золотая линия сверху */
 }

 .footer-container {
 max-width: 1600px;
 margin: 0 auto;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: center;
 gap: 20px;
 }

 .footer-copyright {
 color: #aaa;ф
 }

 .footer-links {
 display: flex;
 flex-wrap: wrap;
 gap: 20px;
 align-items: center;
 }

 .footer-links a {
 color: #ffffff;
 text-decoration: none;
 transition: color 0.3s ease;
 position: relative;
 }

 .footer-links a:hover {
 color: #d7b369; /* Золотой цвет при наведении */
 }

 /* Разделитель между ссылками (точка или черта) */
 .footer-links a:not(:last-child)::after {
 content: '|';
 margin-left: 20px;
 color: #555;
 position: absolute;
 right: -12px;
 }
 
 /* Убираем разделитель у последнего элемента */
 .footer-links a:last-child::after {
 display: none;
 }

 /* Адаптивность для мобильных */
 @media (max-width: 768px) {
 .footer-container {
 flex-direction: column;
 text-align: center;
 }
 
 .footer-links {
 justify-content: center;
 flex-direction: column;
 gap: 10px;
 }
 
 .footer-links a:not(:last-child)::after {
 display: none; /* Убираем разделители на мобильных */
 }
 }


/* Стили для шапки и мобильного меню */

 /* Основной контейнер шапки */
 .main-header-wrapper {
 background: #ffffff;
 box-shadow: 0 2px 10px rgba(0,0,0,0.1);
 position: sticky;
 top: 0;
 z-index: 999;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 .header-container {
 max-width: 1600px;
 margin: 0 auto;
 padding: 10px 20px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 position: relative;
 }

 /* Логотип */
 .header-logo img {
 height: 50px; 
 width: auto;
 display: block;
 }

 /* Кнопка мобильного меню (Гамбургер) */
 .mobile-menu-btn {
 display: none; /* Скрыта на ПК */
 background: none;
 border: none;
 cursor: pointer;
 padding: 10px;
 z-index: 1002;
 }

 .hamburger-line {
 display: block;
 width: 25px;
 height: 3px;
 background-color: #1c1c1b;
 margin: 5px 0;
 transition: all 0.3s ease;
 border-radius: 2px;
 }

 /* Навигация (Десктоп) */
 .hm-menu {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 align-items: center;
 }

 .hm-menu > li {
 position: static;
 }

 .hm-menu > li > a {
 display: block;
 padding: 20px 12px; /* Увеличил padding для большей области наведения */
 color: #1c1c1b;
 text-decoration: none;
 font-weight: 600;
 font-size: 14px;
 text-transform: uppercase;
 transition: color 0.3s ease;
 position: relative; /* Для позиционирования псевдо-элемента */
 }

 .hm-menu > li > a:hover {
 color: #d7b369;
 }

 .hm-menu > li > a i {
 margin-left: 5px;
 font-size: 12px;
 color: #d7b369;
 }

 /* Выпадающее меню (Mega Menu - Десктоп) */
 .hm-megamenu {
 position: absolute;
 top: 100%;
 left: 50%;
 transform: translateX(-50%);
 background: #fff;
 box-shadow: 0 10px 30px rgba(0,0,0,0.15);
 width: 90vw;
 max-width: 1200px;
 padding: 30px; /* Увеличил отступы внутри */
 margin-top: 0; /* Убираем внешний отступ, используем padding */
 display: none;
 z-index: 1000;
 border-top: 3px solid #d7b369;
 list-style: none;
 grid-template-columns: repeat(4, 1fr);
 gap: 20px;
 border-radius: 0 0 8px 8px;
 
 /* ИСПРАВЛЕНИЕ: Невидимый мост сверху, чтобы мышь не теряла фокус */
 }
 
 .hm-megamenu::before {
 content: '';
 position: absolute;
 top: -20px; /* Поднимаем вверх к ссылке */
 left: 0;
 right: 0;
 height: 20px;
 background: transparent;
 }

 .hm-menu > li.megamenu-holder:hover .hm-megamenu {
 display: grid;
 animation: fadeIn 0.3s ease;
 }

 @keyframes fadeIn {
 from { opacity: 0; transform: translateX(-50%) translateY(10px); }
 to { opacity: 1; transform: translateX(-50%) translateY(0); }
 }

 .megamenu-title {
 display: block;
 font-weight: 700;
 color: #1c1c1b;
 margin-bottom: 10px;
 font-size: 16px;
 border-bottom: 2px solid #f0f0f0;
 padding-bottom: 8px;
 }
 
 .megamenu-title a { color: #1c1c1b; text-decoration: none; }
 .megamenu-title a:hover { color: #d7b369; }

 .hm-megamenu ul { list-style: none; padding: 0; margin: 0; }
 .hm-megamenu ul li a {
 display: block;
 padding: 6px 0;
 color: #555;
 text-decoration: none;
 font-size: 14px;
 transition: all 0.2s;
 }
 .hm-megamenu ul li a:hover { color: #d7b369; padding-left: 5px; }

 /* === МОБИЛЬНЫЕ СТИЛИ === */
 @media (max-width: 992px) {
 .mobile-menu-btn {
 display: block; /* Показываем гамбургер */
 margin-right: 10px; /* ДОБАВЛЕНО: Отступ справа */
 }

 .header-container {
 padding: 10px 15px; /* Немного уменьшил общий паддинг контейнера для баланса */
 }

 /* Превращаем меню в выезжающую панель */
 .hm-menu {
 position: fixed;
 top: 0;
 right: -100%; /* Скрыто за правым краем */
 width: 85%; /* Чуть шире для удобства */
 max-width: 320px;
 height: 100vh;
 background: #fff;
 flex-direction: column;
 align-items: flex-start;
 padding: 80px 20px 20px; /* Отступ сверху для крестика */
 box-shadow: -5px 0 15px rgba(0,0,0,0.1);
 transition: right 0.3s ease;
 z-index: 1001;
 overflow-y: auto;
 }

 /* Класс для открытия меню */
 .hm-menu.active {
 right: 0;
 }

 .hm-menu > li {
 width: 100%;
 border-bottom: 1px solid #eee;
 }

 .hm-menu > li > a {
 padding: 15px 0;
 font-size: 16px;
 }

 /* Мобильное выпадающее меню (Аккордеон) */
 .hm-megamenu {
 position: static;
 transform: none;
 left: auto;
 width: 100%;
 max-width: 100%;
 box-shadow: none;
 border: none;
 padding: 0 0 15px 15px;
 display: none; /* Скрыто по умолчанию */
 grid-template-columns: 1fr;
 background: #f9f9f9;
 margin-top: 0;
 }
 
 /* Убираем псевдо-элемент моста на мобильных */
 .hm-megamenu::before {
 display: none;
 }

 /* Показываем подменю при клике (через JS класс) */
 .hm-menu > li.megamenu-holder.open-mobile .hm-megamenu {
 display: block;
 animation: none;
 }
 
 /* Затемнение фона */
 .menu-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,0.5);
 z-index: 1000;
 display: none;
 opacity: 0;
 transition: opacity 0.3s ease;
 }
 
 .menu-overlay.active {
 display: block;
 opacity: 1;
 }

 /* Анимация гамбургера в крестик */
 .mobile-menu-btn.active .hamburger-line:nth-child(1) {
 transform: rotate(45deg) translate(5px, 6px);
 }
 .mobile-menu-btn.active .hamburger-line:nth-child(2) {
 opacity: 0;
 }
 .mobile-menu-btn.active .hamburger-line:nth-child(3) {
 transform: rotate(-45deg) translate(5px, -6px);
 }
 }

 
/* =================== Конструктор шкафов купе =================== */

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }

 body {
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 min-height: 100vh;
 padding: 20px;
 }

 .container {
 max-width: 1600px;
 margin: 0 auto;
 background: white;
 border-radius: 20px;
 box-shadow: 0 20px 60px rgba(0,0,0,0.3);
 overflow: hidden;
 }

 .header {
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 color: white;
 padding: 30px;
 text-align: center;
 }

 .header h1 {
 font-size: 2.5em;
 margin-bottom: 10px;
 }

 .header p {
 font-size: 1.1em;
 opacity: 0.9;
 }

 .main-content {
 display: grid;
 grid-template-columns: 300px 1fr 300px;
 gap: 20px;
 padding: 20px;
 min-height: 800px;
 }

 @media (max-width: 1200px) {
 .main-content {
 grid-template-columns: 1fr;
 }
 }

 /* Панель инструментов */
 .tools-panel {
 background: #f8f9fa;
 padding: 20px;
 border-radius: 15px;
 border: 2px solid #e9ecef;
 overflow-y: auto;
 max-height: 800px;
 }

 .panel-section {
 margin-bottom: 25px;
 }

 .panel-title {
 font-size: 1.2em;
 color: #667eea;
 margin-bottom: 15px;
 padding-bottom: 8px;
 border-bottom: 2px solid #667eea;
 font-weight: 600;
 }

 .texture-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 8px;
 margin-bottom: 15px;
 }

 .texture-item {
 width: 100%;
 height: 60px;
 border: 2px solid #dee2e6;
 border-radius: 8px;
 cursor: pointer;
 transition: all 0.3s ease;
 position: relative;
 overflow: hidden;
 }

 .texture-item:hover {
 transform: scale(1.05);
 border-color: #667eea;
 box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
 }

 .texture-item.selected {
 border-color: #667eea;
 border-width: 3px;
 box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
 }

 .texture-label {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 background: rgba(0,0,0,0.7);
 color: white;
 padding: 3px;
 font-size: 0.7em;
 text-align: center;
 }

 /* 
 РЕАЛИСТИЧНЫЕ ТЕКСТУРЫ ДЕРЕВА ЧЕРЕЗ CSS ГРАДИЕНТЫ 
 Имитация волокон через repeating-linear-gradient
 */
 
 /* Дуб - светлый с выраженными волокнами */
 .wood-oak { 
 background-color: #D2B48C;
 background-image: 
 repeating-linear-gradient(90deg, transparent 0px, transparent 2px, rgba(139, 69, 19, 0.1) 3px, transparent 4px),
 repeating-linear-gradient(90deg, transparent 0px, transparent 15px, rgba(160, 82, 45, 0.2) 16px, transparent 18px);
 }

 /* Орех - темный, плотная структура */
 .wood-walnut { 
 background-color: #8B7355;
 background-image: 
 repeating-linear-gradient(90deg, transparent 0px, transparent 1px, rgba(60, 40, 20, 0.3) 2px, transparent 3px),
 repeating-linear-gradient(90deg, transparent 0px, transparent 8px, rgba(40, 20, 10, 0.2) 9px, transparent 12px);
 }

 /* Вишня - красноватый оттенок, тонкие волокна */
 .wood-cherry { 
 background-color: #A0522D;
 background-image: 
 repeating-linear-gradient(90deg, transparent 0px, transparent 3px, rgba(100, 20, 10, 0.15) 4px, transparent 5px),
 repeating-linear-gradient(90deg, transparent 0px, transparent 20px, rgba(120, 40, 20, 0.1) 22px, transparent 25px);
 }

 /* Махагон - глубокий красный, широкие волокна */
 .wood-mahogany { 
 background-color: #C04000;
 background-image: 
 repeating-linear-gradient(90deg, transparent 0px, transparent 2px, rgba(80, 20, 0, 0.2) 3px, transparent 4px),
 repeating-linear-gradient(90deg, transparent 0px, transparent 12px, rgba(100, 30, 0, 0.15) 14px, transparent 18px);
 }

 /* Береза - очень светлая, едва заметные волокна */
 .wood-birch { 
 background-color: #F5DEB3;
 background-image: 
 repeating-linear-gradient(90deg, transparent 0px, transparent 4px, rgba(160, 120, 80, 0.1) 5px, transparent 6px),
 repeating-linear-gradient(90deg, transparent 0px, transparent 25px, rgba(180, 140, 100, 0.08) 26px, transparent 30px);
 }

 /* Ясень - серый оттенок, контрастные волокна */
 .wood-ash { 
 background-color: #D3D3D3;
 background-image: 
 repeating-linear-gradient(90deg, transparent 0px, transparent 2px, rgba(100, 100, 100, 0.2) 3px, transparent 4px),
 repeating-linear-gradient(90deg, transparent 0px, transparent 10px, rgba(80, 80, 80, 0.15) 11px, transparent 14px);
 }

 /* Текстуры ЛДСП - однородные цвета */
 .ldsp-white { background: #FFFFFF; border: 1px solid #ddd; }
 .ldsp-beige { background: #F5F5DC; }
 .ldsp-gray { background: #808080; }
 .ldsp-black { background: #2C2C2C; }
 .ldsp-wenge { background: #5C4033; }
 .ldsp-sonoma { background: #D2B48C; }

 /* Цвета */
 .color-red { background: #DC143C; }
 .color-blue { background: #4169E1; }
 .color-green { background: #228B22; }
 .color-yellow { background: #FFD700; }
 .color-purple { background: #8B008B; }
 .color-orange { background: #FF8C00; }

 /* Элементы для перетаскивания */
 .draggable-items {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 10px;
 }

 .draggable-item {
 padding: 12px;
 background: white;
 border: 2px solid #667eea;
 border-radius: 8px;
 cursor: move;
 text-align: center;
 font-size: 0.9em;
 transition: all 0.3s ease;
 user-select: none;
 }

 .draggable-item:hover {
 background: #667eea;
 color: white;
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
 }

 .draggable-item.dragging {
 opacity: 0.5;
 }

 /* Область конструктора */
 .constructor-area {
 background: #f0f0f0;
 border-radius: 15px;
 padding: 20px;
 position: relative;
 overflow: auto;
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 600px;
 }

 .wardrobe-workspace {
 position: relative;
 background: white;
 border: 3px solid #333;
 box-shadow: 0 10px 30px rgba(0,0,0,0.2);
 overflow: visible;
 flex-shrink: 0;
 }

 .wardrobe-frame {
 position: relative;
 width: 100%;
 height: 100%;
 }

 /* Информация о проекте для экспорта */
 .project-info-overlay {
 position: absolute;
 bottom: -80px;
 left: 0;
 right: 0;
 background: rgba(255, 255, 255, 0.95);
 border: 2px solid #667eea;
 border-radius: 8px;
 padding: 15px;
 font-size: 12px;
 display: none;
 z-index: 50;
 }

 .project-info-overlay.visible {
 display: block;
 }

 .project-info-title {
 font-weight: 600;
 color: #667eea;
 margin-bottom: 8px;
 font-size: 14px;
 }

 .project-info-row {
 display: flex;
 justify-content: space-between;
 margin-bottom: 4px;
 }

 .project-info-label {
 font-weight: 600;
 color: #495057;
 }

 .project-info-value {
 color: #667eea;
 }

 /* Элементы внутри шкафа */
 .shelf {
 position: absolute;
 height: 15px;
 background: #8B7355;
 border: 1px solid #6B5340;
 cursor: move;
 z-index: 10;
 min-width: 50px;
 }

 .shelf:hover {
 outline: 2px solid #667eea;
 }

 .drawer {
 position: absolute;
 height: 60px;
 background: linear-gradient(to bottom, #D2B48C, #C4A57B);
 border: 2px solid #8B7355;
 cursor: move;
 z-index: 10;
 display: flex;
 align-items: center;
 justify-content: center;
 min-width: 100px;
 }

 .drawer::before {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 40px;
 height: 8px;
 background: #8B7355;
 border-radius: 4px;
 }

 .drawer:hover {
 outline: 2px solid #667eea;
 }

 .partition {
 position: absolute;
 width: 15px !important;
 background: #8B7355;
 border: 1px solid #6B5340;
 cursor: move;
 z-index: 10;
 min-height: 50px;
 }

 .partition:hover {
 outline: 2px solid #667eea;
 }

 .rod {
 position: absolute;
 height: 8px;
 background: linear-gradient(to bottom, #C0C0C0, #A0A0A0);
 border-radius: 4px;
 cursor: move;
 z-index: 10;
 min-width: 100px;
 box-shadow: 0 2px 4px rgba(0,0,0,0.2);
 }

 .rod::before {
 content: '';
 position: absolute;
 left: -8px;
 top: -6px;
 width: 12px;
 height: 20px;
 background: linear-gradient(to right, #B0B0B0, #D0D0D0);
 border-radius: 3px;
 box-shadow: 0 1px 3px rgba(0,0,0,0.2);
 }

 .rod::after {
 content: '';
 position: absolute;
 right: -8px;
 top: -6px;
 width: 12px;
 height: 20px;
 background: linear-gradient(to right, #B0B0B0, #D0D0D0);
 border-radius: 3px;
 box-shadow: 0 1px 3px rgba(0,0,0,0.2);
 }

 .rod:hover {
 outline: 2px solid #667eea;
 }

 /* Кнопка удаления - скрыта по умолчанию, появляется при наведении */
 .delete-btn {
 position: absolute;
 top: -12px;
 right: -12px;
 width: 24px;
 height: 24px;
 background: #dc3545;
 color: white;
 border: 2px solid white;
 border-radius: 50%;
 cursor: pointer;
 font-size: 14px;
 font-weight: bold;
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 102;
 box-shadow: 0 2px 8px rgba(0,0,0,0.3);
 transition: all 0.2s ease;
 opacity: 0;
 visibility: hidden;
 transform: scale(0.8);
 }

 .delete-btn:hover {
 background: #c82333;
 transform: scale(1.1);
 }

 /* Показываем кнопку удаления при наведении на элемент */
 .shelf:hover .delete-btn,
 .drawer:hover .delete-btn,
 .partition:hover .delete-btn,
 .rod:hover .delete-btn {
 opacity: 1;
 visibility: visible;
 transform: scale(1);
 }

 /* Ручки изменения размера - скрыты по умолчанию */
 .resize-handle {
 position: absolute;
 background: #667eea;
 border: 2px solid white;
 border-radius: 3px;
 z-index: 101;
 cursor: pointer;
 box-shadow: 0 2px 5px rgba(0,0,0,0.3);
 opacity: 0;
 visibility: hidden;
 transition: all 0.2s ease;
 }

 .resize-handle:hover {
 background: #764ba2;
 transform: scale(1.2);
 }

 /* Показываем ручки при наведении на элемент */
 .shelf:hover .resize-handle,
 .drawer:hover .resize-handle,
 .partition:hover .resize-handle,
 .rod:hover .resize-handle {
 opacity: 1;
 visibility: visible;
 }

 /* Горизонтальные ручки (для изменения ширины) */
 .resize-handle-right {
 right: -6px;
 top: 50%;
 transform: translateY(-50%);
 width: 12px;
 height: 20px;
 cursor: ew-resize;
 }

 .resize-handle-left {
 left: -6px;
 top: 50%;
 transform: translateY(-50%);
 width: 12px;
 height: 20px;
 cursor: ew-resize;
 }

 /* Вертикальные ручки (для изменения высоты) */
 .resize-handle-bottom {
 bottom: -6px;
 left: 50%;
 transform: translateX(-50%);
 width: 20px;
 height: 12px;
 cursor: ns-resize;
 }

 .resize-handle-top {
 top: -6px;
 left: 50%;
 transform: translateX(-50%);
 width: 20px;
 height: 12px;
 cursor: ns-resize;
 }

 /* Угловые ручки */
 .resize-handle-corner-br {
 bottom: -6px;
 right: -6px;
 width: 12px;
 height: 12px;
 cursor: nwse-resize;
 }

 .resize-handle-corner-bl {
 bottom: -6px;
 left: -6px;
 width: 12px;
 height: 12px;
 cursor: nesw-resize;
 }

 /* Панель настроек */
 .settings-panel {
 background: #f8f9fa;
 padding: 20px;
 border-radius: 15px;
 border: 2px solid #e9ecef;
 overflow-y: auto;
 max-height: 800px;
 }

 .dimension-inputs {
 display: grid;
 gap: 15px;
 margin-bottom: 20px;
 }

 .input-group {
 display: flex;
 flex-direction: column;
 }

 .input-group label {
 font-weight: 600;
 color: #495057;
 margin-bottom: 5px;
 font-size: 0.9em;
 }

 .input-group input,
 .input-group textarea,
 .input-group select {
 padding: 10px;
 border: 2px solid #dee2e6;
 border-radius: 8px;
 font-size: 1em;
 font-family: inherit;
 background: white;
 }

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

 .input-group textarea {
 resize: vertical;
 min-height: 80px;
 }

 .element-color-selector {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 8px;
 margin-top: 10px;
 }

 .color-option {
 width: 100%;
 height: 40px;
 border: 2px solid #dee2e6;
 border-radius: 6px;
 cursor: pointer;
 transition: all 0.2s ease;
 }

 .color-option:hover {
 transform: scale(1.1);
 border-color: #667eea;
 }

 .color-option.selected {
 border-color: #667eea;
 border-width: 3px;
 box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3);
 }

 .export-buttons {
 display: grid;
 gap: 10px;
 margin-top: 20px;
 }

 .export-btn {
 padding: 12px;
 border: none;
 border-radius: 8px;
 font-size: 1em;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.3s ease;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 }

 .export-btn.image {
 background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
 color: white;
 }

 .export-btn.pdf {
 background: linear-gradient(135deg, #dc3545 0%, #fd7e14 100%);
 color: white;
 }

 .export-btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 6px 20px rgba(0,0,0,0.2);
 }

 .export-btn:disabled {
 opacity: 0.6;
 cursor: not-allowed;
 transform: none;
 }

 .info-text {
 font-size: 0.85em;
 color: #6c757d;
 margin-top: 10px;
 line-height: 1.4;
 }

 .doors-selector {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 10px;
 margin-top: 10px;
 }

 .door-option {
 padding: 10px;
 border: 2px solid #dee2e6;
 border-radius: 8px;
 text-align: center;
 cursor: pointer;
 transition: all 0.3s ease;
 }

 .door-option:hover,
 .door-option.selected {
 border-color: #667eea;
 background: rgba(102, 126, 234, 0.1);
 }

 .wardrobe-doors {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 display: flex;
 z-index: 5;
 pointer-events: none;
 }

 .door {
 flex: 1;
 background: rgba(192, 192, 192, 0.3);
 border: 2px solid #808080;
 margin: 0 2px;
 position: relative;
 }

 .door:first-child {
 margin-left: 0;
 }

 .door:last-child {
 margin-right: 0;
 }

 /* Сетка для помощи в позиционировании */
 .grid-overlay {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-image: 
 linear-gradient(rgba(102, 126, 234, 0.1) 1px, transparent 1px),
 linear-gradient(90deg, rgba(102, 126, 234, 0.1) 1px, transparent 1px);
 background-size: 20px 20px;
 pointer-events: none;
 z-index: 1;
 }

 /* Статус загрузки */
 .loading-overlay {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(0,0,0,0.7);
 display: none;
 align-items: center;
 justify-content: center;
 z-index: 1000;
 color: white;
 font-size: 1.2em;
 }

 .loading-overlay.active {
 display: flex;
 }

 /* Скрытый контейнер для отчета */
 .report-container {
 position: absolute;
 left: -9999px;
 top: 0;
 width: 800px;
 background: white;
 padding: 30px;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 .report-header {
 text-align: center;
 margin-bottom: 30px;
 padding-bottom: 20px;
 border-bottom: 3px solid #667eea;
 }

 .report-header h2 {
 color: #667eea;
 font-size: 2em;
 margin-bottom: 10px;
 }

 .report-date {
 color: #6c757d;
 font-size: 0.9em;
 }

 .report-section {
 margin-bottom: 25px;
 }

 .report-section h3 {
 color: #667eea;
 font-size: 1.3em;
 margin-bottom: 15px;
 padding-bottom: 8px;
 border-bottom: 2px solid #e9ecef;
 }

 .report-table {
 width: 100%;
 border-collapse: collapse;
 margin-bottom: 15px;
 }

 .report-table td {
 padding: 10px;
 border: 1px solid #dee2e6;
 }

 .report-table td:first-child {
 font-weight: 600;
 background: #f8f9fa;
 width: 40%;
 }

 .report-elements {
 display: grid;
 gap: 10px;
 }

 .report-element {
 padding: 10px;
 background: #f8f9fa;
 border-left: 4px solid #667eea;
 border-radius: 5px;
 }

 .report-comments {
 padding: 15px;
 background: #fff3cd;
 border: 1px solid #ffc107;
 border-radius: 8px;
 white-space: pre-wrap;
 }

 .report-image {
 text-align: center;
 margin: 20px 0;
 }

 .report-image img {
 max-width: 100%;
 border: 2px solid #dee2e6;
 border-radius: 8px;
 }


/* Стили только для текстового блока */

 .seo-content-block {
 padding: 40px;
 max-width: 1200px;
 margin: 0 auto;
 color: #333;
 line-height: 1.6;
 background: white; /* Чтобы текст читался на фоне градиента body */
 }
 
 .seo-content-block h2 {
 color: #667eea;
 margin-top: 30px;
 margin-bottom: 15px;
 font-size: 1.8em;
 }
 
 .seo-content-block h3 {
 color: #764ba2;
 margin-top: 25px;
 margin-bottom: 10px;
 font-size: 1.4em;
 }
 
 .seo-content-block ul, .seo-content-block ol {
 margin-left: 20px;
 margin-bottom: 15px;
 }
 
 .seo-content-block li {
 margin-bottom: 8px;
 }
 
 .seo-content-block table {
 width: 100%;
 border-collapse: collapse;
 margin: 20px 0;
 }
 
 .seo-content-block th, .seo-content-block td {
 border: 1px solid #dee2e6;
 padding: 12px;
 text-align: left;
 }
 
 .seo-content-block th {
 background-color: #f8f9fa;
 color: #667eea;
 }
 
 .expert-tip {
 background: #eef2ff;
 border-left: 4px solid #667eea;
 padding: 15px;
 margin: 20px 0;
 font-style: italic;
 }

 .form-section-wrapper {
 padding: 40px 20px;
 background: #f8f9fa;
 margin-top: 40px;
 border-top: 1px solid #e9ecef;
 }


/* =========== Чекбокс для согласия с Политикой Конфендициальности и активирования кнопки ========== */

 /* Группируем каждый блок */
 .consent-group {
 margin-bottom: 1.5rem;
 }

 /* Метка — флекс для выравнивания */
 .consent-label {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 cursor: pointer;
 font-family: inherit;
 font-size: 0.95rem;
 user-select: none;
 margin-bottom: 10px;
 position: relative;
 }

 /* Скрываем стандартный чекбокс визуально, но не через opacity:0 */
 .consent-checkbox {
 position: absolute;
 opacity: 0;
 width: 0;
 height: 0;
 margin: 0;
 padding: 0;
 }

 /* Кастомный индикатор через псевдоэлемент самого чекбокса */
 .consent-checkbox + .consent-text::before {
 content: "";
 display: inline-block;
 width: 20px;
 height: 20px;
 background-color: #fff;
 border: 2px solid #2c7a4d;
 border-radius: 4px;
 margin-right: 10px;
 vertical-align: middle;
 transition: all 0.2s ease;
 }

 /* Чекбокс отмечен — меняем цвет индикатора */
 .consent-checkbox:checked + .consent-text::before {
 background-color: #2c7a4d;
 border-color: #2c7a4d;
 content: "✓";
 color: white;
 font-size: 14px;
 font-weight: bold;
 text-align: center;
 line-height: 18px;
 }

 /* Фокус для доступности */
 .consent-checkbox:focus-visible + .consent-text::before {
 outline: 2px solid #0a5b2e;
 outline-offset: 2px;
 }

 /* Текст чекбокса */
 .consent-text {
 display: inline-flex;
 align-items: center;
 cursor: pointer;
 line-height: 1.3;
 color: inherit;
 }

 /* Кнопка */
 .consent-button {
 padding: 8px 20px;
 font-size: 1.5rem;
 font-weight: 600;
 border: none;
 border-radius: 30px;
 cursor: pointer;
 transition: 0.2s;
 background-color: #e52e06; /*-- Цвет кнопки --*/
 color: white;
 opacity: 0.7;
 display: block;
 }

 /* Активная кнопка */
 .consent-button:not(:disabled) {
 background-color: #1e6f3f;
 opacity: 1;
 cursor: pointer;
 }

 .consent-button:not(:disabled):hover {
 background-color: #166034;
 transform: translateY(-1px);
 }

 
/* =================== Форма обратной связи =================== */

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }

 body {
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 min-height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 20px;
 }

 .form-container {
 background: white;
 border-radius: 20px;
 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
 padding: 40px;
 max-width: 600px;
 width: 100%;
 }

 h2 {
 color: #333;
 margin-bottom: 10px;
 font-size: 28px;
 text-align: center;
 }

 .subtitle {
 color: #666;
 text-align: center;
 margin-bottom: 30px;
 font-size: 14px;
 }

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

 label {
 display: block;
 margin-bottom: 8px;
 color: #555;
 font-weight: 600;
 font-size: 14px;
 }

 .required {
 color: #e74c3c;
 }

 input[type="text"],
 input[type="email"],
 input[type="tel"],
 textarea,
 select {
 width: 100%;
 padding: 12px 15px;
 border: 2px solid #e0e0e0;
 border-radius: 10px;
 font-size: 14px;
 transition: all 0.3s ease;
 font-family: inherit;
 }

 input[type="text"]:focus,
 input[type="email"]:focus,
 input[type="tel"]:focus,
 textarea:focus,
 select:focus {
 outline: none;
 border-color: #667eea;
 box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }

 textarea {
 resize: vertical;
 min-height: 120px;
 }

 .file-upload {
 position: relative;
 border: 2px dashed #ccc;
 border-radius: 10px;
 padding: 30px;
 text-align: center;
 cursor: pointer;
 transition: all 0.3s ease;
 background: #f9f9f9;
 }

 .file-upload:hover {
 border-color: #667eea;
 background: #f0f4ff;
 }

 .file-upload input[type="file"] {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 opacity: 0;
 cursor: pointer;
 }

 .upload-icon {
 font-size: 48px;
 color: #667eea;
 margin-bottom: 10px;
 }

 .upload-text {
 color: #666;
 font-size: 14px;
 }

 .upload-hint {
 color: #999;
 font-size: 12px;
 margin-top: 5px;
 }

 /* Стили для визуализации файлов */
 .file-list {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 gap: 12px;
 margin-top: 15px;
 }

 .file-card {
 background: #f8faff;
 border-radius: 12px;
 padding: 10px;
 text-align: center;
 border: 1px solid #e9edf5;
 transition: all 0.2s;
 position: relative;
 box-shadow: 0 2px 6px rgba(0,0,0,0.02);
 }

 .file-card:hover {
 transform: translateY(-3px);
 box-shadow: 0 8px 20px rgba(102, 126, 234, 0.12);
 border-color: #667eea;
 }

 .file-preview {
 width: 100%;
 height: 100px;
 border-radius: 8px;
 background: #f0f4ff;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 40px;
 color: #667eea;
 margin-bottom: 6px;
 overflow: hidden;
 }

 .file-preview img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 }

 .file-info {
 font-size: 12px;
 color: #444;
 overflow: hidden;
 }

 .file-name {
 display: block;
 font-weight: 500;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 }

 .file-size {
 font-size: 10px;
 color: #888;
 }

 .remove-file-btn {
 position: absolute;
 top: 4px;
 right: 6px;
 background: rgba(255, 255, 255, 0.9);
 border: none;
 border-radius: 30px;
 width: 22px;
 height: 22px;
 font-size: 14px;
 line-height: 22px;
 text-align: center;
 cursor: pointer;
 color: #e74c3c;
 font-weight: bold;
 box-shadow: 0 2px 6px rgba(0,0,0,0.08);
 transition: 0.2s;
 padding: 0;
 }

 .remove-file-btn:hover {
 background: #ffe9e9;
 transform: scale(1.1);
 }

 .checkbox-group {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 }

 input[type="checkbox"] {
 width: 18px;
 height: 18px;
 margin-top: 2px;
 cursor: pointer;
 }

 .checkbox-label {
 font-size: 13px;
 color: #666;
 line-height: 1.5;
 }

 .checkbox-label a {
 color: #667eea;
 text-decoration: none;
 }

 .checkbox-label a:hover {
 text-decoration: underline;
 }

 button[type="submit"] {
 width: 100%;
 padding: 15px;
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 color: white;
 border: none;
 border-radius: 10px;
 font-size: 16px;
 font-weight: 600;
 cursor: pointer;
 transition: transform 0.2s, box-shadow 0.2s;
 margin-top: 10px;
 }

 button[type="submit"]:hover {
 transform: translateY(-2px);
 box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
 }

 button[type="submit"]:active {
 transform: translateY(0);
 }

 @media (max-width: 480px) {
 .form-container {
 padding: 25px;
 }

 h2 {
 font-size: 24px;
 }
 
 .file-list {
 grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
 }
 }