/* themes/mytheme/static/css/style.css */

/* Основний бірюзовий колір */
:root {
    --primary-turquoise: #088484;
    --darker-turquoise: #077272; /* Трохи темніший для ховер ефектів */
    --light-turquoise: #e0fafa; /* Дуже світлий для фону при ховері */
    --certificate-item-base-width: 300px; /* Базова ширина одного елемента сертифіката (можеш змінити) */
    --certificate-item-gap: 30px; /* Відступ між картками сертифікатів */
    --arrow-button-width: 40px; /* Ширина кнопки стрілки */
    --arrow-space-around: -50px; /* Відступ між краєм 3-х сертифікатів та стрілкою */
    --certificate-image-height: 200px; /* Фіксована висота для зображень сертифікатів (підлаштувати) */

    /* ЯВНО ЗАДАЄМО МАКСИМАЛЬНУ ШИРИНУ ВНУТРІШНЬОГО КОНТЕЙНЕРА ДЛЯ 3 ЕЛЕМЕНТІВ + ВІДСТУПІВ */
    --certificates-inner-container-max-width: calc(3 * var(--certificate-item-base-width) + 2 * var(--certificate-item-gap));
    /* Ти можеш змінити базову ширину 300px на іншу, якщо потрібно */
    /* --- Змінні для секції КОНТАКТІВ --- */
    --card-background-color: #fff;
    --card-border-radius: 8px; /* Радіус заокруглення кутів карток та карти */
    --card-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тінь для карток */
    --contact-gap-between-cards: 30px; /* Відступ між картками контактів та форми */
    --spacing-between-blocks: 40px; /* Відступ між основними блоками в секції контактів (заголовок-колонки, колонки-карта, карта-соцмережі) */

    --contact-card-padding: 30px; /* Внутрішній відступ в картках */
    --social-icon-button-size: 40px; /* Розмір круглої кнопки соцмереж */

    /* Змінні для розрахунку ширини - ТЕПЕР БЕЗ ГЛОБАЛЬНИХ ЗМІННИХ КОНТЕЙНЕРА */
    /* Розрахунок основи для ширини ОДНІЄЇ картки у flexbox від ширини батьківського flex-контейнера */
    --contact-card-flex-basis: calc(50% - var(--contact-gap-between-cards) / 2);
}


/* Базові стилі для body та контейнера */
body {
    margin: 0;
    /* Змінюємо шрифт на Ubuntu */
    font-family: 'Ubuntu', sans-serif;
    line-height: 1.6;
    color: #333; /* Базовий колір тексту */
    background-color: #f8f8f8; /* Дуже світлий фон для сторінки */
}

.container {
    max-width: 1200px; /* Обмежуємо максимальну ширину контенту */
    margin: 0 auto; /* Центруємо контейнер по горизонталі */
    padding: 0 15px; /* Додаємо відступи по боках на маленьких екранах */
}

/* Стилі для Header */
.site-header {
    background-color: #fff; /* Білий фон шапки */
    border-bottom: 1px solid #eee; /* Тонка рамка внизу */
    padding: 10px 0; /* Відступи зверху та знизу */
}

.site-header .container {
    display: flex; /* Використовуємо Flexbox */
    justify-content: space-between; /* Розподіляємо елементи по ширині */
    align-items: center; /* Вирівнюємо по вертикалі */
}

.site-logo img {
    height: 40px; /* Розмір логотипу */
    vertical-align: middle;
}

.site-navigation ul {
    display: flex; /* Пункти меню в ряд */
    list-style: none; /* Прибираємо маркери */
    margin: 0;
    padding: 0;
}

.site-navigation li {
    margin-left: 30px; /* Відступ між пунктами */
}

.site-navigation a {
    text-decoration: none; /* Без підкреслення */
    color: #555; /* Колір посилань */
    font-weight: 600; /* Товщина шрифту */
    transition: color 0.3s ease;
}

.site-navigation a:hover {
    color: var(--primary-turquoise); /* Бірюзовий при наведенні */
}

/* Стилі для всіх елементів з класом .button (тепер всі схожі на Contact Me) */
.button { /* Застосовується як до <button>, так і до <a> з класом button */
    display: inline-block;
    /* Загальні вертикальні відступи та горизонтальні для окремих кнопок */
    padding: 12px 25px;
    /* margin: 0 10px; <--- ЦЕЙ РЯДОК ВИДАЛЕНО. Горизонтальний margin задаємо окремо де потрібно. */
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;

    background-color: var(--primary-turquoise);
    color: #fff;
    border: 1px solid var(--primary-turquoise);

    font-family: inherit;
    font-size: inherit;
}

