/* ============================================================
   GLOBAL RESET (ЗОЛОТЕ ПРАВИЛО)
   Це змушує браузер рахувати padding всередину ширини, а не назовні.
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 🔤 Шрифт */
@font-face {
  font-family: "Philosopher";
  src: url("/fonts/philosopher/Philosopher-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Philosopher";
  src: url("/fonts/philosopher/Philosopher-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 🎨 Глобальні змінні кольорів */
:root {
  /* Основна палітра */
  --color-bg-gradient: linear-gradient(
    120deg,
    #cfdef3 0%,
    #e0eafc 50%,
    #88acf0 100%
  );

  /* Акценти */
  --color-accent: #004aad;
  --color-accent-light: #4d9eff;
  --color-accent-hover: #5cb4ff;
  --color-accent-dark: #005fd1;

  /* Кнопки */
  --btn-gradient: linear-gradient(
    180deg,
    var(--color-accent-light) 0%,
    var(--color-accent) 100%
  );
  --btn-hover-gradient: linear-gradient(
    180deg,
    var(--color-accent-hover) 0%,
    var(--color-accent-dark) 100%
  );

  /* Тіні */
  --shadow-main: 0 6px 16px rgba(0, 0, 0, 0.25);
  --shadow-hover: 0 0 18px rgba(0, 94, 209, 0.4);
  --shadow-focus: 0 0 25px rgba(0, 110, 255, 0.6);

  /* Радіуси */
  --radius-main: 16px;
  --radius-btn: 26px;

  /* Футер */
  --footer-bg: #0f0f0f;
  --footer-text: #ffffff;
  --footer-subtext: rgba(255, 255, 255, 0.8);
  --footer-border: rgba(255, 255, 255, 0.1);
  --footer-border-light: rgba(255, 255, 255, 0.15);
  --footer-link: #ffffff;
  --footer-link-accent: #8dc0ff;
  --footer-link-hover: #b7d8ff;
  --footer-hover-glow: rgba(255, 215, 0, 0.6);
  --social-bg: rgba(255, 255, 255, 0.1);
  --social-bg-hover: rgba(255, 255, 255, 0.25);
  --badge-bg: #22c55e;
}
button {
  position: relative;
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  color: #fff;
  font-family: "Philosopher", sans-serif;
  font-weight: 600;
  background: var(--btn-gradient);
  box-shadow: var(--shadow-main);
  transition: all 0.35s ease;
  overflow: hidden;
}

button:hover {
  background: var(--btn-hover-gradient);
  box-shadow: var(--shadow-hover);
  transform: scale(1.04);
}

button:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
  transform: scale(1.05);
}

/* 🌟 Ефект блиску */
button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.3) 100%
  );
  transform: skewX(-25deg);
  transition: all 0.6s ease;
}

button:hover::before {
  left: 125%;
}

/* ============================================================
   FIX: ПРИТИСКАННЯ ФУТЕРА (STICKY FOOTER - FINAL)
   ============================================================ */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Body просто контейнер, без флексу (флекс буде всередині) */
body {
  min-height: 100vh;
  /* Важливо: якщо у body є padding/border, це може ламати height: 100% */
  box-sizing: border-box;
}

/* ============================================================
   1. ГОЛОВНИЙ ХЕДЕР (ОСНОВА)
   ============================================================ */
.diia-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
  height: 72px;
  font-family: "Philosopher", sans-serif;
  width: 100%;
}

.header_inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  position: relative;
}

/* --- ЛІВА СТОРОНА --- */
.header_left {
  display: flex;
  align-items: center;
}

.header_logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #000;
  margin-right: 40px;
}
.logo-img {
  height: 40px;
  margin-right: 10px;
}
.logo-text {
  font-size: 20px;
  font-weight: bold;
  white-space: nowrap;
}

/* Меню (ПК) */
.header_menu {
  display: block;
}
.menu_list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 30px;
}
.menu_item {
  display: flex;
  align-items: center;
}
.menu_link {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;

  /* 🔥 ГОЛОВНА ЗМІНА: Додаємо відступи з боків (20px) та зверху/знизу (8px) */
  padding: 8px 20px;

  color: #000;
  text-decoration: none;
  display: flex;
  align-items: center;

  /* Збільшуємо gap, щоб текст не лип до стрілки */
  gap: 8px;

  /* Додаємо радіус тут, щоб він мав простір для закруглення навколо тексту */
  border-radius: 20px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.arrow {
  font-size: 10px;
  transition: 0.3s;
  /* Додаємо легкий відступ для стрілочки, щоб вона була симетрична */
  margin-top: 2px;
}

.menu_link.active .arrow {
  transform: rotate(180deg);
}

/* Додамо легкий фон при наведенні, щоб бачити межі кнопки */
.menu_link:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
body.contrast-mode .menu_link:hover,
body.contrast-mode .menu_link.active,
body.contrast-mode .menu_link:focus,
body.contrast-mode .js-mega-menu-toggle:hover,
body.contrast-mode .js-mega-menu-toggle.active,
body.contrast-mode .js-mega-menu-toggle:focus {
  box-shadow: 0 0 15px 3px rgba(255, 255, 0, 0.9) !important;
  outline: 2px solid #ffff00 !important;
  background-color: #000 !important;
  color: #ffff00 !important;
  border-radius: 20px;
}

body.contrast-mode .menu_link:hover .arrow,
body.contrast-mode .menu_link.active .arrow,
body.contrast-mode .menu_link:focus .arrow {
  border-top-color: #ffff00 !important;
  color: #ffff00 !important;
}

/* --- ПРАВА СТОРОНА --- */
.header_right {
  display: flex;
  align-items: center;
}

/* ============================================================
   КНОПКА "НА ГОЛОВНУ" В ХЕДЕРІ
   ============================================================ */

.header-home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background: var(--btn-gradient); /* Твій градієнт */
  color: #fff;
  text-decoration: none; /* Прибираємо підкреслення посилання */
  border: none;
  border-radius: 20px;

  padding: 8px 16px;
  margin-right: 15px;

  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;

  transition:
    transform 0.2s,
    box-shadow 0.2s;
  box-shadow: 0 4px 10px rgba(136, 172, 240, 0.4);
}

.header-home-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(136, 172, 240, 0.6);
  color: #fff; /* Щоб колір тексту не мінявся */
}
.header-home-btn:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
  transform: scale(1.05);
}

/* 🌟 Ефект блиску */
.header-home-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.3) 100%
  );
  transform: skewX(-25deg);
  transition: all 0.6s ease;
}

.header-home-btn:hover::before {
  left: 125%;
}

/* Мобільний адаптив: тільки іконка */
@media (max-width: 600px) {
  .header-home-btn .text {
    display: none;
  }
  .header-home-btn {
    padding: 0;
    border-radius: 50%;
    width: 36px;
    height: 36px;
  }
  .header-home-btn .icon {
    font-size: 16px;
  }
}

/* ============================================================
   2. MEGA MENU (ВИПАДАЙКА НА ПК)
   ============================================================ */
