:root { /* Глобальные переменные */
  --bg1: #fffefc; /* справа   классик bluered #BF252C #1e3a8a*/ 
  --bg2: #fffefc; /* слева */
  --bg3: rgb(252, 255, 0);
  --bgmain: #fffefc; /* снизу  темный фон классик - #071133  */
  --hdr: rgb(76, 117, 163,0.5);
  --hdrmobile: rgb(165, 186, 208);
  --textmain: #333333;
  --textsecondary: black; 
  --textnav: black; /* Цвет текста кнопок навигации  */
  --accent: rgb(165, 186, 208); /* Акцентный градиент ; также хорошие цвета: 1-, 2 - e9e7ed*/
  --panel: rgba(255,255,255,0.05); /* Цвет панелей */
  --radius: 1.2rem; /* Скругления */
  --shadow: 0 8px 24px rgba(0,0,0,.3); /* Тень */
  --btnnav: white; /* Цвет кнопок навигации */
  --btnnavhov: #0ea5e9; /* Цвет кнопок навигации при наведении*/
  --clrwindow: white; /* Цвет окошка в лого*/
  --bgtiles: rgb(165, 186, 208);  /* Цвет панелек в первом квадрате*/
  --bgswiper: #ccc; /* В свайпере фон вокруг картинки */
  --btn2bg: rgba(165, 186, 208,.5); /* Фон 2-ой кнопки в 1 формочке */ 
  --calcformtxt: #333;
  --calcformbrd: #514c4c;
  --calcformlist: rgb(165, 186, 208);
}
[data-theme="dark"] {
  --bg1: #1e3a8a; /* справа   классик bluered #BF252C #1e3a8a*/ 
  --bg2: #09051155; /* слева */
  --bg3: rgb(252, 255, 0);
  --bgmain: #0f172a; /* снизу  темный фон классик - #071133  */
  --hdr: #9b2d30AA;
  --hdrmobile: #702f46;
  --textmain: #ccc;
  --textsecondary: white; 
  --textnav: #cbd5e1; /* Цвет текста кнопок навигации  */
  --accent: linear-gradient(90deg,#7c3aed,#0ea5e9); /* Акцентный градиент ; также хорошие цвета: 1-, 2 - e9e7ed*/
  --panel: rgba(255,255,255,0.05); /* Цвет панелей */
  --radius: 1.2rem; /* Скругления */
  --shadow: 0 8px 24px rgba(0,0,0,.3); /* Тень */
  --btnnav: #7c3aed; /* Цвет кнопок навигации */
  --btnnavhov: #0ea5e9; /* Цвет кнопок навигации при наведении*/
  --clrwindow: linear-gradient(90deg,#7c3aed,#0ea5e9); /* Цвет окошка в лого*/
  --bgtiles: rgba(255,255,255,.07);  /* Цвет панелек в первом квадрате*/
  --bgswiper: #ccc; /* В свайпере фон вокруг картинки */
  --btn2bg: rgba(255,255,255,.1); /* Фон 2-ой кнопки в 1 формочке */
  --calcformtxt: white;
  --calcformbrd: #514c4c;
  --calcformlist: #702f46;
}

body {
  margin: 0; /* Убираем отступы браузера */
  font-family: 'Inter', sans-serif; /* Шрифт */
  color: var(--textsecondary); /* Цвет текста */
  line-height: 1.6; /* Межстрочный интервал */
  background: /* Фон: градиенты */
    radial-gradient(circle at 10% 10%,var(--bg1),transparent 60%),/*(круг-градиент) Также хорошие цвета: #ececee */
    radial-gradient(circle at 90% 20%,var(--bg2),transparent 40%),/* Также хорошие цвета: #7c3aed55 */
    var(--bgmain);
  padding-top: 120px; /* компенсация высоты header */
}

a { color: #a5b4fc; text-decoration: none; } /* Ссылки */
a:hover { text-decoration: underline; } /* Подчеркивание для ссылок */

.container {
  width: min(1200px,90%); /* Ограничиваем ширину */
  margin: auto; /* Центрируем */
}

.panel {
  background: var(--panel); /* Фон панели */
  border-radius: var(--radius); /* Скругление */
  box-shadow: var(--shadow); /* Тень */
  padding: 2rem; /* Внутренние отступы */
  backdrop-filter: blur(16px); /* Эффект стекла */
}
.panel h1 {
  margin-bottom: 1rem; /* расстояние до следующего блока */
}

header {
  position: fixed;       /* фиксируем сверху */
  top: 0;                /* прижимаем к верхнему краю */
  left: 0;               /* прижимаем к левому краю */
  width: 100%;           /* на всю ширину экрана */
  display: flex; /* Гибкая вёрстка */
  justify-content: space-between; /* Разнесём элементы по краям */
  align-items: center; /* Выравнивание по вертикали */
  padding: 1.5rem 0%; /* Отступы */
  background: var(--hdr);  /* тёмный фон с прозрачностью */
  backdrop-filter: blur(10px);        /* эффект "стекла" */
  z-index: 1000;         /* чтобы было поверх всего */
}
 /* Отступы в хедере*/
.brand {
  margin-left: 5%;
  display: flex;
  align-items: center;
  gap: 12px; /* расстояние между текстом и домиком */
}
nav {
  margin-right: 5%;
}
section {
  scroll-margin-top: 150px; /* отступ для ссылки-якори из-за перекрывания шапкой */
}
nav a {
  display: inline-block;           /* чтобы можно было задавать отступы и фон */
  padding: 8px 16px;               /* внутренние отступы */
  margin: 0 6px;                   /* расстояние между прямоугольниками */
  background: var(--btnnav);             /* цвет фона блока */
  color: var(--textsecondary);                     /* цвет текста */
  text-decoration: none;           /* убираем подчеркивание */
  font-weight: 600;                /* чуть жирнее */
  border-radius: 6px;              /* скругление углов */
  position: relative;              /* для возможных декоративных элементов */
  transition: background 0.3s, transform 0.2s;
}

/* Эффект при наведении (необязательно) */
nav a:hover {
  background: var(--btnnavhov);
  transform: translateY(-2px);      /* лёгкое поднятие блока */
}
.logo {
  font-weight: 800;                   /* Жирный текст */
  font-size: 1.8rem;                  /* Размер шрифта (можно подкорректировать) */
  background: var(--textmain); /* Градиентный текст */
  background-clip: text;      /* Градиент обрезается по тексту */
  -webkit-text-fill-color: transparent; /* Текст прозрачный, виден только градиент */
  text-align: center;                  /* Центрирование текста */
  line-height: 1.2;                    /* Межстрочный интервал */
  letter-spacing: 1px;                 /* Расстояние между буквами */
  text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Небольшая тень для текста */
}
.logo .translate {
    background: none;                /* убираем фон */
  background-clip: initial; /* сбрасываем обрезку */
  -webkit-text-fill-color: var(--textmain);   /* делаем серым */
  color: var(--textmain);                     /* на всякий случай */
  font-weight: 700;
  font-size: 14px;
}
/* Дом-лого */
.logo-house {
  width: 40px;
  height: 40px;
  position: relative;
  background: var(--textmain);   /* сам домик чёрный */
  border-radius: 5px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 3px;
  padding: 5px;
  box-sizing: border-box;
}

/* Крыша */
.logo-house::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 110%;
  height: 20px;
  background: var(--textmain);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

/* Окна */
.window {
  background: var(--clrwindow); /* фон сайта */
  border-radius: 1px;
}
/* Текст цнопок навигации */
nav a { margin-left: 1.5rem; color: var(--textnav); } /* Ссылки меню */
nav a:hover { color: var(--textsecondary); } /* Выделение для меню */

.main {
  display: grid; /* Сетка */
  grid-template-columns: 1fr 1fr; /* Две колонки */
  gap: 2rem; /* Расстояние */
  align-items: center; /* Вертикальное выравнивание */
  margin: 3rem 0; /* Отступ сверху и снизу */
}
.buttons {
  display: flex;          /* располагаем кнопки в одну линию */
  flex-wrap: nowrap;      /* запрещаем перенос */
  justify-content: flex-start;/* выравнивание по центру */
  gap: 1rem;              /* расстояние между кнопками */
  margin-top: 1.5rem;
}

.btn {
  display: inline-block; /* Кнопка = строчно-блочный элемент */
  padding: .75rem 1.5rem; /* Внутренние отступы */
  border-radius: var(--radius); /* Скругление */
  font-weight: 600; /* Полужирный */
  transition: .2s; /* Анимация */
  margin-left:1rem;
  background:var(--btn2bg);
  margin: 0.5rem;
  color: var(--textsecondary);
}
.btn-primary {  background: var(--accent); color: var(--textsecondary); } /* Основная кнопка */
.btn-primary:hover { transform: scale(1.05); } /* Эффект при наведении */

.grid {
  display: grid; /* Сетка */
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); /* Автоматическая адаптивная сетка */
  gap: 1.5rem;
  margin-top: 2rem;
}


.tile {
  background: var(--bgtiles);/* Фон плитки */
  padding: 3rem; /* Внутренние отступы */
  border-radius: var(--radius); /* Скругления */
  text-align: center; /* Центрирование текста */
  font-weight: 600; /* Жирность */
}

form { display: grid; gap: 1rem; } /* Сетка в форме */
input, textarea {
  padding: .8rem; /* Отступы */
  border-radius: .6rem; /* Скругления */
  border: none; /* Без рамки */
  font-family: inherit; /* Тот же шрифт, что у body */
}
textarea { resize: vertical; } /* Разрешаем менять высоту */

footer {
  margin: 4rem 0 2rem; /* Отступы */
  text-align: center; /* Центрируем */
  color: #94a3b8; /* Цвет текста */
  font-size: .9rem; /* Размер шрифта */
}
.roomphoto img {
  width: 100%;            /* картинка по ширине карточки */
  height: 180px;          /* фиксированная высота */
  object-fit: cover;      /* обрезаем по размеру, сохраняя пропорции */
  border-radius: 0.8rem;  /* скруглённые углы у фото */
  margin-bottom: 0.8rem;  /* отступ под картинкой */
}
.mainphoto img {
  /* height:220px;
  background:rgba(255,255,255,.1);
  border-radius:.8rem;
  display:flex;
  align-items:center;
  justify-content:center;*/
  width: 100%;            /* картинка по ширине карточки */
  height: 200px;          /* фиксированная высота */
  object-fit: cover;      /* обрезаем по размеру, сохраняя пропорции */
  border-radius: 0.8rem;  /* скруглённые углы у фото */
  margin-bottom: 0.8rem;  /* отступ под картинкой */
}
/* Контейнер для выпадающего меню */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Кнопка меню */
.dropbtn {
  background: none;
  border: none;
  color: #cbd5e1;
  font-size: 1rem;
  cursor: pointer;
  margin-left: 1.5rem;
  font-family: inherit;
}

.dropbtn:hover {
  color: var(--textsecondary);
}

/* Выпадающий список */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(30,41,59,0.95); /* тёмный фон */
  min-width: 160px;
  border-radius: 0.5rem;
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
  z-index: 1;
}

/* Ссылки внутри выпадашки */
.dropdown-content a {
  color: #cbd5e1;
  padding: 0.75rem 1rem;
  text-decoration: none;
  display: block;
  border-radius: 0.5rem;
}

.dropdown-content a:hover {
  background: rgba(255,255,255,0.1);
  color: var(--textsecondary);
}

/* Показать меню при наведении */
.dropdown:hover .dropdown-content {
  display: block;
}
/* Свайпер картинок */
.swiper {
  width: 100%;
  aspect-ratio: 16 / 7;  /* автоматическая высота, как у видео */
  /*height: 400px;     высота слайдера */
  margin: auto;
  border-radius: 10px;
  overflow: hidden;
  position:relative;  
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bgswiper); /* серый фон вокруг картинки */
}
.swiper-slide img {
  height: 100%;          /* растянуть по высоте слайда */
  width: auto;           /* ширина подстраивается автоматически */
  object-fit: contain;   /* не обрезает изображение */
  background: var(--bgswiper);      /* на всякий случай фон картинки */
}
/* Кнопки переключения */
.swiper-button-prev,
.swiper-button-next {
  position: absolute;       /* чтобы позиционировать вне слайда */
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: var(--hdr);
  border: 2px solid var(--hdr);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--textmain);
  z-index: 10;
}