/* Стиль при наведенні для всіх кнопок з класом .button */
.button:hover {
     background-color: transparent;
     color: var(--primary-turquoise);
     border-color: var(--primary-turquoise);
}

/* Перевизначаємо padding та font-weight тільки для кнопки Contact Me в Header */
a.button.contact-button {
    padding: 8px 15px;
    font-weight: normal;
    margin: 0; /* Прибираємо горизонтальний margin, який був у .button */
}


/* Стилі для Hero Section */
.hero-section {
    padding: 80px 0;
    text-align: center;
    background-color: #fcfcfc;
}

.hero-section .container {
    /* Можливо, додаткові стилі для контейнера в цій секції */
}


.hero-section h1 {
    font-size: 2.8em;
    margin-bottom: 10px;
    color: #333;
}

.hero-section h1 span {
    color: var(--primary-turquoise);
}


.hero-section h2 {
    font-size: 1.6em;
    color: #555;
    margin-top: 0;
    margin-bottom: 5px;
    font-weight: normal;
}

.hero-section p {
    max-width: 800px;
    margin: 20px auto;
    font-size: 1.1em;
    line-height: 1.6;
    color: #666;
}

.hero-buttons {
    margin-top: 30px;
    /* Додаємо відступ між кнопками всередині цього контейнера */
    text-align: center; /* На всяк випадок, якщо кнопки inline-block */
}

/* Задаємо горизонтальний відступ для кнопок всередині Hero Buttons */
.hero-buttons .button {
    margin: 0 10px;
}


/* Стилі для секції Services */
.services-section {
    padding: 60px 0;
    background-color: #fff;
    text-align: center;
}

.services-section h2 {
    font-size: 2em;
    margin-bottom: 40px;
    color: #333;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;

    grid-auto-rows: 1fr;
    align-items: stretch;
    justify-items: stretch;
}