.mega-menu {
  position: absolute;
  top: 72px;
  left: 0;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  display: none;
  z-index: 990;
}
.mega-menu.active {
  display: block;
  animation: slideDown 0.3s ease;
}
.mega-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}
.mega-row {
  display: flex;
  gap: 30px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.mega-col h3 {
  font-size: 15px;
  color: #000;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 25px;
  border-bottom: 2px solid #88acf0;
  padding-bottom: 10px;
  display: inline-block;
}
.mega-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mega-col li {
  margin-bottom: 25px;
}
.mega-col a {
  display: inline-block;
  text-decoration: none;
  color: #000;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
  transition: color 0.2s;
}
.mega-col a:hover {
  color: #88acf0;
}
.mega-col .sub-text {
  display: block;
  font-size: 13px;
  color: #555;
  line-height: 1.4;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   3. МОБІЛЬНЕ МЕНЮ (ОВЕРЛЕЙ + АКОРДЕОН)
   ============================================================ */

/* Кнопка Бургер */
.menu-btn-mob {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.menu-btn-mob span {
  display: block;
  width: 24px;
  height: 2px;
  background: #000;
  border-radius: 2px;
}

/* Оверлей */
.mob-overlay {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100vh;
  background: #fff;
  z-index: 2000;
  transition: 0.3s;
}
.mob-overlay.active {
  left: 0;
}

.mob-content {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Шапка моб. меню */
.mob-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.mob-logo-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  font-size: 20px;
}
.mob-logo-wrap img {
  height: 32px;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

.mob-close {
  font-size: 18px;
  background: var(--btn-gradient);
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Список */
.mob-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  overflow-y: auto;
  flex: 1;
}

/* --- СТИЛІ КНОПОК (Fixed v4: FINAL NO SHADOW) --- */

.mob-link,
.mob-group-btn {
  /* Геометрія */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 15px 10px;
  font-size: 17px;
  font-weight: 600;

  /* БАЗОВИЙ КОЛІР */
  background: #fff !important;
  color: #000 !important;

  border: none;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  box-sizing: border-box;

  /* 🔥 ВБИВАЄМО ВСІ ТІНІ І ЗБІЛЬШЕННЯ ЗА ЗАМОВЧУВАННЯМ 🔥 */
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.2s,
    color 0.2s;
}

.mob-link.no-arrow {
  display: block;
}

/* Стрілки */
.mob-arrow,
.mob-arrow-sm {
  font-size: 12px;
  color: #bbb;
  margin-left: 10px;
  transition: transform 0.3s;
}

/* --- ЛОГІКА СТАНІВ --- */

/* 1. АКТИВНИЙ СТАН (Тільки коли відкрито) */
.mob-link.active,
.mob-group-btn.active {
  background: #88acf0 !important;
  color: #fff !important;
  border-bottom: 1px solid #88acf0;
  border-radius: 0;
  /* Тут теж гарантуємо відсутність зайвих тіней */
  box-shadow: none !important;
  transform: none !important;
}

/* Крутимо стрілку */
.mob-link.active .mob-arrow,
.mob-group-btn.active .mob-arrow-sm {
  transform: rotate(180deg);
  color: #fff !important;
}

/* 2. ХОВЕР (ТІЛЬКИ ПК) */
@media (hover: hover) {
  .mob-link:hover:not(.active),
  .mob-group-btn:hover:not(.active) {
    background: #f4f7fa !important;
    color: #88acf0 !important;
  }
}

/* 3. ФОКУС (КОЛИ ТЕЛЕФОН ТРИМАЄ НАТИСКАННЯ) 
   Тут ми примусово все зануляємо */
.mob-link:focus:not(.active),
.mob-group-btn:focus:not(.active) {
  background: #fff !important;
  color: #000 !important;
  box-shadow: none !important; /* Вбиваємо блакитну тінь */
  transform: none !important; /* Вбиваємо збільшення */
  outline: none !important;
  border-bottom: 1px solid #eee !important;
}

/* Підменю (Групи) */
.mob-submenu {
  display: none;
  background: #f7f9fc;
  /* Легка внутрішня тінь для підменю (можна прибрати, якщо хочеш зовсім плоско) */
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.03);
}
.mob-submenu.open {
  display: block;
}

/* Список категорій */
.mob-cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  background: #fff;
}
.mob-cat-list.open {
  display: block;
}
.mob-cat-list li a {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 15px 12px 35px;
  font-size: 16px;
  color: #131212;
  text-decoration: none;
  border-bottom: 1px solid #f5f5f5;
  box-sizing: border-box;
  line-height: 1.3;
}
.mob-cat-list li a:hover {
  color: #88acf0;
  background: #fefefe;
}

/* ============================================================
   4. ФОРМА ТА КАРТКИ
   ============================================================ */
.diia-container {
  max-width: 500px;
  margin: 40px auto;
  padding: 0 15px;
}
.diia-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 28px;
  color: #2c3e50;
}
.diia-card {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
}
.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  color: #777;
  text-align: center;
  text-transform: uppercase;
}
.diia-select,
.diia-input {
  width: 100%;
  height: 56px;
  border: 2px solid transparent;
  background: #f2f2f2;
  border-radius: 12px;
  padding: 0 15px;
  font-size: 16px;
  outline: none;
  transition: 0.3s;
  box-sizing: border-box;
  text-align-last: center;
  font-family: inherit;
}
.diia-select:focus,
.diia-input:focus {
  background: #fff;
  border-color: #88acf0;
}
.back-box {
  text-align: center;
  margin-top: 30px;
}

/* ============================================================
   5. АДАПТИВНІСТЬ (Медіа-запити)
   ============================================================ */
@media (max-width: 1100px) {
  .header_inner {
    padding: 0 20px;
  }
  .nav-desktop {
    display: none;
  }
  .menu-btn-mob {
    display: flex;
  }
  .nav-hide-mobile {
    display: none;
  }
  .diia-header {
    height: 60px;
  }
  .mega-menu {
    display: none !important;
  }
  .header_logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-right: 0;
  }
  .logo-img {
    margin-right: 0;
  }
}

/* FIX: Логотип у мобільному меню */
.mob-logo-wrap img {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
}
/* --- VIEW SYSTEM (SPA) --- */
.view-section {
  display: none; /* За замовчуванням ховаємо все */
  padding: 40px 20px;
  animation: fadeIn 0.4s ease;
}
.view-section.active {
  display: block; /* Показуємо активний блок */
}

/* ============================================================
   DIIA STYLE HERO SECTION (WIDE VERSION)
   ============================================================ */