/* Сдвигаем кнопки наружу */
.swiper-button-prev {
  left: -50px;   /* слева от слайда */
}

.swiper-button-next {
  right: -50px;  /* справа от слайда */
}
.swiper-pagination-bullet {
  background: var(--hdr);        /* цвет точек */
}
 nav .text {
    display: inline;
  }
  nav .icon {
     margin-left: 4px;
  }

.panel h1 .slogan {
  display: block;        /* каждая строка отдельным блоком */
   white-space: nowrap;  /* запрещаем перенос */
  margin: 0;           /* убираем лишние отступы */
  line-height: 1.2;    /* уменьшаем расстояние между строками */
}
/* Калькулятор */
#price-calculator {
  max-width: 400px;
  margin: 2rem auto;
  padding: 2rem;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
}

#calc-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}

#calc-form label {
  font-weight: 600;
  margin-bottom: 0.3rem;
}

#calc-form select,
#calc-form input {
  padding: 0.5rem;
  border: 1px solid var(--calcformbrd);
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  color: var(--text-color);
}
#calc-form select {
  background-color: rgba(255, 255, 255,0.1);   
  color: var(--calcformtxt);               /* Черный или темно-серый цвет для текста */
   
}
#calc-form select option {
  background-color: var(--calcformlist); 
  
}
#calc-form input {
  background-color: rgba(255, 255, 255,0.1); /* Прозрачный белый фон для input */
   padding-right: 85%;
}