.service-card {
    background-color: #fcfcfc;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    width: auto;
    max-width: none;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.service-card i {
    font-size: 3em;
    color: var(--primary-turquoise);
    margin-bottom: 15px;
    flex-shrink: 0;
}

.service-card h3 {
    font-size: 1.3em;
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
    flex-shrink: 0;
}

.service-card p {
    font-size: 1em;
    color: #666;
    margin-bottom: 20px;
    margin-top: 0;
    flex-grow: 1;
}

a.button.card-button { /* Цей селектор для кнопки в картці послуг */
    display: block; /* Робимо кнопку блочним елементом, щоб вона займала всю ширину */
    width: calc(100% - 40px);
    margin: 0 auto; /* Горизонтальне центрування */
    margin-top: 25px; /* Верхній відступ */
    text-align: center;

    /* Наслідує базові стилі від .button */
    /* Padding для кнопки в картці (може бути іншим ніж у .button) */
    padding: 10px 15px;
}


/* Стилі для секції Projects */
.projects-section {
    padding: 60px 0;
    background-color: #fcfcfc;
    text-align: center;
}

.projects-section h2 {
     font-size: 2em;
     margin-bottom: 40px;
     color: #333;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;

    grid-auto-rows: 1fr;
    align-items: stretch;
    justify-items: stretch;

    margin-bottom: 40px;
}

.project-card {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 25px;
    text-align: left;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.project-card h3 {
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
    font-weight: bold;
}

.project-card p {
    font-size: 0.95em;
    color: #666;
    margin-bottom: 15px;
    flex-grow: 1;
}

/* Стиль для прихованих проектних карток */
.project-card.hidden-project {
    display: none; /* Приховує елемент */
}

.project-tags {
    margin-top: 10px;
    margin-bottom: 15px;
    text-align: left;
}

.project-tag {
    display: inline-block;
    background-color: transparent;
    color: #555;
    font-size: 0.8em;
    padding: 3px 8px;
    border-radius: 3px;
    margin-right: 5px;
    margin-bottom: 5px;
    text-decoration: none;
    border: 1px solid var(--primary-turquoise);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.project-tag:hover {
    background-color: var(--primary-turquoise);
    color: #fff;
}

.project-links {
    margin-top: auto;
    text-align: center;
}

.project-links a {
    color: #555;
    font-size: 1.5em;
    margin: 0 5px;
    transition: color 0.3s ease;
    display: inline-block;
}

.project-links a:hover {
     color: var(--primary-turquoise);
}


/* Стилі для контейнера кнопки "Load More" */
.load-more-button-container {
    text-align: center; /* Центруємо кнопку */
    margin-top: 20px;
    /* Тут більше нічого не потрібно, кнопка сама відцентрується */
}

/* Стилі для кнопки "Load More" (успадковує стилі .button) */
#load-more-projects.button {
    /* Робимо кнопку блочним елементом */
    display: block;
    /* Центруємо кнопку по горизонталі за допомогою margin: auto
       Вертикальний відступ зверху 20px, знизу 0 */
    margin: 20px auto 0 auto;
    /* width: auto; або можна задати конкретну max-width, якщо потрібно обмежити її ширину */

    /* Наслідує решту стилів від .button (padding, кольори, рамка, заокруглення, ховер) */
}


/* Стилі для секції Expertise (Skills) */
.expertise-section {
    padding: 60px 0;
    background-color: #fff; /* Інший фон */
    text-align: center; /* Центруємо заголовок та, можливо, деякий вміст */
}

.expertise-section h2 {
    font-size: 2em;
    margin-bottom: 40px;
    color: #333;
}

/* Стилі для контейнера тегів навичок */
.skill-tags-container {
    margin-top: 20px;
    margin-bottom: 40px; /* Відступ під тегами */
    text-align: center; /* Центруємо теги */
}

/* Стилі для окремого тега навички (успадковує багато від project-tag) */
.skill-tag {
    display: inline-block;
    /* Успадковує стилі від project-tag (рамка, колір тексту, padding, border-radius, margin, transition) */
    background-color: transparent; /* Без фону */
    color: #555; /* Колір тексту */
    font-size: 0.9em; /* Трохи більший шрифт, ніж у проектних тегів */
    padding: 5px 10px; /* Трохи більші відступи */
    border: 1px solid var(--primary-turquoise); /* Бірюзова рамка */
    border-radius: 4px;
    margin: 5px; /* Відступ між тегами */
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    cursor: default; /* Курсор за замовчуванням */
}

/* Ефект при наведенні на тег навички (як у проектних тегів) */
.skill-tag:hover {
     background-color: var(--primary-turquoise);
     color: #fff;
}


/* Стилі для контейнера цитат */
.quotes-container {
    max-width: 800px; /* Обмежуємо ширину блоку цитат */
    margin: 40px auto; /* Центруємо та додаємо відступи */
    padding: 20px;
    border-left: 4px solid var(--primary-turquoise); /* Бірюзова лінія зліва */
    font-style: italic; /* Курсив для цитати */
    color: #555;
    text-align: left; /* Текст цитати по лівому краю */
}

.quotes-container blockquote {
    margin: 0; /* Прибираємо стандартний margin у blockquote */
    font-size: 1.1em;
    line-height: 1.6;
}

.quotes-container cite {
    display: block; /* Автор з нового рядка */
    margin-top: 10px;
    font-size: 0.9em;
    text-align: right; /* Вирівнюємо ім'я автора по правому краю */
    color: #777;
    font-style: normal; /* Прибираємо курсив для імені автора */
}

/* --- NEW OUTER WRAPPER --- */
.certificates-slider-wrapper {
    position: relative; /* For positioning arrows relative to it */
    width: 100%;
    margin: 20px auto; /* Center the wrapper */
    /* REMOVE FLEX PROPERTIES - Let children stack naturally and center themselves */
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
}


/* --- STYLES FOR INNER CERTIFICATES CONTAINER --- */
#certificates-slider-container.certificates-slider-container {
    overflow: hidden; /* Hides everything outside */
    box-sizing: border-box; /* Include padding in dimensions */

    /* Use explicitly set max-width */
    max-width: var(--certificates-inner-container-max-width);
    width: 100%; /* Responsive width up to max-width */
    padding: 0; /* No inner padding */

    /* Center the inner container itself within the wrapper */
    margin: 0 auto;
    /* position: relative; /* Not needed here */
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: fit-content;
    padding: 0;
}

.certificate-item {
    flex: 0 0 auto;
    width: calc((var(--certificates-inner-container-max-width) - 2 * var(--certificate-item-gap)) / 3);
    margin-right: var(--certificate-item-gap);
    box-sizing: border-box;

    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.carousel-track .certificate-item:last-child {
    margin-right: 0;
}

.certificate-link {
    display: block;
}

.certificate-image {
    width: 100%;
    height: var(--certificate-image-height);
    display: block;
    object-fit: cover;
    border-bottom: 1px solid #ddd;
}

.certificate-text {
    padding: 5px 15px 5px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.certificate-title {
    margin-top: 0;
    margin-bottom: 3px;
    font-size: 1em;
    color: #333;
}

.certificate-date {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 0.85em;
    color: #666;
}


/* --- STYLES FOR NAVIGATION ARROWS (position relative to OUTER wrapper) --- */

.certificates-slider-controls {
    z-index: 10;
    pointer-events: none;
    /* No width needed here */
}

.carousel-control {
    position: absolute; /* Position relative to .certificates-slider-wrapper */
    top: 50%;
    transform: translateY(-50%);

    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #088484;
    border-radius: 50%;
    width: var(--arrow-button-width);
    height: var(--arrow-button-width);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.5em;
    color: #088484;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    pointer-events: auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    user-select: none;
    z-index: 15;
}

.carousel-control.prev {
    /* Position relative to the left edge of the OUTER wrapper */
    /* Calculated to be outside the inner container */
    left: calc(50% - var(--certificates-inner-container-max-width) / 2 - var(--arrow-button-width) - var(--arrow-space-around));
}

.carousel-control.next {
    /* Position relative to the right edge of the OUTER wrapper */
    /* Calculated to be outside the inner container */
    right: calc(50% - var(--certificates-inner-container-max-width) / 2 - var(--arrow-button-width) - var(--arrow-space-around));
}


.carousel-control:hover {
    background-color: rgba(8, 132, 132, 0.1);
}


/* --- STYLES FOR PAGINATION DOTS --- */

.carousel-nav {
    display: flex;
    justify-content: center; /* Center dots within the dots container */
    margin-top: 25px;
    /* Center the dots container itself horizontally */
    margin-left: auto;
    margin-right: auto;
    /* Ensure it's a block element if needed for margin:auto */
    display: flex; /* Keep flex for centering dots inside */
}

.carousel-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border: 1px solid #088484;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.carousel-dot.active {
    background-color: #088484;
    border-color: #088484;
}

.carousel-dot:hover {
     border-color: #088484;
}


/* --- RESPONSIVE STYLES (examples) --- */

@media (max-width: 992px) { /* Tablets */
    :root {
        --certificate-item-base-width: 250px;
        --certificate-item-gap: 20px;
        --arrow-space-around: 15px;
        --certificate-image-height: 180px;

        /* Recalculate inner container max-width for 2 items */
        --certificates-inner-container-max-width: calc(2 * var(--certificate-item-base-width) + var(--certificate-item-gap));
    }
     /* Inner container uses recalculated max-width */

     .certificate-item {
         width: calc((var(--certificates-inner-container-max-width) - var(--certificate-item-gap)) / 2);
         margin-right: var(--certificate-item-gap);
     }
      .carousel-track .certificate-item:last-child { margin-right: 0; }

     /* Recalculate arrow positioning based on new inner container width and space */
     .carousel-control.prev {
        left: calc(50% - var(--certificates-inner-container-max-width) / 2 - var(--arrow-button-width) - var(--arrow-space-around));
    }

    .carousel-control.next {
        right: calc(50% - var(--certificates-inner-container-max-width) / 2 - var(--arrow-button-width) - var(--arrow-space-around));
    }
}


@media (max-width: 576px) { /* Mobile */
     :root {
         --certificate-item-base-width: 280px; /* Adjust width */
         --certificate-item-gap: 15px;
         --arrow-button-width: 30px;
         --arrow-space-around: 10px;
         --certificate-image-height: 160px;

         /* Recalculate inner container max-width for 1 item */
         --certificates-inner-container-max-width: var(--certificate-item-base-width);
    }
     /* Inner container uses recalculated max-width */

     .certificate-item {
        width: var(--certificate-item-base-width);
        margin-right: 0;
    }
     .carousel-track .certificate-item:last-child { margin-right: 0; }

     /* Hide arrows on mobile */
     .carousel-control {
         display: none;
     }

    .carousel-nav {
         margin-top: 15px;
    }

    .carousel-dot {
        width: 8px;
        height: 8px;
        margin: 0 3px;
    }
}

/* Additional breakpoints as needed */

/* --- ПОЧАТОК СТИЛІВ ДЛЯ СЕКЦІЇ КОНТАКТІВ --- */

.contact-section {
    padding: 60px 0;
    background-color: #f8f8f8;
    text-align: center;
}

.contact-section h2 {
    margin-top: 0;
    margin-bottom: var(--spacing-between-blocks);
    color: #333;
    font-size: 2.5em;
}

.contact-content {
    display: flex;
    gap: var(--contact-gap-between-cards);
    margin-bottom: var(--spacing-between-blocks);
    flex-wrap: wrap;
    justify-content: center;
    /* Вирівнюємо елементи по висоті, щоб картки були однакової висоти */
    align-items: stretch;
    /* Ширина contact-content адаптується до ширини батьківського .container */
}

.contact-info,
.contact-form {
    /* СТИЛІ КАРТОК */
    background-color: var(--card-background-color);
    padding: var(--contact-card-padding);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-box-shadow);
    box-sizing: border-box;

    /* Робимо картки однакової ширини за допомогою Flexbox */
    /* flex: 1 1 var(--contact-card-flex-basis); /* Grow, shrink, basis на основі відсотка */
    flex-basis: var(--contact-card-flex-basis); /* Базова ширина від відсотка батька */
    flex-grow: 1; /* Дозволяємо зростати, якщо є місце */
    flex-shrink: 1; /* Дозволяємо стискатись, якщо не вистачає місця */
    width: auto; /* Важливо, щоб width не перебивав flex-basis */
    min-width: auto; /* Дозволяємо стискатись нижче basis, якщо потрібно */


    text-align: left;
    display: flex;
    flex-direction: column;
}

/* Додаємо flex-grow до вмісту картки, щоб він займав доступне місце */
.contact-form form {
     flex-grow: 1;
     display: flex;
     flex-direction: column;
}


/* Стилі для елементів контактної інформації всередині картки contact-info */
.contact-info h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--primary-turquoise);
    font-size: 1.5em;
}