.diia-hero-wrap {
  width: 95%; /* Займає майже всю ширину екрану */
  max-width: 1200px; /* Але не більше 1200px (щоб не розтягувалось на величезних моніторах) */
  margin: 0 auto 20px; /* Центруємо блок по горизонталі */

  background: linear-gradient(120deg, #c2e9fb, #a1c4fd, #fbc2eb);
  background-size: 300% 300%; /* Збільшуємо розмір, щоб перелив мав більшу амплітуду */
  animation: gradientMove 20s ease-in-out infinite; /* Уповільнюємо до 20с */
  border: 1px solid rgba(255, 255, 255, 0.3); /* Додаємо ледь помітну рамку для чіткості */
  padding: 60px 40px 60px;

  text-align: center;
  border-radius: 40px; /* Скруглені кути з усіх боків */
  box-shadow: 0 20px 40px rgba(164, 155, 243, 0.25); /* Тінь стала трохи м'якшою */
  box-sizing: border-box;
}
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* Контент всередині центруємо, але він може бути вужчим за фон */
.diia-hero-content {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

/* Адаптивність для телефонів (щоб на мобільному не було занадто широко) */
@media (max-width: 768px) {
  .diia-hero-wrap {
    width: 100%; /* На телефоні на всю ширину */
    border-radius: 30px 30px 30px 30px; /* Скругляємо тільки низ */
    padding: 60px 15px 80px;
    margin-top: 0px; /* Трохи підтягуємо вгору до хедера */
  }
}

/* 2. Заголовок */
.diia-main-title {
  font-size: 48px;
  font-weight: 600;
  color: #000;
  margin-bottom: 40px;
  letter-spacing: -1px;
}

/* 3. Перемикачі (Чорна кнопка) */
.diia-toggles-wrap {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.4); /* Напівпрозорий фон */
  padding: 5px;
  border-radius: 40px;
  margin-bottom: 25px;
  backdrop-filter: blur(10px); /* Ефект скла */
}

.diia-toggle-btn {
  background: none;
  border: none;
  padding: 12px 30px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
  color: #000;
  display: flex;
  align-items: center;
  gap: 8px;
}

.diia-toggle-btn.active {
  background: #000; /* Чорний активний */
  color: #fff; /* Білий текст */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.diia-toggle-btn .icon {
  font-size: 18px;
}

/* 4. Поле пошуку (Капсула) */
.diia-search-box {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 0 auto 20px;
}

#main-search {
  width: 100%;
  height: 70px; /* Високий інпут */
  padding: 0 80px 0 35px; /* Місце зліва для тексту, справа для кнопки */
  font-size: 20px;
  border: none;
  border-radius: 35px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* М'яка тінь */
  outline: none;
  color: #333;
  transition: transform 0.3s;
}

#main-search:focus {
  transform: scale(1.02); /* Легке збільшення при кліку */
}
#main-search::placeholder {
  color: #999;
  font-weight: 400;
}

/* Кнопка стрілки всередині */
.diia-search-arrow-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 50px;
  height: 50px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}
.diia-search-arrow-btn:hover {
  background: #333;
  transform: rotate(-45deg); /* Ефект повороту при наведенні */
}

/* 5. Підказка знизу */
.diia-hint {
  font-size: 15px;
  color: rgba(0, 0, 0, 0.6);
}
.diia-hint a {
  color: #000;
  text-decoration: underline;
  font-weight: 600;
}
.diia-hint a:hover {
  text-decoration: none;
}

/* 6. Адаптивність для мобільного */
@media (max-width: 768px) {
  .diia-main-title {
    font-size: 32px;
  }
  #main-search {
    height: 60px;
    font-size: 16px;
    padding-left: 25px;
  }
  .diia-search-arrow-btn {
    width: 40px;
    height: 40px;
    top: 10px;
    right: 10px;
    font-size: 16px;
  }
}

/* ============================================================
   ВИПАДАЙКА ПОШУКУ (ВИПРАВЛЕНО)
   ============================================================ */

/* Контейнер випадайки */
.search-dropdown {
  position: absolute;
  top: 80px; /* Відступ від поля пошуку */
  left: 0;
  width: 100%;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  max-height: 400px;
  overflow-y: auto; /* Скрол, якщо багато результатів */
  z-index: 100;
  padding: 10px 0;
  display: none; /* Спочатку приховано */
}

/* Окремий рядок результату (Батьківський блок) */
.search-result-item {
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  font-size: 16px;
  color: #333;
  transition: background 0.2s;

  /* Flexbox для вирівнювання: Текст зліва, Стрілка справа */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Обгортка для тексту (Збільшений шрифт) */
.search-text-wrapper {
  flex: 1; /* Займає весь вільний простір */
  white-space: normal; /* Перенос рядка */
  overflow: visible;
  text-overflow: clip;
  margin-right: 15px;
  text-align: left;

  /* 👇 ЗМІНИ ТУТ 👇 */
  line-height: 1.5; /* Більше повітря між рядками */
  font-size: 17px; /* Оптимальний розмір для читання */
  color: #222; /* Трохи темніший колір для контрасту */
  font-weight: 500; /* Легка жирність для чіткості */
}

/* Стиль для стрілочки */
.search-arrow {
  flex-shrink: 0; /* Забороняємо стрілці стискатись */
  color: #ccc;
  font-size: 14px;
}

/* Останній елемент без лінії */
.search-result-item:last-child {
  border-bottom: none;
}

/* Ховер ефект */
.search-result-item:hover {
  background: #f5f7fa;
  color: #000;
}
/* ============================================================
   КНОПКА "НАЗАД" (СТИЛЬ ДІЯ - ОНОВЛЕНИЙ)
   ============================================================ */

.back-link-wrap {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 25px; /* Відступ знизу до заголовка */
  padding-top: 0; /* Прибрали відступ зверху */
  margin-top: -10px; /* ⬆️ Підтягуємо кнопку вище */
}

.diia-back-link {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;

  display: inline-flex;
  align-items: center;
  gap: 12px; /* Трохи більше повітря між стрілкою і текстом */

  /* 👇 ЗБІЛЬШЕНИЙ ШРИФТ */
  font-family: inherit;
  font-size: 19px; /* Було 16px, стало 19px */
  font-weight: 600; /* Жирніший, щоб було добре видно */
  color: #000 !important;

  cursor: pointer;
  text-decoration: none;
  transition:
    opacity 0.2s,
    transform 0.2s;
}

.diia-back-link:hover {
  opacity: 0.7;
  transform: translateX(-3px); /* Легкий рух вліво при наведенні */
  background: transparent !important;
}

/* Іконка стрілки */
.diia-back-link svg {
  width: 24px; /* Також трохи збільшили іконку */
  height: 24px;
  fill: #000;
  display: block;
}
/* ============================================================
   СТИЛЬ СПИСКУ ПОСЛУГ (ЯК В ДІЇ)
   ============================================================ */

/* Заголовок категорії */
.diia-cat-title {
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 40px;
  color: #000;
  line-height: 1.2;
}

/* Підзаголовок "Послуги" */
.diia-cat-subtitle-wrap {
  margin-bottom: 20px;
  text-align: left;
}

.diia-cat-subtitle {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #000;
}

/* Чорна лінія розділювач (товста, як в Дії) */
.diia-divider {
  height: 2px;
  background-color: #000;
  width: 100%;
}

/* Контейнер списку */
.diia-services-list {
  display: flex;
  flex-direction: column;
}

/* Окремий рядок послуги */
.diia-service-row {
  display: flex;
  justify-content: space-between; /* Текст зліва, стрілка справа */
  align-items: center;

  padding: 20px 0; /* Повітря зверху і знизу */
  border-bottom: 1px solid #000; /* Тонка лінія між послугами */

  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.2s,
    padding-left 0.2s;
}

/* Текст послуги */
.diia-service-row .service-name {
  font-size: 26px;
  font-weight: 400; /* Звичайний шрифт, не жирний */
  color: #000;
  line-height: 1.5;
  padding-right: 20px; /* Відступ від стрілки */
}

/* Стрілка */
.diia-service-row .service-arrow {
  font-size: 32px;
  color: #000;
  transition: transform 0.2s;
}

/* Ефект при наведенні */
.diia-service-row:hover {
  /* Глибокий графітовий з синім підтоном замість #000 */
  background-color: #1a1c1e !important;
  transform: scale(0.985); /* Трохи менше стискання, щоб не "пливло" */
  border-radius: 12px;
  padding-left: 15px;
  padding-right: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Легка тінь додасть об'єму */
}

.diia-service-row:hover .service-arrow {
  color: #fff !important;
  transform: translateX(10px); /* Більш динамічний рух */
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.diia-service-row:hover .service-name {
  color: #fff !important;
  letter-spacing: 0.3px; /* Трохи розсунемо букви для кращої читабельності */
}

/* Адаптив для мобільного */
@media (max-width: 600px) {
  .diia-cat-title {
    font-size: 26px;
    margin-bottom: 30px;
  }
  .diia-service-row .service-name {
    font-size: 16px;
  }
}
/* ============================================================
   ФІКС ФУТЕРА (Щоб не налізав на текст - FINAL)
   ============================================================ */

/* 1. Головна обгортка сторінки */
#serviceScreen {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Займає мінімум 100% висоти екрану */
}

/* 2. Основний контент (Hero, Списки і т.д.) */
.main-content {
  flex: 1 0 auto; /* 1=рости, 0=не стискайся, auto=розмір від контенту */
  width: 100%;
  padding-bottom: 60px; /* Відступ, щоб футер не дихав у спину */
}

/* 3. Футер */
.app-footer {
  flex-shrink: 0; /* Не даємо футеру стискатись */
  width: 100%;
  margin-top: auto; /* Притискаємо до низу */
  position: relative;
  z-index: 10;
  background-color: #000;
}
/* ============================================================
   КОНТЕЙНЕР СПИСКУ (ПОВНА ВИСОТА)
   Тепер блок розтягується на всю довжину, а скролиться вся сторінка
   ============================================================ */
.services-scroll-box {
  max-height: none;
  overflow: visible;
  height: auto;
  padding-right: 0;
  margin-bottom: 40px;
  border: none;
}
/* ============================================================
   СТИЛІ ДЛЯ БЛОКУ ЦНАПІВ (В КАРТЦІ ПОСЛУГИ)
   ============================================================ */
.offices-section {
  margin-top: 40px;
  background: #fdfdfd;
  border-radius: 20px;
  padding: 25px;
  border: 1px solid #eee;
}

.offices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.office-card {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border-left: 4px solid #88acf0; /* Блакитний акцент */
}

.office-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #000;
}

