/* === Основні стилі === */
body {
   background-color: #000;
   color: #fff;
   font-family: 'Inter', sans-serif;
   margin: 0;
   padding: 0;
   text-align: center;
}
/* Контейнер */
.container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: auto;
   padding: 20px;
}
/* Лого */
.logo {
   max-width: 300px;
}
/* Заголовки */
h1 {
   font-size: 2.5rem;
   margin-top: 120px; /* Виправлений відступ */
   scroll-margin-top: 140px; /* Фікс скролу */
}
p {
   font-size: 1.2rem;
   opacity: 0.8;
}
/* === Contact Form 7 (CF7) === */
/* Основний контейнер форми */
.contact-form-wrapper {
   max-width: 600px;
   margin: 0 auto;
   padding: 20px;
   background: #f7f9fb;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Поля форми */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.contact-form select {
   width: 100%;
   padding: 12px;
   border: 1px solid #ccc;
   border-radius: 5px;
   font-size: 16px;
   appearance: none;
   box-sizing: border-box;
}
/* Текстові поля */
.contact-form textarea {
   min-height: 120px;
   resize: vertical;
}
/* Кнопка */
.btn-primary {
   background: #0e4174;
   color: #fff;
   border: none;
   padding: 10px 15px;
   font-size: 16px;
   cursor: pointer;
   text-align: center;
   display: inline-block;
   width: 100%;
   border-radius: 5px;
   transition: background 0.3s ease-in-out;
}
.btn-primary:hover {
   background: #ef9600;
}
/* === Поля форми === */
/* Відступ між полями */
.wpcf7-form p {
   margin-bottom: 15px;
}
/* Виправлення стилю для select */
.contact-form select {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   background-color: #fff;
   border: 1px solid #ccc;
   padding: 12px;
   border-radius: 5px;
   font-size: 16px;
   width: 100%;
   cursor: pointer;
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="gray"><path d="M7 10l5 5 5-5z"/></svg>');
   background-repeat: no-repeat;
   background-position: right 10px center;
   background-size: 16px;
}
/* Видаляє стандартну стрілку у Safari */
.contact-form select::-ms-expand {
   display: none;
}
/* Плейсхолдер для першого варіанта */
.contact-form select option:first-child {
   color: gray;
}
/* Видаляє плейсхолдер після вибору */
.contact-form select:valid option:first-child {
   display: none;
}
/* === Виправлення адаптивності (Мобільна версія) === */
@media (max-width: 768px) {
   .contact-form input,
   .contact-form select,
   .contact-form textarea {
       width: 100%;
       padding: 12px;
       font-size: 16px;
       box-sizing: border-box;
   }
   /* Виправлений відступ між полями */
   .contact-form select,
   .contact-form textarea {
       margin-top: 10px !important;
       margin-bottom: 10px !important;
   }
   /* Додаємо більше місця до кнопки */
   .contact-form input[type="submit"] {
       margin-top: 15px;
   }
}
/* === Виправлення відображення додаткових полів === */
.conditional-field {
   opacity: 0;
   visibility: hidden;
   height: 0;
   overflow: hidden;
   transition: opacity 0.3s ease-in-out, height 0.3s ease-in-out;
}
.show-conditional {
   opacity: 1;
   visibility: visible;
   height: auto;
}
/* Фікс для textarea (відступ) */
.wpcf7-form .wpcf7-textarea {
   display: block;
   margin-top: 15px;
}
/* === Виправлений стиль для статусу форми === */
.wpcf7-response-output {
   opacity: 1;
   visibility: visible;
   transition: opacity 0.3s ease-in-out;
   margin-top: 10px; /* 🔥 Підтягує статус ближче до кнопки */
   padding: 10px;
   background: #f8f8f8;
   border: 1px solid #ddd;
   border-radius: 5px;
   text-align: center;
   color: #333;
   font-weight: 600;
   scroll-margin-top: 120px; /* 🔥 Коригує скрол */
}
/* ✅ Стилізація для успішного повідомлення */
.wpcf7-response-output.wpcf7-mail-sent-ok {
   background: #d4edda; /* Світло-зелений фон */
   color: #155724; /* Темно-зелений текст */
   border-color: #c3e6cb;
}
/* ✅ Стилізація для помилок валідації */
.wpcf7-response-output.wpcf7-validation-errors {
   background: #f8d7da; /* Світло-червоний фон */
   color: #721c24; /* Темно-червоний текст */
   border-color: #f5c6cb;
}
/* ✅ Стилізація для помилки надсилання */
.wpcf7-response-output.wpcf7-mail-sent-ng {
   background: #f8d7da;
   color: #721c24;
   border-color: #f5c6cb;
}
/* ✅ Стилізація для повідомлення про спам */
.wpcf7-response-output.wpcf7-spam-blocked {
   background: #fff3cd; /* Світло-жовтий фон */
   color: #856404; /* Темно-жовтий текст */
   border-color: #ffeeba;
}
/* ✅ Прибирає статус, якщо він порожній */
.wpcf7-response-output:empty {
   display: none !important;
}