.contact-info .contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.contact-info .contact-item:last-child {
    margin-bottom: 0;
}

.contact-info .contact-item i {
    color: var(--primary-turquoise);
    font-size: 1.2em;
    margin-right: 15px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.contact-info .contact-item span,
.contact-info .contact-item a {
    color: #333;
    text-decoration: none;
    font-size: 1.1em;
    word-break: break-word;
}

.contact-info .contact-item a:hover {
    color: var(--primary-turquoise);
}


/* Стилі для форми всередині картки contact-form */
.contact-form form {
    /* display: flex; /* Вже задано вище */
    flex-wrap: wrap;
    gap: 20px;
}

.contact-form .form-group {
    display: flex;
    gap: 20px;
    width: 100%;
    flex-wrap: wrap;
}

.contact-form .form-group.full-width {
     width: 100%;
}

.contact-form .form-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 200px; /* Мінімальна ширина поля перед переносом */
}

.contact-form .form-field.half-width {
     width: calc(50% - 10px);
     min-width: auto;
}

.contact-form label {
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
    font-size: 0.95em;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    font-family: 'Ubuntu', sans-serif;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--primary-turquoise);
    box-shadow: 0 0 5px rgba(8, 132, 132, 0.5);
}

.contact-form textarea {
    resize: vertical;
}