.office-info-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #555;
  line-height: 1.4;
}

.office-icon {
  font-size: 16px;
  margin-top: 2px;
}
/* ============================================================
   LANDSCAPE FIX (ГОРИЗОНТАЛЬНИЙ РЕЖИМ ТЕЛЕФОНУ)
   Спрацьовує, коли висота екрану менша за 600px
   ============================================================ */
@media (max-height: 600px) {
  /* 1. Зменшуємо "пухнастість" головного блоку */
  .diia-hero-wrap {
    padding: 20px 20px 30px !important; /* Було 60px/80px, стало 20px/30px */
    margin-bottom: 10px;
  }

  /* 2. Зменшуємо шрифт заголовка */
  .diia-main-title {
    font-size: 24px !important; /* Було 32px+ */
    margin-bottom: 15px !important; /* Підтягуємо елементи знизу */
    margin-top: 0 !important;
  }

  /* 3. Компактні перемикачі (Пошук / AI) */
  .diia-toggles-wrap {
    margin-bottom: 15px !important;
    padding: 3px !important; /* Тонша рамка */
  }
  .diia-toggle-btn {
    padding: 8px 20px !important; /* Менші кнопки */
    font-size: 14px !important;
  }

  /* 4. Робимо поле пошуку тоншим */
  #main-search {
    height: 50px !important; /* Було 70px */
    font-size: 16px !important;
  }

  /* Підганяємо кнопку-стрілку під нову висоту */
  .diia-search-arrow-btn {
    width: 40px !important;
    height: 40px !important;
    top: 5px !important; /* Центруємо по новій висоті */
    right: 5px !important;
  }

  /* 5. Ховаємо підказки знизу, щоб не забивали ефір (опціонально) */
  .diia-hint {
    margin-top: 10px !important;
    font-size: 13px !important;
  }
}
/* ============================================================
   📱 MOBILE PORTRAIT (ВЕРТИКАЛЬНИЙ РЕЖИМ)
   Оптимізація під звичайний телефон
   ============================================================ */
@media (max-width: 600px) {
  /* 1. ХЕДЕР */
  .diia-header {
    height: 56px !important; /* Стандарт мобільного хедеру */
    padding: 0 !important;
  }
  .header_inner {
    padding: 0 15px !important;
  }
  /* Логотип трохи менший */
  .logo-img {
    height: 32px !important;
  }
  .logo-text {
    font-size: 18px !important;
  }

  /* 2. ГОЛОВНИЙ БЛОК (ГЕРОЙ) */
  .diia-hero-wrap {
    width: 96% !important; /* Майже на всю ширину */
    margin: 10px auto 20px !important; /* Менші відступи зовні */
    padding: 25px 15px 30px !important; /* Стискаємо відступи всередині */
    border-radius: 20px !important;
  }

  /* 3. ЗАГОЛОВОК */
  .diia-main-title {
    font-size: 26px !important; /* Акуратний розмір */
    margin-bottom: 20px !important;
    line-height: 1.2 !important;
  }

  /* 4. ПЕРЕМИКАЧІ (ВАЖЛИВО: В ОДИН РЯДОК) */
  .diia-toggles-wrap {
    display: inline-flex !important;
    flex-direction: row !important; /* 🔥 Ставимо в рядок, щоб економити висоту */
    width: auto !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
    padding: 4px !important;
  }

  .diia-toggle-btn {
    width: auto !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    margin-bottom: 0 !important; /* Прибираємо відступ знизу, бо вони в рядок */
  }

  /* 5. ПОЛЕ ПОШУКУ */
  #main-search {
    height: 55px !important; /* Зручна висота для пальця */
    font-size: 16px !important;
    padding-left: 20px !important;
  }
  .diia-search-arrow-btn {
    width: 45px !important;
    height: 45px !important;
    top: 5px !important;
  }

  /* 6. ЧАТ БОТ (ВИСОКИЙ І ЗРУЧНИЙ) */
  .ai-chat-box {
    width: 100% !important;
    margin-top: 0 !important;

    /* 🔥 Висота: 60% екрану. 
       Це залишає місце для хедера і клавіатури, але дає огляд чату */
    height: 60vh !important;
    min-height: 400px !important;
    max-height: 600px !important;
  }

  /* Відступи всередині чату */
  .chat-body {
    padding: 15px !important;
  }

  /* Інпут чату (щоб зручно попадати пальцем) */
  .chat-input-area {
    padding: 10px !important;
    min-height: 60px; /* Фіксуємо низ, щоб було зручно */
  }
  #chat-input {
    height: 40px !important;
    font-size: 16px !important; /* 16px запобігає зуму на iPhone */
  }
  .chat-send-btn {
    width: 40px !important;
    height: 40px !important;
  }

  /* 7. ПІДКАЗКИ ЗНИЗУ */
  .diia-hint {
    margin-top: 15px !important;
    font-size: 13px !important;
    opacity: 0.8;
  }
  /* 8. Опускаємо кнопку "Назад" нижче, щоб вона вилізла з-під хедера */
  .back-link-wrap {
    margin-top: 20px !important; /* Було -10px, робимо +20px */
    margin-bottom: 15px !important;
    padding-left: 5px; /* Мінімальний відступ зліва */
  }

  /* 9. Повертаємо бічні відступи для тексту (бо ми їх стерли глобально) 
     Інакше текст буде прилипати до країв екрану */
  .container-narrow {
    padding: 0 20px !important;
  }
}
/* ============================================================
   📱 MOBILE PORTRAIT (ГІБРИДНИЙ РЕЖИМ)
   Пошук = Картка | AI = Додаток
   ============================================================ */