.result {
  margin-top: 1.5rem;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--accent-color);
}
 /* Гугл-карты */
.contact-container {
  display: flex;
  flex-wrap: wrap;              /* чтобы адаптировалось под телефон */
  gap: 2rem;                    /* расстояние между формой и картой */
  margin-top: 2rem;
}

.contact-form, .contact-map {
  flex: 1 1 45%;                /* каждая половина занимает около 45% */
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}

.contact-map {
    min-height: 300px;           /* Чтобы карта не была слишком низкой */
  position: relative;          /* Оставляем для других целей */
  padding: 15px;              /* Немного отступов */         
}
#map {
  width: 100%;
  height: 90%;
  border-radius: var(--radius);
}

/* Контейнер для кнопок */
#button-container {
  display: flex; /* Выравнивание кнопок по горизонтали */
  justify-content: space-between; /* Равное распределение пространства */
  position: absolute; /* Позиционируем относительно карты */
  bottom: 10px; /* Немного отступа от низа */
  left: 10px; /* Немного отступа от левого края */
  right: 10px; /* Отступ с правой стороны */
  z-index: 10; /* Чтобы кнопки были поверх карты */
  padding: 0; /* Убираем отступы, они могут нарушить равномерное распределение */
  border-radius: 8px; /* Скругление углов */
}