.contact-form .checkbox-group {
     align-items: center;
     display: flex;
     gap: 10px;
}

.contact-form input[type="checkbox"] {
     flex-shrink: 0;
}

.contact-form .checkbox-group label {
    font-weight: normal;
    color: #333;
    font-size: 0.9em;
     margin-bottom: 0;
     flex: 1;
}

.contact-form .checkbox-group label a {
    color: var(--primary-turquoise);
    text-decoration: none;
    transition: color 0.3s ease;
}

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

/* Custom Checkbox Styling */
.checkbox-group input[type="checkbox"] {
    /* Приховуємо стандартний чекбокс візуально, але залишаємо його функціональним */
    position: absolute;
    opacity: 0;
    z-index: -1;
    /* Доступність: залишаємо можливість фокусуватися з клавіатури */
}

.checkbox-group label {
    /* Стилі для самого лейбла */
    position: relative; /* Для позиціонування псевдоелементів */
    padding-left: 23px; /* Відступ зліва для кастомного квадратика */
    cursor: pointer; /* Змінюємо курсор */
    display: inline-block; /* Або block, залежить від макету */
    vertical-align: middle; /* Вирівнювання по вертикалі */
    user-select: none; /* Заборона виділення тексту */
}

.checkbox-group label::before {
    /* Псевдоелемент ::before - візуальне представлення самого квадратика чекбокса */
    content: '';
    position: absolute;
    top: 55%;
    left: 0;
    transform: translateY(-55%);
    width: 15px; /* Розмір квадратика */
    height: 15px; /* Розмір квадратика */
    border: 1px solid var(--primary-turquoise); /* Межа бірюзового кольору */
    border-radius: 2px; /* Заокруглені кути */
    background-color: white; /* Білий фон */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.checkbox-group input[type="checkbox"]:checked + label::before {
    background-color: var(--primary-turquoise);
    border-color: var(--primary-turquoise);
}

.checkbox-group label::after {
    /* Псевдоелемент ::after - візуальне представлення галочки */
    content: '';
    position: absolute;
    /* --- ПОЗИЦІОНУВАННЯ ГАЛОЧКИ (СКОРИГОВАНО ЗНОВУ) --- */
    /* Підбираємо top і left для кращого центрування галочки 6x12px в квадраті 18x18px */
    bottom: 7px; /* Спроба підняти трохи вище */
    left: 5px; /* Спроба змістити трохи правіше */
    transform: rotate(45deg); /* Поворот */
    /* --- РОЗМІР ГАЛОЧКИ (ЗБІЛЬШЕНО ЛИШЕ ВИСОТУ ТРОХИ) --- */
    /* Можливо, галочка виглядала непропорційною через співвідношення сторін */
    width: 5px; /* Ширина лінії */
    height: 10px; /* Висота лінії */
    border: solid white;
    border-width: 0 2px 2px 0; /* Товщина лінії */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.checkbox-group input[type="checkbox"]:checked + label::after {
    opacity: 1;
}

/* Опціонально: Стилі для стану фокусування (для доступності з клавіатури) */
.checkbox-group input[type="checkbox"]:focus + label::before {
    box-shadow: 0 0 0 3px rgba(8, 132, 132, 0.5);
}
/* Кінець стилів кастомн чекбокс */

.contact-form .submit-button-group {
     width: 100%;
     text-align: center;
     margin-top: auto; /* Виштовхує кнопку вниз у flex-контейнері форми */
}

.contact-form button[type="submit"] {
    padding: 12px 30px;
    border: 1px solid var(--primary-turquoise);
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s ease, opacity 0.3s ease;
     display: inline-block;
     margin: 0 auto;
}

.contact-form button[type="submit"]:hover {
    background-color: var(--darker-turquoise);
}

/* Стилі для кнопки відправки в групі, коли вона неактивна */
.submit-button-group button[type="submit"]:disabled {
    opacity: 0.5; /* Робимо кнопку напівпрозорою */
    cursor: not-allowed; /* Змінюємо курсор при наведенні на "заборонено" */
    /* Опціонально: змінюємо колір фону, щоб вона виглядала сірою */
    background-color: #ccc; /* Приклад сірого кольору */
    border-color: #ccc; /* Якщо є межа, теж робимо сірою */
    color: #666; /* Якщо текст білий, робимо його темнішим, щоб був контраст на сірому */
}

.contact-form button[type="submit"]:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 0.7;
}

/* --- СТИЛІ ДЛЯ КАРТИ --- */
.contact-map {
     /* Відступи зверху та знизу карти */
    margin-top: var(--spacing-between-blocks);
    margin-bottom: var(--spacing-between-blocks);

     /* ШИРИНА КАРТИ = ШИРИНА БАТЬКІВСЬКОГО .contact-content */
     /* contact-content займає всю доступну ширину container, в якому він знаходиться */
     max-width: 100%; /* Карта займає всю доступну ширину батьківського .container контенту */
     width: 100%;
     margin-left: auto;
     margin-right: auto; /* Центруємо блок карти */
     box-sizing: border-box;
     overflow: hidden; /* Для коректного заокруглення кутів iframe */
}

.contact-map iframe {
    display: block;
    width: 100%;
    height: 450px; /* Фіксована висота карти */
    border: 0;
    border-radius: var(--card-border-radius); /* Заокруглені кути карти */
}


/* --- СТИЛІ ДЛЯ ІКОНОК СОЦМЕРЕЖ --- */
.contact-social {
     display: flex;
     justify-content: center; /* Центруємо іконки в блоці */
     gap: 20px; /* Відступ між іконками */
     margin-top: 20px; /* Відступ зверху від карти */
     margin-bottom: 20px; /* Відступ знизу секції */

     /* ШИРИНА БЛОКУ СОЦМЕРЕЖ = ШИРИНА КАРТИ = ШИРИНА БАТЬКІВСЬКОГО .container контенту */
     max-width: 100%; /* Займає всю доступну ширину батьківського .container контенту */
     width: 100%;
     margin-left: auto;
     margin-right: auto; /* Центруємо блок соцмереж */
}

.contact-social a {
    /* СТИЛІ КРУГЛОЇ КНОПКИ */
    display: flex; /* Використовуємо flexbox для центрування іконки всередині */
    justify-content: center;
    align-items: center;
    width: var(--social-icon-button-size); /* Фіксована ширина для круглої області */
    height: var(--social-icon-button-size); /* Фіксована висота (як ширина для кола) */
    border: 1px solid var(--primary-turquoise); /* Межа */
    border-radius: 50%; /* Робимо круглим */
    background-color: transparent; /* Прозорий фон */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Тінь */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Анімація при наведенні */
    flex-shrink: 0; /* Забороняємо стискатись, щоб не перетворювались на еліпси */

    /* Стилі самої іконки */
    color: var(--primary-turquoise); /* Колір іконки */
    font-size: calc(var(--social-icon-button-size) * 0.6); /* Розмір іконки відносно розміру кнопки */
    text-decoration: none; /* Прибираємо підкреслення */
}

.contact-social a:hover {
    background-color: var(--primary-turquoise);
    border-color: var(--darker-turquoise);
    color: #fff; /* Колір іконки при наведенні */
}

/* Стилі для кнопки "Прокрутити догори" */
.scroll-to-top {
    position: fixed; /* Фіксована позиція */
    bottom: 30px; /* Відступ знизу */
    right: 30px; /* Відступ справа */
    z-index: 1000; /* Поверх іншого контенту */
    width: 50px; /* Ширина */
    height: 50px; /* Висота */
    background-color: white; /* Білий фон */
    border: 2px solid var(--primary-turquoise); /* Бірюзова межа */
    border-radius: 50%; /* Кругла форма */
    display: flex; /* Для центрування вмісту */
    justify-content: center; /* Центрування по горизонталі */
    align-items: center; /* Центрування по вертикалі */
    cursor: pointer; /* Курсор */
    opacity: 0; /* Початково приховано */
    visibility: hidden; /* Початково приховано */
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; /* Плавні переходи */
    text-decoration: none; /* Прибираємо підкреслення */
}

/* Стилі кнопки при наведенні курсора */
.scroll-to-top:hover {
    background-color: var(--primary-turquoise); /* Фон стає бірюзовим */
    border-color: var(--primary-turquoise); /* Межа залишається бірюзовою */
}

/* Стрілка всередині кнопки (псевдоелемент ::before) */
.scroll-to-top::before {
    content: '';
    width: 0;
    height: 0;
    /* Створення трикутника за допомогою межі */
    border-left: 10px solid transparent; /* Ліва частина */
    border-right: 10px solid transparent; /* Права частина */
    border-bottom: 15px solid var(--primary-turquoise); /* Основа та колір стрілки (бірюзовий) */
    /* Корекція позиції стрілки, щоб вона виглядала по центру */
    margin-top: -3px; /* Приклад корекції, можливо, знадобиться підбір */
    /* Плавний перехід тільки для кольору межі (стрілки) */
    transition: border-bottom-color 0.3s ease;
}

/* Колір стрілки при наведенні курсора на кнопку */
.scroll-to-top:hover::before {
    border-bottom-color: white; /* Стрілка стає білою */
}

/* Клас, який додається JavaScript, коли кнопка має бути видимою */
.scroll-to-top.show {
    opacity: 1; /* Робимо повністю видимою */
    visibility: visible; /* Робимо видимою */
}

/* --- БАЗОВІ СТИЛІ МОДАЛЬНОГО ВІКНА --- */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    align-items: center;
    justify-content: center;
}