@media (max-width: 600px) {
  /* 1. БАЗОВИЙ СТИЛЬ (ДЛЯ ПОШУКУ - З ВІДСТУПАМИ) */
  .view-section {
    padding: 0 !important;
  }

  .diia-hero-wrap {
    /* Стиль картки (Повітря є) */
    width: 94% !important;
    margin: 90px auto 20px !important; /* Відступи зверху і збоку */
    border-radius: 20px !important; /* Круглі кути з усіх боків */
    padding: 25px 15px 30px !important;
    transition: all 0.3s ease; /* Плавна анімація зміни форми */
  }

  /* 2. 🔥 СПЕЦІАЛЬНИЙ РЕЖИМ "AI" (БЕЗ ВІДСТУПІВ) */
  .diia-hero-wrap.ai-mode {
    width: 100% !important; /* На всю ширину */
    margin: 0 !important; /* Прилипає до хедера */
    border-radius: 0 0 25px 25px !important; /* Зверху прямі кути */
    border: none !important;
    box-shadow: none !important;
    padding-top: 15px !important;
  }

  /* 3. РЕШТА ЕЛЕМЕНТІВ (ХЕДЕР, ТЕКСТ ТОЩО) */
  .diia-header {
    height: 56px !important;
    padding: 0 !important;
  }
  .header_inner {
    padding: 0 15px !important;
  }
  .logo-img {
    height: 32px !important;
  }
  .logo-text {
    font-size: 18px !important;
  }

  .diia-main-title {
    font-size: 26px !important;
    margin-bottom: 20px !important;
    line-height: 1.2 !important;
    margin-top: 10px !important;
  }

  /* Кнопки в рядок */
  .diia-toggles-wrap {
    display: inline-flex !important;
    flex-direction: row !important;
    width: auto !important;
    margin-bottom: 20px !important;
    padding: 4px !important;
  }

  .diia-toggle-btn {
    width: auto !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    margin-bottom: 0 !important;
  }

  /* Чат */
  .ai-chat-box {
    width: 100% !important;
    height: 65vh !important;
    min-height: 400px !important;
    /* У режимі AI ми хочемо, щоб чат теж виглядав трохи інакше, якщо треба */
  }

  /* Інше */
  .chat-body {
    padding: 15px !important;
  }
  .chat-input-area {
    padding: 10px !important;
    min-height: 60px;
  }
  #chat-input {
    height: 40px !important;
    font-size: 16px !important;
  }
  .chat-send-btn {
    width: 40px !important;
    height: 40px !important;
  }
  .diia-hint {
    margin-top: 15px !important;
    font-size: 13px !important;
    opacity: 0.8;
  }
}
/* ============================================================
   DESKTOP LAYOUT FIX (Збираємо контент по центру)
   ============================================================ */

/* 1. Обмежуємо ширину списків послуг та карток */
.container-narrow {
  width: 100%;
  max-width: 1200px; /* 🔥 Оптимальна ширина для читання */
  margin: 0 auto; /* Центруємо блок */
  padding: 0 20px; /* Відступи збоку для мобільних */
  box-sizing: border-box;
}

/* На дуже великих екранах даємо трохи більше місця */
@media (min-width: 1400px) {
  .container-narrow {
    max-width: 1300px;
  }
}
/* ============================================================
   FIX: ПОШУК В ГОРИЗОНТАЛЬНОМУ РЕЖИМІ (LANDSCAPE)
   ============================================================ */
@media (max-height: 600px) {
  /* 1. Робимо список результатів коротким і з прокруткою */
  .search-dropdown {
    max-height: 180px !important; /* Жорстко обмежуємо висоту */
    overflow-y: auto !important;
    top: 60px !important; /* Підтягуємо ближче до інпуту */
  }

  /* 2. Трохи зменшуємо відступи в кожному рядку результату */
  .search-result-item {
    padding: 10px 15px !important; /* Менше "повітря" */
    font-size: 15px !important;
  }
}
/* ============================================================
   ВИПРАВЛЕННЯ (LOGO, HOME BTN, EMOJI - FINAL B&W)
   Заміни цим кодом відповідну частину в розділі Contrast Mode
   ============================================================ */
.contrast-btn {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  padding: 5px;
}
/* ============================================================
   6. КОНТРАСТНИЙ РЕЖИМ (ВСЕ РАЗОМ)
   ============================================================ */
body.contrast-mode .diia-header,
body.contrast-mode .mega-menu,
body.contrast-mode .diia-card,
body.contrast-mode .diia-select,
body.contrast-mode .diia-input {
  background: #000;
  color: #fff;
  border-color: #fff;
}

body.contrast-mode .diia-select,
body.contrast-mode .diia-input {
  background: #1a1a1a;
}

body.contrast-mode .menu_link,
body.contrast-mode .contrast-btn,
body.contrast-mode .header_logo,
body.contrast-mode .menu-btn-mob span {
  color: #fff;
  background: #fff;
}

body.contrast-mode .contrast-btn,
body.contrast-mode .menu_link {
  background: none;
}

/* Картинки в негатив */
body.contrast-mode img,
body.contrast-mode svg {
  filter: grayscale(100%) invert(1) brightness(1.5);
}

/* Mega Menu в контрасті */
body.contrast-mode .mega-col h3 {
  color: #ffffff;
  border-bottom-color: #ffffff;
  filter: grayscale(100%) brightness(1.5);
}
body.contrast-mode .mega-col a {
  color: #ffffff;
  filter: grayscale(100%) brightness(1.5);
}
body.contrast-mode .mega-col a:hover {
  color: #ffff00;
  filter: grayscale(0%) brightness(1.2);
}
body.contrast-mode .mega-col .sub-text {
  color: #cccccc !important;
}

/* Мобільне меню в контрасті */
body.contrast-mode .mob-overlay {
  background: #000;
}
body.contrast-mode .mob-submenu {
  background: #111;
  box-shadow: none;
}
body.contrast-mode .mob-cat-list {
  background: #000;
}
body.contrast-mode .mob-cat-list li a {
  color: #bbb;
  border-color: #222;
}

/* Кнопки в контрасті */
body.contrast-mode .mob-link:not(.active),
body.contrast-mode .mob-group-btn:not(.active) {
  background: #000 !important;
  color: #fff !important;
  border-color: #333;
  box-shadow: none !important;
  transform: none !important;
}
body.contrast-mode .mob-link.active,
body.contrast-mode .mob-group-btn.active {
  background: #333 !important;
  color: #fff !important;
  border-bottom: 1px solid #fff;
  box-shadow: none !important;
}
/* КОНТРАСТНИЙ РЕЖИМ (Підганяємо під нові стилі) */
body.contrast-mode .diia-hero-wrap {
  background: #000;
  border-bottom: 1px solid #fff;
}
body.contrast-mode .diia-main-title {
  color: #fff;
}
body.contrast-mode .diia-toggles-wrap {
  background: #333;
}
body.contrast-mode .diia-toggle-btn {
  color: #fff;
}
body.contrast-mode .diia-toggle-btn.active {
  background: #fff;
  color: #000;
}
body.contrast-mode #main-search {
  background: #222;
  color: #fff;
  border: 1px solid #fff;
}
body.contrast-mode .diia-search-arrow-btn {
  background: #fff;
  color: #000;
}
body.contrast-mode .diia-hint {
  color: #ccc;
}
body.contrast-mode .diia-hint a {
  color: #fff;
}