/* Для кнопок */
#myLocation, #resetMap {
  flex: 1; /* Равное распределение ширины */
  background: var(--btnnav); /* Цвет кнопок */
  color: var(--textsecondary);
  border: none;
  border-radius: 8px;
  padding: 0.5rem;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: background 0.2s;
  margin: 0 5px; /* Добавим небольшой промежуток между кнопками */
}

#myLocation:hover, #resetMap:hover {
  background: var(--btnnavhov);
}

/* Кнопка переключения темы */
#theme-toggle {
  cursor: pointer;
  background: none;
  border: none;
  font-size: 1.5rem;
  margin-right: 1rem;
  color: var(--text-color);
  transition: transform 0.2s;
}

#theme-toggle:hover {
  transform: scale(1.2);
}

/* Мобильная версия */
@media (max-width: 768px) {

  .main { grid-template-columns:1fr; } 
  header {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: auto;
    max-width: 260px;               /* ограничиваем ширину */
    background: var(--hdrmobile);            /* сплошной фон  */
    color: #fff;
    padding: 8px 12px;
    border-bottom-left-radius: 12px;/* округление снизу и слева */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 9999;
    font-size: 0.9rem;              /* уменьшаем шрифт */
    line-height: 1.3;
  }


  header .logo {
    font-weight: 700;
    font-size: 1rem;                /* размер текста ещё меньше */
    margin-bottom: 6px;
    /* опции для того чтоб не переносилось (это не для телефона ошибочно поставил) */
    /*  display: block;        /* каждая строка отдельным блоком */
    /* white-space: nowrap;  /* запрещаем перенос */
    /*  margin: 0;           /* убираем лишние отступы */
    /*  line-height: 1.2;    /* уменьшаем расстояние между строками */
  }

  /* Навигация — компактная колонка */
  header nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
  }

  header nav a {
    display: inline-block;
    padding: 4px 8px;
    background: #1e293b;            /* кнопка-темнее чем фон */
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.85rem;
  }
 

  .logo .translate {
    display: none; /* скрываем перевод на телефонах */
  }

  nav .text {
    display: none;
  }
  nav .dropdown {
    display: none;
  }


  /* Чтобы контент не прятался за шапкой */
  body {
    padding-top: 130px; /* оставляем место сверху под фиксированную шапку */
  }
  section, [id] {
    scroll-margin-top: 140px; /* ссылки якоря пересылают корректно*/
  }

  .swiper-button-prev,
  .swiper-button-next {
    display: none !important; /* скрываем кнопки свайпера */
  }
  /* Гугл-карты */
  .contact-container {
    flex-direction: column;     /* на телефоне — вертикально */
  }
    .contact-map {
    min-height: 200px;              /* меньше высота на мобильных */
  }
}
@media (max-width: 500px) {/* самый маленький экран */
.panel {
    max-width: 70vw;
    width:80%; /* меньше для узких экранов */
    white-space: normal;
  }
.buttons {
  display: flex;          /* располагаем кнопки в одну линию */
  flex-wrap: wrap;      /* перенос */
  justify-content: flex-start;/* (по желанию) выравнивание по центру */
  gap: 1rem;              /* расстояние между кнопками */
  margin-top: 1.5rem;
}

  .slogan {
    font-size: 20px;
    white-space: wrap;
  }
}