.modal .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
    position: relative;
    text-align: center;
}

.modal .close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.modal .close-button:hover,
.modal .close-button:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

#modalOkButton {
    background-color: var(--primary-turquoise);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

#modalOkButton:hover {
    background-color: var(--darker-turquoise);
}


/* --- АДАПТИВНІ СТИЛІ --- */

@media (max-width: 992px) { /* Планшети */
     /* Перераховуємо змінні для нового max-width контейнера */
     :root {
         --contact-gap-between-cards: 20px; /* Менший відступ між картками на планшетах */
         --spacing-between-blocks: 30px; /* Менший відступ між блоками */
         --contact-card-padding: 25px; /* Менші внутрішні відступи в картках */
          --social-icon-button-size: 35px; /* Менший розмір кнопки соцмереж */

          /* Розрахунок основи для ширини ОДНІЄЇ картки для планшетів */
          --contact-card-flex-basis: calc(50% - var(--contact-gap-between-cards) / 2);
     }
      /* Container max-width та padding візьмуться з твоїх глобальних стилів */


    /* Картки в рядок, якщо вміщаються, і однакової ширини */
    .contact-info,
    .contact-form {
         flex: 1 1 var(--contact-card-flex-basis); /* Grow, shrink, basis */
         width: auto;
         min-width: auto; /* Дозволяємо стискатись */
         padding: var(--contact-card-padding); /* Використовуємо зменшений padding */
    }
     .contact-content {
         flex-direction: row; /* За замовчуванням в рядок */
         gap: var(--contact-gap-between-cards); /* Використовуємо зменшений gap */
         align-items: stretch; /* Зберігаємо розтягування по висоті */
    }
     /* Якщо все одно не вміщається, переходять в стовпець */
     @media (max-width: 768px) { /* Приклад: брейкпойнт для переносу в стовпець */
          .contact-info, .contact-form { flex: none; width: 100%; } /* Займають 100% */
          .contact-content { flex-direction: column; gap: var(--spacing-between-blocks); } /* Розташовуємо в стовпець */

           /* Карта та соцмережі займають всю доступну ширину контейнера */
           .contact-map,
           .contact-social {
               max-width: 100%; /* Займають всю ширину .container контенту */
               width: 100%;
           }

     }

     /* Адаптуємо ширину карти та соцмереж, коли картки ЩЕ в рядок */
     /* max-width = 100% контейнера контенту, що відповідає ширині 2-х карток з відступом */
     .contact-map,
     .contact-social {
          max-width: 100%;
     }

      .contact-map iframe { height: 350px; }

      .contact-social { gap: 15px; /* Менший відступ між іконками */ }
}