/* 1. КНОПКИ (Додали сюди .header-home-btn) */
body.contrast-mode .contrast-btn,
body.contrast-mode .menu-btn-mob span,
body.contrast-mode .diia-toggle-btn,
body.contrast-mode .diia-search-arrow-btn,
body.contrast-mode #main-search,
body.contrast-mode .header-home-btn {
  /* 🔥 Кнопка "На головну" тепер тут */
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #fff !important; /* Біла рамка */
  box-shadow: none !important;
  background-image: none !important; /* Вбиваємо старі градієнти */
}

/* 2. ЛОГОТИП (Окремо, щоб не було рамки навколо нього) */
body.contrast-mode .header_logo {
  background: transparent !important;
  border: none !important; /* ❌ Прибрали рамку навколо лого */
  color: #fff !important;
}
body.contrast-mode .header_logo .logo-text {
  color: #fff !important;
}

/* 3. ЕМОДЗІ ТА ІКОНКИ (Логіка: Чорне або Біле) */

/* СТАН "СПІКІЙ": Чорний фон -> Біла іконка (яскравість на макс) */
body.contrast-mode .diia-toggle-btn .icon,
body.contrast-mode .header-home-btn .icon,
body.contrast-mode .mega-icon {
  /* 🔥 ДОДАЛИ СЮДИ */
  display: inline-block;
  margin-right: 6px;
  filter: grayscale(100%) brightness(1000%) !important;
}

/* Активний стан кнопок (Жовтий фон) */
body.contrast-mode .diia-toggle-btn.active,
body.contrast-mode .header-home-btn:hover {
  background: #ffff00 !important;
  color: #000 !important;
  border-color: #ffff00 !important;
}

/* СТАН "АКТИВНИЙ": Жовтий фон -> Чорна іконка (яскравість в нуль) */
body.contrast-mode .diia-toggle-btn.active .icon,
body.contrast-mode .header-home-btn:hover .icon {
  filter: grayscale(100%) brightness(0%) !important;
}
/* ============================================================
   ФІКС AI БЛОКУ (РОБОТ ТА ТЕКСТ)
   ============================================================ */

/* 1. Робимо текст білим */
body.contrast-mode .ai-loading,
body.contrast-mode .ai-content {
  color: #fff !important;
}

/* 2. Робимо робота 🤖 білим (чорно-білий фільтр + яскравість) */
body.contrast-mode .ai-loading {
  /* Grayscale прибирає колір, Brightness робить його білим */
  filter: grayscale(100%) brightness(1000%) !important;
}
/* ============================================================
   ФІКС МОБІЛЬНОГО МЕНЮ (ICONS WRAPPED)
   ============================================================ */

/* 1. КНОПКА ЗАКРИТТЯ (ХРЕСТИК) */
body.contrast-mode .mob-close {
  background: #000 !important; /* Чорний фон */
  color: #fff !important; /* Білий хрестик */
  border: 1px solid #fff !important; /* Біла рамка */
  box-shadow: none !important; /* Без тіні */
}
/* 2. БАЗОВИЙ СТИЛЬ КНОПОК (ЧОРНИЙ ФОН) */
body.contrast-mode .mob-link,
body.contrast-mode .mob-group-btn,
body.contrast-mode .mob-cat-list li a {
  background: #000 !important;
  color: #fff !important;
  border-bottom: 1px solid #fff !important;

  filter: none !important; /* ❌ НЕ ЧІПАЄМО ФІЛЬТР КНОПКИ */
}

/* 3. СТИЛЬ ІКОНКИ (НА ЧОРНОМУ ФОНІ -> БІЛА) */
body.contrast-mode .mob-icon {
  display: inline-block;
  margin-right: 8px;
  /* Робимо білою */
  filter: grayscale(100%) brightness(200%);
}

/* 4. АКТИВНИЙ СТАН (ЖОВТИЙ ФОН) */
body.contrast-mode .mob-link.active,
body.contrast-mode .mob-group-btn.active,
body.contrast-mode .mob-cat-list li a:hover {
  background: #ffff00 !important; /* Яскраво-жовтий */
  color: #000 !important; /* Чорний текст */
  border-color: #ffff00 !important;
}

/* . ІКОНКА НА АКТИВНОМУ (НА ЖОВТОМУ ФОНІ -> ЧОРНА) */
body.contrast-mode .mob-link.active .mob-icon,
body.contrast-mode .mob-group-btn.active .mob-icon,
body.contrast-mode .mob-cat-list li a:hover .mob-icon {
  /* Робимо вугільно-чорною, як текст */
  filter: grayscale(100%) brightness(0%) !important;
}
/* Робимо іконку та стрілку чорними на білому фоні в контрасті */
body.contrast-mode .view-section .cat-icon,
body.contrast-mode .view-section .mega-icon,
body.contrast-mode .view-section .service-arrow,
body.contrast-mode .js-go-back {
  filter: grayscale(100%) brightness(0%) !important;
  color: #000 !important;
  opacity: 1 !important;
}
/* --- ФІКС ПІДСВІТКИ ПОШУКУ --- */

/* 1. Звичайний режим (блакитний) */
.search-highlight {
  color: #88acf0;
  font-weight: bold;
}
/* Підсвітка в контрастному режимі — біла, жирна і підкреслена */
body.contrast-mode .search-highlight {
  color: #ffffff !important;
  font-weight: 900 !important; /* Максимальна жирність */
  text-decoration: underline !important; /* Підкреслення, щоб точно виділялося */
  background-color: #333; /* Темно-сірий фон саме під буквами для чіткості */
}
/* Інверсія в контрастному режимі */
body.contrast-mode .diia-service-row:hover {
  background-color: #000 !important;
  color: #fff !important;
}

body.contrast-mode .diia-service-row:hover .service-name,
body.contrast-mode .diia-service-row:hover .service-arrow {
  color: #fff !important;
  filter: brightness(
    1000%
  ) !important; /* Гарантуємо чистий білий для іконок/тексту */
}
/* --- СТИЛІ АКОРДЕОНІВ --- */
.diia-detail-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
  text-align: center;
}
.service-id-label {
  text-align: center;
  color: #888;
  margin-bottom: 40px;
  font-size: 14px;
}

.accordion-group {
  border-top: 2px solid #000;
  margin-bottom: 40px;
}

.accordion-item {
  border-bottom: 2px solid #333;
  background: #fff;
}

.accordion-header {
  width: 100%;
  background: none !important;
  border: none;
  padding: 24px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: #000;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: none !important;
  transform: none !important;
}

/* Графітовий Hover */
.accordion-header:hover {
  background-color: #1a1c1e !important;
  color: #fff !important;
  border-radius: 8px;
  padding-left: 20px;
}

.accordion-header:hover .icon-plus {
  color: #fff;
}