@media (max-width: 700px) {
  .panel h1 {
    font-size: 1.8rem; /* меньше для узких экранов */
  }

}
@media (max-width: 1400px) {
    nav .text {
    display: none;
   
  }
  nav a {

  margin: 0 3px;                   /* расстояние между прямоугольниками */

}

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


/* ===== МОБИЛЬНЫЙ ХЕДЕР ===== */
@media (max-width: 768px) {

  /* Делаем навигацию колонкой */
  header nav {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 6px;
  }

  /* прячем текст ссылок , но делаем ссылки в один ряд */
  header nav a {
    margin: 0;
    background: #1e293b;
    color: white !important;
    padding: 6px 8px;
  }

  /* 1 РЯД — ССЫЛКИ */
  header nav {
    order: 1;
  }
  header nav a {
    display: inline-block;
  }

  /* Делаем ссылки в одну строку */
  header nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  /* 2 РЯД — ЛОГО + СМЕНА ТЕМЫ */
  header .brand {
    order: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0;
  }

  #theme-toggle {
    margin-left: 12px;
  }

  /* dropdown на мобильном скрываем */
  nav .dropdown {
    display: none !important;
  }
}

/* Убрать рамки ТОЛЬКО у кнопок "Рассчитать" и "Отправить" */
#calc-btn,
.contact button[type="submit"],
#calc-btn:hover,
.contact button[type="submit"]:hover,
#calc-btn:focus,
.contact button[type="submit"]:focus,
#calc-btn:active,
.contact button[type="submit"]:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}