@media (max-width: 576px) { /* Мобільні */
     /* Перераховуємо змінні для мобільних */
      :root {
          --spacing-between-blocks: 30px;
          --contact-card-padding: 20px;
          --social-icon-button-size: 35px; /* Розмір кнопки як на планшетах */

           /* На мобільних картки займають 100% */
           --contact-card-flex-basis: 100%; /* Основа = 100% батька */
      }

     .contact-section { padding: 40px 0; }
     .contact-section h2 { margin-bottom: 30px; font-size: 2em; }

    .contact-info,
    .contact-form {
         flex: none; /* В стовпці */
         width: 100%; /* Займають 100% */
         min-width: auto;
         padding: var(--contact-card-padding);
    }
     .contact-content {
         flex-direction: column; /* В стовпці */
         gap: var(--spacing-between-blocks); /* Відступ між картками в стовпці */
    }


    .contact-info h3 { font-size: 1.3em; margin-bottom: 15px; }
    .contact-info .contact-item { margin-bottom: 10px; }
    .contact-info .contact-item i { font-size: 1em; margin-right: 10px; width: auto; }
    .contact-info .contact-item span,
    .contact-info .contact-item a { font-size: 1em; }

    .contact-form form { gap: 15px; }
    .contact-form .form-field { min-width: auto; }
    .contact-form .form-field.half-width {
         width: 100%;
         margin-right: 0;
    }
     .contact-form .checkbox-group { gap: 5px; }
    .contact-form input[type="checkbox"] { margin-right: 5px; }
     .contact-form .checkbox-group label { font-size: 0.85em; }

    .contact-form .submit-button-group { margin-top: 5px; }
    .contact-form button[type="submit"] { padding: 10px 20px; font-size: 1em; }


     .contact-map {
         margin-top: 30px;
         margin-bottom: 30px;
         max-width: 100%; /* Займає 100% контейнера контенту */
         width: 100%;
     }
     .contact-map iframe { height: 250px; }

     .contact-social {
         gap: 20px;
         margin-top: 15px;
         margin-bottom: 15px;
         max-width: 100%; /* Займає 100% контейнера контенту */
         width: 100%;
     }
     .contact-social a { font-size: 1.8em; }


     /* Модалка - стилі вже є */
     .modal { align-items: flex-start; padding-top: 20px; }
     .modal .modal-content { width: 90%; padding: 15px; margin-top: 0;}
      .modal .close-button { font-size: 24px; }
      #modalOkButton { padding: 8px 15px; font-size: 0.95em; }

}

/* --- КІНЕЦЬ СТИЛІВ ДЛЯ СЕКЦІЇ КОНТАКТІВ --- */

/* Стилі для Footer (базові) */
.site-footer {
    padding: 20px 0;
    text-align: center;
    font-size: 0.9em;
    color: #777;
    background-color: #fff;
    border-top: 1px solid #eee;
}

.site-footer .container {
    /* Додаткові стилі, якщо потрібні */
}

.footer-logo {
    height: 40px; /* Розмір логотипу */
    vertical-align: middle;
}