.icon-plus {
  font-size: 24px;
  color: #000;
  font-weight: 400;
}

/* Плавність для контенту */
.accordion-content {
  display: none;
  overflow: hidden;
  padding: 10px 30px 40px 30px;
  background: #fdfdfd;
  border-radius: 0 0 12px 12px;
  margin-top: 10px;
  transition: max-height 0.3s ease;
}

.accordion-content.open {
  display: block;
}
.active-header {
  background-color: #f8f9fa !important;
  border-left: 4px solid #88acf0; /* Легкий акцент збоку */
}

/* Логіка <p> = Новий рядок + Табуляція */
.accordion-content p {
  margin-bottom: 12px;
  padding-left: 25px; /* Табуляція */
  position: relative;
  line-height: 1.6;
}

.accordion-content p::before {
  content: "•";
  position: absolute;
  left: 5px;
  color: #88acf0;
}

/* Кнопка завантаження */
.diia-download-btn {
  display: block;
  width: 100%;
  padding: 20px;
  background: #fff;
  border: 2px dashed #88acf0;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  color: #004aad;
  font-weight: 700;
  transition: 0.3s;
}
.diia-download-btn:hover {
  background: #f0f5ff;
}

/* Реквізити */
.bank-details {
  background: #f1f1f1;
  padding: 15px;
  border-radius: 8px;
  margin-top: 15px;
  font-family: monospace;
}

/* Видаляємо ефект блиску з усіх кнопок */
button::before,
.diia-back-link::before,
.accordion-header::before {
  display: none !important;
  content: none !important;
}

.accordion-header {
  font-size: 24px !important;
  padding: 25px 15px !important;
  position: relative;
  overflow: hidden;
}

.accordion-content p {
  font-size: 1.15rem !important; /* Читабельний текст */
  line-height: 1.7 !important;
  color: #333 !important;
}

.diia-detail-title {
  font-size: 2.2rem !important;
  margin-bottom: 5px !important;
}

/* Збільшуємо шрифт заголовків акордеона */
.accordion-header span {
  font-size: 22px !important;
  font-weight: 700 !important;
}

/* Збільшуємо основний текст всередині акордеонів */
.accordion-content p,
.accordion-content div {
  font-size: 19px !important; /* Було дрібно, тепер буде як треба */
  line-height: 1.6 !important;
  color: #333 !important;
}

/* Стиль для блоку з графіком */
.office-schedule-box {
  margin-top: 15px;
  padding: 10px;
  background: #f0f4f8;
  border-radius: 8px;
  font-size: 16px !important;
}

.schedule-text {
  margin-top: 5px;
  line-height: 1.4;
}

/* Збільшуємо іконку плюс/мінус */
.icon-plus {
  font-size: 28px !important;
}
/* Прибираємо сині крапки тільки в першому блоці */
.offices-list-clean p::before,
.offices-list-clean .office-row::before {
  content: none !important;
  display: none !important;
}

/* Прибираємо зайві відступи, щоб текст стояв рівно під іконками */
.offices-list-clean .office-row {
  padding-left: 0 !important;
  margin-bottom: 8px;
  font-size: 19px !important; /* Тримаємо шрифт великим */
}

/* Трохи підправимо вигляд графіку, щоб він був компактнішим */
.office-schedule-box {
  padding: 15px;
  background: #d4eafc;
  border: 1px solid #e1e8f0;
  margin-top: 15px;
  border-radius: 12px;
}
/* Контрастний режим для крапок у списках */
body.contrast-mode .accordion-content p::before {
  color: #000 !important; /* Чорна крапка на світлому фоні */
}

/* Чорно-білі іконки в блоці офісів для контрастного режиму */
body.contrast-mode .office-card-mini .office-row span,
body.contrast-mode .office-card-mini .office-row {
  filter: grayscale(100%) contrast(1.2); /* Робимо Ч/Б та додаємо чіткості */
}

/* Окремо для емодзі-іконок, якщо вони загорнуті або просто в тексті */
body.contrast-mode .office-card-mini {
  color: #000 !important;
}

body.contrast-mode .active-header {
  background-color: #fff !important;
  border-left: 4px solid #000000; /* Легкий акцент збоку */
}
/* --- СТИЛЬ ГРАФІКА (КОНТРАСТНИЙ РЕЖИМ) --- */
body.contrast-mode .office-schedule-box {
  background: #fff !important; /* Чисто білий фон */
  color: #000 !important;
  border: 2px solid #000 !important; /* Жирна чорна рамка */
}

body.contrast-mode .office-schedule-box strong,
body.contrast-mode .office-schedule-box .schedule-text {
  color: #000 !important;
}

/* Іконка годинника стає чорною */
body.contrast-mode .office-schedule-box strong::before {
  filter: grayscale(100%) brightness(0);
}
/* ФІНАЛЬНИЙ ФІКС: Контрастний режим без залипання */

/* 1. Стан за замовчуванням: Білий фон, Чорний текст */
body.contrast-mode .accordion-header {
  background-color: #fff !important;
  color: #000 !important;
  transition: none; /* Прибираємо анімації для миттєвої реакції */
}

body.contrast-mode .accordion-header .icon-plus {
  color: #000 !important;
}

/* 2. Стан при наведенні: Тільки поки мишка над блоком */
body.contrast-mode .accordion-header:hover {
  background-color: #000 !important;
  color: #fff !important;
}

body.contrast-mode .accordion-header:hover .icon-plus {
  color: #fff !important;
}

/* 3. ОБНУЛЯЄМО ЗАЛИПАННЯ: Скидаємо стилі фокусу та активності 
   щоб вони не тримали чорний колір після кліку */
body.contrast-mode .accordion-header:focus,
body.contrast-mode .accordion-header:active {
  background-color: #fff !important;
  color: #000 !important;
  outline: none;
}

/* 4. Повертаємо чорний колір, якщо мишка все ще над натиснутим блоком */
body.contrast-mode .accordion-header:active:hover,
body.contrast-mode .accordion-header:focus:hover {
  background-color: #000 !important;
  color: #fff !important;
}
body.contrast-mode .contrast-emoji {
  filter: grayscale(100%) brightness(1.2) !important; /* Робить емодзі чорним */
  display: inline-block; /* Потрібно для коректної роботи фільтра */
  text-decoration: none !important;
}
/* =========================================
   🤖 СТИЛІ AI ЧАТУ
   ========================================= */

/* Контейнер чату (замінює пошук) */
.ai-chat-box {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 600px;
  margin: 20px auto 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 400px; /* Фіксована висота */
  animation: fadeIn 0.4s ease;
  border: 1px solid #e0e0e0;
}

/* Верхня смужка статусу */
.chat-header-status {
  background: #f8f9fa;
  padding: 8px 15px;
  font-size: 12px;
  color: #666;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  background: #28a745; /* Зелений вогник */
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
}

/* Тіло чату (де повідомлення) */
.chat-body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Повідомлення */
.chat-msg {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: 18px;
  line-height: 1.5;
  font-size: 15px;
  position: relative;
  word-wrap: break-word;
}

/* Повідомлення БОТА */
.ai-msg {
  background: #f0f2f5;
  color: #000;
  align-self: flex-start; /* Зліва */
  border-bottom-left-radius: 4px;
}

/* Повідомлення ЛЮДИНИ */
.user-msg {
  background: #000; /* Чорний стиль Дії */
  color: #fff;
  align-self: flex-end; /* Справа */
  border-bottom-right-radius: 4px;
}

/* Нижня панель вводу */
.chat-input-area {
  padding: 10px;
  background: #fff;
  border-top: 1px solid #eee;
  display: flex;
  gap: 10px;
  align-items: center;
}

#chat-input {
  flex: 1;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 30px;
  font-size: 15px;
  outline: none;
  transition: 0.2s;
}

#chat-input:focus {
  border-color: #000;
}

/* Кнопка відправки */
.chat-send-btn {
  background: #000;
  color: #fff;
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.chat-send-btn:hover {
  transform: scale(1.1);
  background: #333;
}

/* Анімація появи */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scrollbar styling */
.chat-body::-webkit-scrollbar {
  width: 6px;
}
.chat-body::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}
/* Кнопка всередині чату */
.chat-action-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 20px;
  background-color: #000; /* Чорний колір */
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%; /* На всю ширину повідомлення */
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.chat-action-btn:hover {
  background-color: #333;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* Посилання в чаті */
.chat-link {
  color: #007bff;
  text-decoration: underline;
  word-break: break-all;
}
/* =========================================
   🖥️ АДАПТАЦІЯ ДЛЯ НОУТБУКІВ (HD / 720p)
   Спрацьовує, якщо висота екрану менше 800px
   ========================================= */
@media (max-height: 800px) {
  /* 1. Стискаємо "пухнасту" обгортку героя */
  .diia-hero-wrap {
    padding-top: 15px !important; /* Було 80px */
    padding-bottom: 15px !important; /* Було 100px */
    margin-bottom: 15px !important;
  }

  /* 2. Зменшуємо заголовок */
  .diia-main-title {
    font-size: 32px !important; /* Було 48px */
    margin-bottom: 15px !important;
  }

  /* 3. Підтягуємо перемикачі та пошук */
  .diia-toggles-wrap {
    margin-bottom: 15px !important;
  }
  .diia-search-box {
    margin-bottom: 15px !important;
  }

  /* 4. Чат робимо компактнішим */
  .ai-chat-box {
    height: 50vh !important; /* Займає половину екрану */
    max-height: 400px !important;
  }

  /* Менше повітря всередині чату */
  .chat-body {
    padding: 15px !important;
  }
}
/* ============================================================
   📱 LANDSCAPE FIX (ГОРИЗОНТАЛЬНИЙ РЕЖИМ ТЕЛЕФОНУ)
   Спрацьовує, коли висота екрану менша за 600px
   ============================================================ */
@media (max-height: 600px) {
  /* 1. Максимально "худий" головний блок */
  .diia-hero-wrap {
    padding: 10px 15px 15px !important; /* Мінімальні відступи зверху/знизу */
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    border-radius: 15px !important; /* Менш круглі кути, щоб не з'їдали місце */
  }

  /* 2. Заголовок робимо маленьким і компактним */
  .diia-main-title {
    font-size: 20px !important; /* Було 24-32px */
    margin-bottom: 8px !important;
    line-height: 1 !important;
  }

  /* 3. Перемикачі (Пошук/AI) підтягуємо */
  .diia-toggles-wrap {
    margin-bottom: 8px !important;
    padding: 2px !important;
    transform: scale(0.9); /* Трохи зменшуємо їх візуально */
  }

  .diia-toggle-btn {
    padding: 6px 15px !important;
    font-size: 13px !important;
  }

  /* 4. Чат займає максимум вільного місця */
  .ai-chat-box {
    margin-top: 0 !important;
    height: 65vh !important; /* 65% від висоти екрану - це багато місця для переписки */
    min-height: 220px !important;
    border-radius: 12px !important;
  }

  /* Менші відступи всередині чату */
  .chat-body {
    padding: 10px !important;
    gap: 8px !important;
  }

  .chat-header-status {
    padding: 5px 10px !important;
    font-size: 11px !important;
  }

  .chat-input-area {
    padding: 6px 10px !important;
  }

  #chat-input {
    padding: 8px 12px !important;
    height: 36px !important;
  }

  .chat-send-btn {
    width: 36px !important;
    height: 36px !important;
  }

  /* 5. 🔥 ХОВАЄМО ПІДКАЗКУ ТА ЗАЙВІ ЕЛЕМЕНТИ */
  .diia-hint {
    display: none !important; /* Прибирає напис "Наприклад..." */
  }

  /* Якщо є інші дрібні елементи, які заважають - теж можна сховати */
}
/* Ефект помилки для input */
.input-error {
  border: 1px solid red !important;
  background-color: #fff0f0 !important;
  transition: all 0.3s ease;
}
/* ============================================================
   СТИЛІ ПОМИЛКИ ДЛЯ КОНТРАСТНОГО РЕЖИМУ (High Contrast)
   ============================================================ */

/* Коли у body є клас .contrast-mode, інпут з помилкою виглядає так: */
body.contrast-mode .input-error {
  /* 1. Фон робимо чорним (щоб текст читався) */
  background-color: #000000 !important;

  /* 2. Рамка стає товстою і білою, 
        щоб її було добре видно на чорному */
  border: 4px solid #fff !important;

  /* 3. Текст залишається жовтим (стандарт контрастного режиму) */
  color: #ffff00 !important;
}

/* Анімація тремтіння (якщо ти її ще не додав) */
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}
/* ============================================================
   СТИЛІ ДЛЯ ПОВІДОМЛЕННЯ ПРО ПОМИЛКУ В ЧАТІ
   ============================================================ */

/* 1. Звичайний режим (червоний текст) */
.chat-error {
  color: #ff0000 !important;
  font-weight: bold;
}

/* 2. Контрастний режим (Жовтий текст на чорному тлі) */
body.contrast-mode .chat-error {
  color: #ffff00 !important; /* Жовтий текст */
  border-color: #ffffff !important; /* Біла рамка для уваги */
  background-color: #000 !important;
}
/* ============================================================
   🖥️ FIX ДЛЯ ШИРИНИ ЧАТУ (РОЗТИСКАЄМО КОНТЕНТ)
   ============================================================ */

@media (min-width: 992px) {
  /* Коли на обгортці є клас .ai-mode (ми його додаємо JS-ом при кліку на AI) */
  .diia-hero-wrap.ai-mode .diia-hero-content {
    max-width: 80% !important;
    width: 100% !important;
    padding: 0 40px; /* Трохи повітря з боків, щоб не липло до країв */
    height: auto !important;
  }

  /* Сам блок чату теж на всю ширину */
  .ai-chat-box {
    max-width: 100% !important;
  }
}
/* ============================================================
   🎨 FIX: ВИРІВНЮВАННЯ ТЕКСТУ ТА КНОПОК
   ============================================================ */

/* 1. Текст у всіх повідомленнях має бути зліва (як у месенджерах) */
.chat-msg {
  text-align: left !important; /* Перебиваємо центрування батьківського блоку */
}

/* 2. Фікс для кнопки (щоб не розтягувалась на весь екран) */
.chat-action-btn {
  width: auto !important; /* Займає ширину лише під текст */
  display: inline-block !important; /* Стає компактною */
  max-width: 320px !important; /* Максимальна ширина, щоб не було гігантської кнопки */

  /* Трохи відступів, щоб виглядало гарно */
  margin-top: 8px;
  padding: 10px 20px !important;
}