/*
Theme Name: Autobiography
Author: Oleh Shashkevych
Description: Autobiography custom theme
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
Text Domain: autobiography
*/

/* -------------------------------------------------------------------------- */
/* CSS RESET */
/* -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Alta Regular'; /* You can name it whatever you like */
  src: url('/wp-content/themes/autobiography/assets/alta-regular.woff2') format('woff2');
  font-weight: normal; /* Or 400 */
  font-style: normal;
  font-display: swap; /* Improves loading performance */
}

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

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* Убрать анимации и переходы для пользователей, которые предпочитают их отсутствие */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 160px;
}

/* Базовые настройки для body */
body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Улучшение наследования шрифтов для форм */
input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

ul,
ol {
    list-style: none;
}

/* --- 1. Variables & Basic Setup --- */
:root {
    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --green: #018938;
    --green-light: #2ECC71;
    --purple: #664daa;
    --black: #121212;
    --white: #FFFFFF;
    --grey: #2a2a2a;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    margin: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-theme {
    --bg-color: var(--black);
    --text-color: var(--white);
    --border-color: var(--grey);
}

body.light-theme {
    --bg-color: var(--white);
    --text-color: var(--black);
    --border-color: #e0e0e0;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* --- 1.5. Typography --- */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-color);
}

h1 {
    font-size: 48px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 20px;
}

p {
    font-size: 16px;
    line-height: 1.4;
    opacity: 0.8;
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 30px;
}

.d-none {
    display: none !important;
}

/* --- 2. Button System --- */
@keyframes shimmer {
    0% {
        left: -60px;
    }

    50% {
        left: calc(30px + 100%);
    }

    100% {
        left: calc(30px + 100%);
    }
}

.button {
    position: relative;
    display: inline-block;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: 5px;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
}

.button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60px;
    width: 30px;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    transform: skewX(-30deg);
    animation: shimmer 8s infinite 2s;
}

.button--primary {
    background-color: var(--green);
    border-color: var(--green);
    color: var(--white);
}

.button--primary:hover {
    background-color: #27ae60;
    border-color: #27ae60;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.button--outline {
    background-color: transparent;
    border-color: var(--green);
    color: var(--green);
}

.button--outline:hover {
    background-color: var(--green);
    color: var(--white);
}

.button--secondary {
    background-color: var(--border-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

.button--secondary:hover {
    filter: brightness(1.2);
}


/* --- 3. Header --- */
.header {
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: var(--bg-color);
}

.header__container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 30px;
}

.header__top-row,
.header__bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__top-row {
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
}

.header__section {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header__logo {
    font-weight: bold;
    font-size: 24px;
}

.header__logo img {
    max-height: 60px; /* Можете змінити висоту за вашим бажанням */
    width: auto;
    display: block;
}

.header__logo .logo-light {
    display: none;
}
.header__logo .logo-dark {
    display: block;
}

/* Когда тема светлая, делаем наоборот */
body.light-theme .header__logo .logo-dark {
    display: none;
}
body.light-theme .header__logo .logo-light {
    display: block;
}

/* Если логотип - это текст, применяем тот же принцип */
.header__logo span {
    font-weight: bold;
    font-size: 24px;
    color: var(--text-color);
}

.header__lang-switcher ul {
    display: flex;
}

.header__lang-switcher a {
    text-transform: uppercase;
    font-weight: 500;
}

.header__contacts {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header__contact-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header__contact-icon-group {
    color: var(--green-light);
    width: 28px;
    height: 28px;
}

.header__contact-icon-group svg {
    display: block;
    width: 100%;
    height: 100%;
}

.header__contact-phones {
    display: flex;
    flex-direction: column;
}

/* Уменьшаем размер и убираем иконку у ссылок-телефонов в новом блоке */
.header__contact-phones .header__contact-link {
    font-size: 13px;
    padding: 2px 0;
    gap: 0;
}

.header__contact-phones .header__contact-link .header__contact-icon {
    display: none;
}

.header__contact-messengers {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 12px;
    border-left: 1px solid var(--border-color);
}

.header__messenger-link svg {
    display: block;
    width: 22px;
    height: 22px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.header__messenger-link:hover svg {
    opacity: 1;
}

.header__messenger-link svg path {
    transition: color 0.3s ease;
}

.header__messenger-link:hover svg path {
    color: var(--green-light);
}

.header__contact-link--address {
    border-left: 1px solid var(--border-color);
    padding-left: 12px;
}

/* Убираем подчеркивание у всех текстовых ссылок в хедере */
.header__contact-link .header__contact-text::after {
    display: none;
}

.header__contact-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.header__contact-icon {
    width: 28px;
    height: 28px;
}

.header__contact-text {
    position: relative;
    transition: transform 0.3s ease;
}

.header__contact-link:hover .header__contact-text {
    transform: translateX(4px);
}

.header__contact-text::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: var(--green);
    bottom: -2px;
    left: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.header__contact-link:hover .header__contact-text::after {
    transform: scaleX(1);
}

/* --- Navigation Bar (Bottom Row) --- */
.header__bottom-row {
    padding: 10px 0;
    gap: 30px;
}

.header__bottom-row .header__lang-switcher ul {
    gap: 15px; /* Отступ между языками */
}

.header__bottom-row .header__lang-switcher a {
    transition: color 0.3s ease;
    font-size: 14px;
}

.header__bottom-row .header__lang-switcher a:hover {
    color: var(--green);
}

/* Стиль для активного языка (самое главное) */
.header__bottom-row .header__lang-switcher .current-lang > a {
    color: var(--green);
    font-weight: 700;
    cursor: default;
}

.header__nav {
    flex-grow: 1;
}

.header__nav .header__menu-list {
    display: flex;
    gap: 30px;
}

.header__nav a {
    font-size: 16px;
    position: relative;
    padding-bottom: 5px;
}

.header__nav>.header__menu-list>.menu-item>a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--green);
    transition: width 0.3s ease;
}

.header__nav>.header__menu-list>.menu-item>a:hover::after,
.header__nav>.header__menu-list>.current-menu-item>a::after {
    width: 100%;
}


/* --- 4. New Theme Switcher --- */
.theme-switcher {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.theme-switcher__input {
    display: none;
}

.theme-switcher__label {
    position: relative;
    width: 44px;
    height: 24px;
    background-color: var(--grey);
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.theme-switcher__label::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background-color: var(--white);
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.theme-switcher__input:checked+.theme-switcher__label {
    background-color: var(--green);
}

.theme-switcher__input:checked+.theme-switcher__label::after {
    transform: translateX(20px);
}

.theme-switcher__text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
}

.header__bottom-row .menu-item-has-children {
    position: relative;
}

.header__bottom-row .sub-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    padding: 10px;
    min-width: 230px;
    border-radius: 5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 99;
}

.header__bottom-row .menu-item-has-children:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.header__bottom-row .sub-menu a {
    display: block;
    padding: 8px 15px;
    font-size: 15px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

.header__bottom-row .sub-menu a:hover {
    background-color: var(--border-color);
}

.header__bottom-row .menu-item-has-children>a {
    display: flex;
    align-items: center;
    gap: 6px;
}

.header__bottom-row .header__menu-chevron {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.header__bottom-row .menu-item-has-children:hover .header__menu-chevron {
    transform: rotate(180deg);
}

/* --- 5. Burger Menu --- */
.header__burger-button {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.header__burger-line {
    width: 100%;
    height: 3px;
    background-color: var(--text-color);
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

.header__burger-button.is-open .header__burger-line:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
}

.header__burger-button.is-open .header__burger-line:nth-child(2) {
    opacity: 0;
}

.header__burger-button.is-open .header__burger-line:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
}

.mobile-menu-panel {
    display: none;
}

/* --- 7. Footer --- */
.footer {
    background-color: var(--bg-color);
    /* ИЗМЕНЕНО */
    color: var(--text-color);
    /* ИЗМЕНЕНО */
    padding: 60px 0 0;
    border-top: 1px solid var(--border-color);
    position: relative;
    opacity: 0.8;
    /* Немного приглушим текст для контраста */
}

.footer__container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 30px;
}

.footer__main {
    display: grid;
    grid-template-columns: 2fr .6fr .6fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
}

.footer__logo {
    font-size: 32px;
    font-weight: bold;
    color: var(--text-color);
    display: inline-block;
    margin-bottom: 15px;
}

.footer__logo img {
    max-height: 100px; /* Можете задать высоту лого в футере */
    width: auto;
}

/* По умолчанию (темная тема) показываем темный логотип */
.footer__logo .logo-light {
    display: none;
}
.footer__logo .logo-dark {
    display: block;
}

/* Когда тема светлая, делаем наоборот */
body.light-theme .footer__logo .logo-dark {
    display: none;
}
body.light-theme .footer__logo .logo-light {
    display: block;
}

/* Стили для текстового лого, если картинки не загружены */
.footer__logo span {
    font-size: 32px;
    font-weight: bold;
    color: var(--text-color);
}

.footer__about-text {
    font-size: 14px;
    line-height: 1.6;
}

.footer__title {
    color: var(--text-color);
    font-size: 18px;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.footer__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--green);
}

.footer__list a {
    font-size: 15px;
    padding: 8px 0;
    display: inline-block;
    transition: color 0.3s, transform 0.3s;
}

.footer__list a:hover {
    color: var(--green);
    transform: translateX(5px);
}

.footer__contact-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer__contact-item strong {
    color: var(--text-color);
    display: block;
    font-size: 14px;
}

.footer__contact-item a,
.footer__contact-item span {
    font-size: 15px;
}

.footer__column--about {
    max-width: 420px;
}

.footer__bottom {
    border-top: 1px solid var(--border-color);
    padding: 20px 0;
    text-align: center;
}

.footer__copyright {
    font-size: 14px;
}

.footer__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}

.footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; /* Аналогично .contact-socials__link */
    height: 44px; /* Аналогично .contact-socials__link */
    border: 1px solid var(--text-color); /* Аналогично .contact-socials__link */
    border-radius: 50%;
    transition: all 0.3s;
}

.footer__social-link svg {
    width: 24px; /* Аналогично .contact-socials__link */
    height: 24px; /* Аналогично .contact-socials__link */
}

/* Полностью копируем логику изменения цвета для SVG */
.footer__social-link svg path,
.footer__social-link svg circle {
    stroke: var(--text-color);
    transition: stroke 0.3s;
}
.footer__social-link svg circle:last-child {
    fill: var(--text-color);
    transition: fill 0.3s;
}

/* Состояния при наведении (:hover) */
.footer__social-link:hover {
    border-color: var(--green);
    background-color: var(--green);
}

.footer__social-link:hover svg path,
.footer__social-link:hover svg circle {
    stroke: var(--white);
}

.footer__social-link:hover svg circle:last-child {
    fill: var(--white);
}

.footer__contact-details a {
    display: block; /* Чтобы каждая ссылка была на новой строке */
    margin-bottom: 5px; /* Небольшой отступ между ссылками */
}

.footer__contact-details a:last-child {
    margin-bottom: 0; /* Убираем отступ у последнего элемента */
}

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 30px;
    width: 40px;
    height: 40px;
    background-color: var(--green);
    color: var(--text-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    transform: scale(1.1);
}

.back-to-top svg {
    width: 24px;
    height: auto;
}

/* --- 8. Contact Section --- */
.contact-section {
    padding: 60px 0;
    background-color: var(--bg-color);
    border-top: 1px solid var(--border-color);
}

.contact-section__container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 30px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    align-items: center;
    gap: 60px;
}

.contact-section__image-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    height: auto;
    aspect-ratio: 4 / 3;
}

.contact-section__image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-section__form-wrapper {
    text-align: left;
}

.contact-section__title {
    font-size: 42px;
}

/* --- Fluent Form Custom Styles --- */
.contact-section__form .fluentform,
.popup-form-container .fluentform {
    margin-top: 30px;
}

.contact-section__form .ff-el-input--label label,
.popup-form-container .ff-el-input--label label{
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
    color: var(--text-color);
}

.contact-section__form .ff-el-input--content,
.popup-form-container .ff-el-input--content  {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.contact-section__form .ff-el-form-check-rad-btns,
.contact-section__form .ff-el-form-check-checkbox-btns,
.popup-form-container .ff-el-form-check-rad-btns,
.popup-form-container .ff-el-form-check-checkbox-btns {
    display: contents;
}

.contact-section__form .ff-el-form-check-label,
.popup-form-container .ff-el-form-check-label {
    flex-grow: 1;
    display: flex !important;
}

.contact-section__form .ff-el-form-check-label span,
.popup-form-container .ff-el-form-check-label span {
    display: block;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
    transition: all 0.2s ease-in-out;
}

.contact-section__form .ff-el-form-check-input,
.popup-form-container .ff-el-form-check-input {
    display: none !important;
}

.contact-section__form .ff-el-form-check-label span:hover,
.popup-form-container .ff-el-form-check-label span:hover {
    border-color: var(--green);
    color: var(--green);
}

.contact-section__form .ff-el-form-check-input:checked+span,
.popup-form-container .ff-el-form-check-input:checked+span {
    background-color: var(--green);
    border-color: var(--green);
    color: var(--white);
}

.contact-section__form .ff-el-form-control,
.popup-form-container .ff-el-form-control {
    background-color: var(--bg-color) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    border-radius: 5px !important;
    padding: 12px 15px !important;
    font-size: 16px !important;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.contact-section__form .ff-el-form-control:focus,
.popup-form-container .ff-el-form-control:focus {
    border-color: var(--green) !important;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.3) !important;
}

/* --- Custom Checkbox Styles (Final) --- */

/* Контейнер для чекбокса и текста */
.contact-section__form .ff-el-tc .ff-el-form-check-label,
.popup-form-container .ff-el-tc .ff-el-form-check-label {
    display: flex !important;
    align-items: center;
    cursor: pointer;
    gap: 12px;
}

/* Скрываем ненужные элементы */
.contact-section__form .ff_tc_checkbox input[type="checkbox"],
.contact-section__form .ff_tc_checkbox span,
.popup-form-container .ff_tc_checkbox input[type="checkbox"],
.popup-form-container .ff_tc_checkbox span {
    display: none;
}

/* Основа кастомного чекбокса */
.contact-section__form .ff_tc_checkbox,
.popup-form-container .ff_tc_checkbox {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    border: 1px solid var(--border-color) !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M4 12.6111L8.92308 17.5L20 6.5' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    border-radius: 4px;
    flex-shrink: 0;
    transition: all 0.2s ease-in-out;
    position: relative;
    padding: 8px !important;
}

/* Стили для активного состояния по классу .ff_item_selected */
.contact-section__form .ff-el-tc.ff_item_selected .ff_tc_checkbox,
.popup-form-container .ff-el-tc.ff_item_selected .ff_tc_checkbox {
    background-color: var(--green);
    border-color: var(--green);
}

/* Текст соглашения */
.contact-section__form .ff_t_c,
.popup-form-container .ff_t_c {
    font-size: 14px;
    opacity: 0.8;
}

.contact-section__form .ff_t_c,
.popup-form-container .ff_t_c {
    font-size: 14px;
    opacity: 0.8;
}

.contact-section__form .ff_submit_btn_wrapper,
.popup-form-container .ff_submit_btn_wrapper {
    margin-bottom: 0 !important;
}

.contact-section__form .ff-btn-submit,
.popup-form-container .ff-btn-submit {
    width: auto;
    min-width: 200px;
    background-color: var(--green) !important;
    color: var(--white) !important;
    font-weight: 500 !important;
    border-radius: 5px !important;
    padding: 14px 30px !important;
    border: none !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

.contact-section__form .ff-btn-submit:hover,
.popup-form-container .ff-btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
}

.contact-section__form .fluentform .clearfix:after,
.contact-section__form .fluentform .clearfix:before,
.contact-section__form .fluentform .ff-el-group:after,
.contact-section__form .fluentform .ff-el-group:before,
.contact-section__form .fluentform .ff-el-repeat .ff-el-input--content:after,
.contact-section__form .fluentform .ff-el-repeat .ff-el-input--content:before,
.contact-section__form .fluentform .ff-step-body:after,
.contact-section__form .fluentform .ff-step-body:before,
.popup-form-container .fluentform .clearfix:after,
.popup-form-container .fluentform .clearfix:before {
    display: none !important;
}

/* --- 9. Hero Section --- */
.hero {
    position: relative;
    height: auto;
    min-height: 500px;
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0;
}

.hero-slider {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-slide { 
    position: relative; 
    overflow: hidden; 
}

.hero-slide__background { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

.hero-slide__background img, 
.hero-slide__background video { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.hero-slide__overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.75); 
}

.hero__content-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-form {
    /* Адаптация под темы */
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 30px;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 0 10px #01893880;
}

.hero-form__title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--text-color);
    text-align: center;
    text-transform: uppercase;
}

.hero-form .fluentform .ff-el-group,
.popup-form-container .fluentform .ff-el-group {
    margin-bottom: 15px;
}

.hero__grid {
    display: grid;
    grid-template-columns: 450px 1fr; /* Левая колонка чуть шире */
    gap: 60px;
    align-items: flex-end;
    position: relative;
    z-index: 2;
}

.hero__text-content {
    color: var(--white);
}

.hero__main-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-weight: 300;
    font-size: 110px;
    text-transform: uppercase;
    margin-bottom: 100px;
    color: var(--white);
    font-family: 'Alta Regular';
}

.hero__main-title div {
    opacity: .35;
}

.hero__main-title span {
    font-size: 28px;
    line-height: 1.3;
    letter-spacing: 1.5px;
    font-family: var(--font-main);
    text-transform: lowercase;
    font-weight: 600;
    margin-top: -15px;
    opacity: .6;
}

.hero__subtitle {
    font-size: 18px;
    opacity: 0.6;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 50px;
}

/* --- ОБЩИЕ СТИЛИ ДЛЯ ФОРМ (Hero + Footer) --- */
.hero-form .ff-el-input--label label,
.contact-section__form .ff-el-input--label label,
.popup-form-container .ff-el-input--label label {
    color: var(--text-color) !important;
}

.hero-form .ff-el-form-control,
.contact-section__form .ff-el-form-control,
.popup-form-container .ff-el-form-control {
    background-color: var(--bg-color) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

.hero-form .ff-el-form-control::placeholder,
.popup-form-container .ff-el-form-control::placeholder {
    color: var(--text-color) !important;
    opacity: 0.6 !important;
}

.hero-form .ff-el-form-control:focus,
.contact-section__form .ff-el-form-control:focus,
.popup-form-container .ff-el-form-control:focus {
    border-color: var(--green) !important;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.3) !important;
}

.hero-form .ff-btn-submit,
.contact-section__form .ff-btn-submit,
.popup-form-container .ff-btn-submit {
    width: 100%;
    min-width: 200px;
    background-color: var(--green) !important;
    color: var(--white) !important;
    font-weight: 500 !important;
    border-radius: 5px !important;
    padding: 14px 30px !important;
    border: none !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

/* Навигация слайдера */
.hero__navigation {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Адаптация под темы */
    background: rgba(var(--bg-color-rgb), 0.7); /* Используем RGB для прозрачности */
    backdrop-filter: blur(5px);
    padding: 10px 20px;
    border-radius: 50px;
    border: 1px solid var(--border-color);
}

/* Добавляем RGB переменные для поддержки прозрачности в обеих темах */
body.dark-theme {
    --bg-color-rgb: 18, 18, 18;
}
body.light-theme {
    --bg-color-rgb: 255, 255, 255;
}

.hero .swiper-button-next,
.hero .swiper-button-prev {
    position: static;
    margin: 0;
    width: 24px; /* Задаем размер контейнера */
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Стили для SVG иконки */
.hero-arrow-icon {
    width: 100%;
    height: 100%;
    fill: var(--text-color); /* Цвет будет меняться вместе с темой */
    transition: fill 0.3s, transform 0.3s;
}

.hero .swiper-button-next:hover .hero-arrow-icon,
.hero .swiper-button-prev:hover .hero-arrow-icon {
    fill: var(--green);
}

/* Поворачиваем левую стрелку */
.hero .swiper-button-prev .hero-arrow-icon {
    transform: rotate(180deg);
}

.hero .swiper-pagination {
    position: static;
    width: auto;
    bottom: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.hero .swiper-pagination-bullet {
    background: var(--text-color);
    width: 16px;
    height: 8px;
    opacity: 1;
    transition: background-color 0.3s;
    border-radius: 8px;
    transition: all .3s ease;
    margin: 0 !important;
}

.hero .swiper-pagination-bullet-active {
    background: var(--green);
    width: 90px;
    height: 8px;
}

/* --- 10. How We Work Section --- */
.how-we-work {
    padding: 60px 0;
    background-color: var(--bg-color);
}

.how-we-work__title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 42px;
}

.how-we-work__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.how-we-work__item {
    border: 1px solid var(--border-color);
    padding: 30px;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.how-we-work__item:hover {
    transform: translateY(-5px);
    border-color: var(--green);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.how-we-work__item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.how-we-work__icon-wrapper {
    width: 48px;
    height: 48px;
    color: var(--green-light); /* Цвет для SVG иконки */
}

.how-we-work__icon-wrapper svg {
    width: 100%;
    height: 100%;
}

.how-we-work__step-number {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-color);
    opacity: 0.3;
}

.how-we-work__item-title {
    font-size: 22px;
    margin-bottom: 15px;
    color: var(--text-color);
}

.how-we-work__item-description {
    font-size: 15px;
    opacity: 0.7;
}

.how-we-work__footer {
    text-align: center;
    margin-top: 50px;
}

/* --- 11. Available Cars Section (UPDATED) --- */
.available-cars {
    padding: 60px 0;
    background-color: var(--bg-color);
}

body.home .available-cars {
    padding-top: 0;
}

.available-cars__title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 42px;
}

.available-cars__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 0 30px;
}

body.page-template-template-trade-in .available-cars__grid,
body.page-template-template-leasing .available-cars__grid {
    grid-template-columns: repeat(4, 1fr);
}

.car-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.car-card:hover {
    transform: translateY(-5px);
    border-color: var(--green);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.car-card__image-link {
    display: block;
    aspect-ratio: 16 / 10;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.car-card__image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.car-card__content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.car-card__title {
    font-size: 20px;
    margin-bottom: 20px; /* Увеличили отступ */
    font-weight: 600;
}

.car-card__title a {
    text-decoration: none;
    color: inherit;
}

/* NEW: Pills for specs */
.car-card__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.car-card__pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: var(--border-color);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    opacity: 0.9;
}

.car-card__pill svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}


/* NEW: Footer with price */
.car-card__footer {
    margin-top: auto;
}

.car-card__price-block {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.car-card__price--current {
    font-size: 24px;
    font-weight: 700;
    color: var(--green);
}

.car-card__price--old {
    font-size: 18px;
    text-decoration: line-through;
    opacity: 0.5;
}

.available-cars__footer {
    text-align: center;
    margin-top: 60px;
}

/* --- 12. Our Values Section (REWORKED) --- */
.our-values {
    padding: 60px 0;
    background-color: var(--bg-color);
    border-top: 1px solid var(--border-color);
}
.our-values__title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 42px;
}
.our-values__subtitle {
    text-align: center;
    font-size: 18px;
    max-width: 700px;
    margin: 0 auto 40px;
    opacity: 0.8;
}
.our-values__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
}
.our-values__item {
    text-align: center;
    border: 1px solid var(--border-color);
    padding: 40px 30px;
    border-radius: 8px;
    transition: all 0.3s ease;
}
.our-values__item:hover {
    transform: translateY(-5px);
    border-color: var(--green);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.our-values__icon-wrapper {
    width: 56px;
    height: 56px;
    color: var(--green);
    margin: 0 auto 25px;
}
.our-values__icon-wrapper svg {
    width: 100%;
    height: 100%;
}
.our-values__item-title {
    font-size: 22px;
    margin-bottom: 15px;
}
.our-values__item-description {
    font-size: 15px;
    opacity: 0.7;
}
.our-values__seo-content {
    margin-top: 60px;
    padding-top: 60px;
    border-top: 1px solid var(--border-color);
}

/* --- 13. Our Clients Section (REWORKED GALLERY) --- */
.our-clients {
    padding: 40px 0 80px;
    background-color: var(--bg-color);
}
.our-clients__title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 42px;
}
.our-clients__gallery {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1fr 1fr;
    grid-auto-rows: 240px;
    gap: 15px;
}
.our-clients__gallery-item {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
}
.our-clients__gallery-item::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(18, 18, 18, 0.6);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.our-clients__gallery-item:hover::after {
    opacity: 1;
}
.our-clients__gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.our-clients__gallery-item:hover img {
    transform: scale(1.05);
}
/* --- Mosaic structure for the gallery --- */
.our-clients__gallery-item:nth-child(6n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}
.our-clients__gallery-item:nth-child(6n + 2) {
    grid-column: span 2;
}
.our-clients__gallery-item:nth-child(6n + 3) {
    grid-column: span 2;
}
.our-clients__gallery-item:nth-child(6n + 4) {
    grid-column: span 2;
    grid-row: span 2;
}
.our-clients__gallery-item:nth-child(6n + 5) {
    grid-column: span 2;
}
.our-clients__gallery-item:nth-child(6n) {
    grid-column: span 2;
}

/* Общие стили для контента (остаются без изменений) */
.content-styles {
    font-size: 16px;
    line-height: 1.4;
}

.content-styles > *:first-child {
    margin-top: 0 !important;
}

.content-styles > *:last-child {
    margin-bottom: 0 !important;
}

.content-styles h1,
.content-styles h2,
.content-styles h3,
.content-styles h4,
.content-styles h5,
.content-styles h6 {
    margin-top: 20px;
    margin-bottom: 10px;
    line-height: 1.2;
}

.content-styles p {
    margin-bottom: 10px;
}

.content-styles img {
    width: 100%;
    max-width: 800px;
    margin-inline: auto;
    border-radius: 8px;
}

.content-styles a {
    color: var(--green);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.3s;
}

.content-styles a:hover {
    color: #27ae60;
}

.content-styles ul,
.content-styles ol {
    margin-bottom: 15px;
    padding-left: 25px;
}

body.page-template-template-leasing .content-styles ul {
    column-count: 2;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

body.page-template-template-leasing .content-styles ul li {
    position: relative;
    padding-left: 30px; /* Створює місце для іконки */
    margin-bottom: 1em; /* Зберігає стандартний відступ між пунктами */
}

body.page-template-template-leasing .content-styles ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px; /* Регулює положення іконки по вертикалі */
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23018938' d='M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4v28z'/%3E%3Cpath fill='%23FFF' d='M29.28 6.362a2.502 2.502 0 0 0-3.458.736L14.936 23.877l-5.029-4.65a2.5 2.5 0 1 0-3.394 3.671l7.209 6.666c.48.445 1.09.665 1.696.665c.673 0 1.534-.282 2.099-1.139c.332-.506 12.5-19.27 12.5-19.27a2.5 2.5 0 0 0-.737-3.458z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.content-styles ul {
    list-style: disc;
}

.content-styles ol {
    list-style: decimal;
}

.content-styles li {
    margin-bottom: 8px;
}

.content-styles blockquote {
    margin: 15px 0;
    padding: 20px;
    border-left: 3px solid var(--green);
    background-color: var(--border-color);
    border-radius: 0 5px 5px 0;
}

.content-styles blockquote p:last-child {
    margin-bottom: 0;
}

/* --- 14. Our Services Section --- */
.our-services {
    padding: 80px 0;
    background-color: var(--bg-color);
    border-top: 1px solid var(--border-color);
}
.our-services__title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 42px;
}
.our-services__content-wrapper {
    display: grid;
    grid-template-columns: 1fr 2.5fr; /* Левая колонка уже, правая шире */
    gap: 60px;
}
.our-services__tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.our-services__tab-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    font-size: 20px;
    font-weight: 500;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    color: var(--text-color);
    opacity: 0.6;
    transition: all 0.3s ease;
}
.our-services__tab-item:hover {
    opacity: 1;
    color: var(--green);
}
.our-services__tab-item.is-active {
    opacity: 1;
    color: var(--green);
    border-bottom-color: var(--green);
}
.our-services__tab-arrow {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
    transform: translateX(-10px);
    opacity: 0;
}
.our-services__tab-item.is-active .our-services__tab-arrow {
    transform: translateX(0);
    opacity: 1;
}
.our-services__panel {
    display: none;
    animation: fadeIn 0.5s ease;
}
.our-services__panel.is-active {
    display: block;
}
.our-services__panel-description {
    margin-bottom: 30px;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- 15. Car Buyback Page --- */
.page-hero {
    padding: 60px 0;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    background-size: cover;
    background-position: center center;
    transition: padding 0.3s ease;
}

.page-hero:not(.has-overlay) {
    padding: 30px 0 20px;
    border-bottom: none;
}

.page-hero__title {
    font-size: 52px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--white);
}

body.page-template-template-faq .page-hero__title {
    font-size: 36px;
}

body.page-template-template-contacts .page-hero__title {
    opacity: .5;
}

/* Стилі для фону та оверлею */
.page-hero[style] { /* Застосовується тільки, якщо є фонове зображення */
    padding: 60px 0;
    color: var(--white);
    border-bottom: none;
}

.page-hero.has-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(18, 18, 18, 0.6);
    z-index: 1;
}

.page-hero:not(.has-overlay) .page-hero__title,
.page-hero:not(.has-overlay) .breadcrumbs,
.page-hero:not(.has-overlay) .breadcrumbs .separator,
.page-hero:not(.has-overlay) .breadcrumbs a {
    color: var(--text-color);
}

body.page-template-template-car-buyback .page-hero:not(.has-overlay) .page-hero__title,
body.page-template-template-trade-in .page-hero:not(.has-overlay) .page-hero__title,
body.page-template-template-leasing .page-hero:not(.has-overlay) .page-hero__title,
body.page-template-template-commission .page-hero:not(.has-overlay) .page-hero__title {
    display: none;
}

body.page-template-template-faq .page-hero:not(.has-overlay) .breadcrumbs ol {
    justify-content: center;
}

body.page-template-template-faq .page-hero:not(.has-overlay) {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.page-hero:not(.has-overlay) .breadcrumbs ol,
.page-template-template-contacts .breadcrumbs ol {
    justify-content: flex-start;
}

.page-hero .container {
    position: relative;
    z-index: 2;
}

.page-content {
    padding: 80px 0;
}

body.page-template-template-car-buyback .page-hero:not(.has-overlay) ~ .page-content,
body.page-template-template-trade-in .page-hero:not(.has-overlay) ~ .page-content,
body.page-template-template-leasing .page-hero:not(.has-overlay) ~ .page-content,
body.page-template-template-commission .page-hero:not(.has-overlay) ~ .page-content,
body.page-template-template-faq .page-hero:not(.has-overlay) ~ .page-content {
    padding-top: 0;
}

body.page-template-template-faq .page-hero:not(.has-overlay) ~ .page-content {
    text-align: center;
    padding-bottom: 0;
}

.buyback-criteria,
.buyback-steps,
.commission-steps {
    padding: 60px 0;
    background-color: var(--bg-color);
    border-top: 1px solid var(--border-color);
}

.buyback-criteria {
    border-top: none;
}

.buyback-steps {
    padding-bottom: 0;
}

.buyback-criteria__title,
.buyback-steps__title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 42px;
}

.buyback-steps__content,
.buyback-criteria__content {
    margin-top: 60px; /* Отступ от сетки с этапами */
    max-width: 800px; /* Опционально: можно ограничить ширину для лучшей читаемости */
    margin-left: auto;
    margin-right: auto;
}

.buyback-steps__content ul {
    column-count: 2;
}

/* --- Car Buyback Page - Content Grid --- */
.buyback-content-grid,
.tradein-content-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Текст занимает чуть больше места */
    gap: 60px;
    align-items: center;
}

.buyback-content-grid__text .content-styles ul {
    column-count: 3;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.buyback-content-grid__text .content-styles ul li {
    position: relative;
    padding-left: 30px; /* Створює місце для іконки */
    margin-bottom: 1em; /* Зберігає стандартний відступ між пунктами */
}

.buyback-content-grid__text .content-styles ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px; /* Регулює положення іконки по вертикалі */
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23018938' d='M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4v28z'/%3E%3Cpath fill='%23FFF' d='M29.28 6.362a2.502 2.502 0 0 0-3.458.736L14.936 23.877l-5.029-4.65a2.5 2.5 0 1 0-3.394 3.671l7.209 6.666c.48.445 1.09.665 1.696.665c.673 0 1.534-.282 2.099-1.139c.332-.506 12.5-19.27 12.5-19.27a2.5 2.5 0 0 0-.737-3.458z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.buyback-content-grid__button-wrapper {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.buyback-content-grid__media,
.tradein-content-grid__media {
    width: 100%;
    height: 100%;
    position: relative;
}

.buyback-content-grid__media img,
.buyback-content-grid__media video,
.tradein-content-grid__media img,
.tradein-content-grid__media video {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.buyback-content-grid__media img,
.tradein-content-grid__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.tradein-button-wrapper {
    margin: 15px 0;
    display: flex;
    justify-content: center;
}

/* --- 16. Car Archive / Catalog Page --- */
.catalog-page-content {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px 40px;
    padding: 30px 30px 60px;
}

.catalog-page-content .breadcrumbs {
    grid-column: span 2;
}

.catalog-page-content .breadcrumbs ol {
    justify-content: flex-start;
}

/* Filters Sidebar */
.catalog-filters {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    height: fit-content;
    position: sticky;
    top: 100px; /* Header height + margin */
}
.filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.filters-header h3 {
    margin: 0;
    font-size: 20px;
}
.reset-filters {
    background: none;
    border: none;
    color: var(--green);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}
.filter-group {
    margin-bottom: 8px;
}
.filter-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    opacity: 0.8;
}
.filter-group select, .filter-group input[type="number"], .catalog-sort select {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 15px;
}
.filter-group select option:disabled {
    color: #999;
    background-color: rgba(128, 128, 128, 0.1);
}
.filter-group input[type="number"] {
    -moz-appearance: textfield;
}
.filter-group input::-webkit-outer-spin-button,
.filter-group input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.filter-group-range .range-inputs {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.filter-group .range-inputs {
    display: flex;
    gap: 10px;
}
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
}


/* Range Slider Styles (noUiSlider) */
.noUi-target {
    background: var(--border-color) !important;
    border: none !important;
    border-radius: 4px !important;
    height: 6px !important;
    box-shadow: none !important;
}
.noUi-connect {
    background: var(--green) !important;
}
.noUi-handle {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    border: 3px solid var(--bg-color) !important;
    background: var(--text-color) !important;
    right: -9px !important;
    top: -6px !important;
    box-shadow: none !important;
    cursor: grab !important;
}
.noUi-handle:focus {
    outline: none !important;
}
.noUi-handle::before, .noUi-handle::after {
    display: none !important;
}

/* Main Catalog Area */
.catalog-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.catalog-sort {
    display: flex;
    align-items: center;
    gap: 10px;
}
.catalog-sort label {
    flex-shrink: 0;
}
.catalog-sort .choices {
    min-width: 250px;
}
.catalog-view-switcher {
    display: flex;
    gap: 5px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 4px;
}
.view-btn {
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.view-btn svg {
    width: 24px;
    height: 24px;
    fill: var(--text-color);
    opacity: 0.5;
    transition: all 0.2s ease;
}
.view-btn:hover svg, .view-btn.is-active svg {
    opacity: 1;
    fill: var(--green);
}
.view-btn.is-active {
    background-color: var(--border-color);
}

/* Car Listings Grid */
.car-listings-grid {
    display: grid;
    gap: 30px;
    position: relative;
    transition: opacity 0.3s ease;
}
.car-listings-grid.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--bg-color-rgb), 0.7);
    z-index: 10;
    backdrop-filter: blur(2px);
}
.car-listings-grid.view-grid {
    grid-template-columns: repeat(2, 1fr);
}
.car-listings-grid.view-list {
    grid-template-columns: 1fr;
}

.car-listings-grid.view-list .car-card__image-link {
    aspect-ratio: 4 / 3;
}
.no-cars-found {
    grid-column: 1 / -1; /* Span all columns */
    text-align: center;
    padding: 40px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
}

/* New Car Card Styles */
.car-card__image-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}
.car-card__image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.car-card:hover .car-card__image-link img {
    transform: scale(1.05);
}
.car-card__status-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    color: var(--white);
    z-index: 2;
}
.status--available { background-color: var(--green); }
.status--preparing { background-color: #f39c12; }
.status--reserved { background-color: #3498db; }
.status--sold { background-color: #e74c3c; }

.car-card__category-badge {
    position: absolute;
    top: 50px;
    left: 15px; /* Размещаем справа */
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    color: var(--white);
    z-index: 2;
}
.category--our-car { background-color: #3498db; } /* Синий цвет для "Наше авто" */
.category--verified-car { background-color: #5b5b5b; } /* Фиолетовый для "Перевірене авто" */

.car-card__image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--white);
    background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    z-index: 1;
}
.overlay__car-name {
    font-weight: 600;
}
.overlay__car-price {
    font-size: 20px;
    font-weight: 700;
}
.car-card__specs {
    display: flex;
    gap: 15px;
    padding: 15px;
    border-top: 1px solid var(--border-color);
}
.car-card__spec-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    opacity: 0.8;
}
.car-card__spec-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* List View Styles */
.view-list .car-card {
    display: flex;
    flex-direction: row;
}
.view-list .car-card__image-wrapper {
    width: 300px;
    flex-shrink: 0;
    aspect-ratio: 4 / 3;
}
.view-list .car-card__specs {
    flex-grow: 1;
    flex-wrap: wrap;
    align-content: center;
}

/* Pagination */
.catalog-pagination {
    margin-top: 40px;
}
.catalog-pagination .page-numbers {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.catalog-pagination .page-numbers a,
.catalog-pagination .page-numbers span {
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    transition: all 0.2s ease;
}
.catalog-pagination .page-numbers a:hover {
    border-color: var(--green);
    background-color: var(--green);
    color: var(--white);
}
.catalog-pagination .page-numbers .current {
    border-color: var(--green);
    background-color: var(--green);
    color: var(--white);
}

/* SEO Text & Sold Cars Section */
.catalog-seo-text {
    padding: 60px 0 30px;
    border-top: 1px solid var(--border-color);
}
.sold-cars-section {
    padding: 30px 0 60px;
    background-color: var(--bg-color);
}
.sold-cars__title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 42px;
}

/* --- Стили для SEO-блока с иконками в каталоге --- */

.catalog-seo-text .seo-feature-grid {
    list-style: none;
    padding: 0;
    margin-top: 40px; /* Отступ от текста выше */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.catalog-seo-text .seo-feature-grid li {
    text-align: center;
    border: 1px solid var(--border-color);
    padding: 40px 30px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.catalog-seo-text .seo-feature-grid li:hover {
    transform: translateY(-5px);
    border-color: var(--green);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Создаем псевдо-элемент для иконки */
.catalog-seo-text .seo-feature-grid li::before {
    content: '';
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 25px;
    background-color: var(--green-light); /* Цвет иконки */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Уникальные иконки для каждого пункта */
.catalog-seo-text .seo-feature-grid li:nth-child(1)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V7H9V5Z' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 5H7C5.89543 5 5 5.89543 5 7V19C5 20.1046 5.89543 21 7 21H10M15 5H17C18.1046 5 19 5.89543 19 7V12' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13 19L15 21L20 16' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V7H9V5Z' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 5H7C5.89543 5 5 5.89543 5 7V19C5 20.1046 5.89543 21 7 21H10M15 5H17C18.1046 5 19 5.89543 19 7V12' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13 19L15 21L20 16' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.catalog-seo-text .seo-feature-grid li:nth-child(2)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='%23000000' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.449 6.748c-0.337-0.155-0.737-0.096-1.017 0.152l-5.041 4.528-4.551-4.669 4.506-5.204c0.245-0.283 0.305-0.673 0.152-1.016s-0.489-0.553-0.86-0.553h-0.271c-2.785 0-7.593 0.239-9.739 2.417l-0.433 0.43c-2.29 2.337-2.697 6.168-1.49 9.081l-11.54 11.778c-1.556 1.578-1.556 4.135 0 5.713l1.409 1.428c0.778 0.788 1.798 1.183 2.818 1.183s2.040-0.395 2.817-1.183l11.71-11.804c1.107 0.599 2.625 0.989 3.899 0.989 2.043 0 3.98-0.824 5.454-2.32l0.427-0.433c2.331-2.364 2.296-7.416 2.306-9.638 0.001-0.378-0.216-0.721-0.554-0.878zM28.302 15.906l-0.371 0.433c-1.117 1.134-2.578 1.677-4.114 1.677-0.76 0-1.784-0.143-2.476-0.431-0.625-0.259-1.206-0.634-1.725-1.107l-12.818 12.925c-0.376 0.382-0.876 0.592-1.408 0.592s-1.032-0.21-1.409-0.592l-1.408-1.427c-0.777-0.788-0.777-2.070-0.001-2.857l12.524-12.777c-0.42-0.611-0.706-1.278-0.877-1.968h-0.001c-0.482-1.95-0.201-4.644 1.313-6.189l0.431-0.435c1.298-1.317 4.67-1.707 6.537-1.822l-3.668 4.236c-0.328 0.379-0.311 0.95 0.038 1.309l5.798 5.948c0.352 0.362 0.92 0.383 1.299 0.047l4.082-3.676c-0.122 1.98-0.506 4.856-1.748 6.115z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg fill='%23000000' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.449 6.748c-0.337-0.155-0.737-0.096-1.017 0.152l-5.041 4.528-4.551-4.669 4.506-5.204c0.245-0.283 0.305-0.673 0.152-1.016s-0.489-0.553-0.86-0.553h-0.271c-2.785 0-7.593 0.239-9.739 2.417l-0.433 0.43c-2.29 2.337-2.697 6.168-1.49 9.081l-11.54 11.778c-1.556 1.578-1.556 4.135 0 5.713l1.409 1.428c0.778 0.788 1.798 1.183 2.818 1.183s2.040-0.395 2.817-1.183l11.71-11.804c1.107 0.599 2.625 0.989 3.899 0.989 2.043 0 3.98-0.824 5.454-2.32l0.427-0.433c2.331-2.364 2.296-7.416 2.306-9.638 0.001-0.378-0.216-0.721-0.554-0.878zM28.302 15.906l-0.371 0.433c-1.117 1.134-2.578 1.677-4.114 1.677-0.76 0-1.784-0.143-2.476-0.431-0.625-0.259-1.206-0.634-1.725-1.107l-12.818 12.925c-0.376 0.382-0.876 0.592-1.408 0.592s-1.032-0.21-1.409-0.592l-1.408-1.427c-0.777-0.788-0.777-2.070-0.001-2.857l12.524-12.777c-0.42-0.611-0.706-1.278-0.877-1.968h-0.001c-0.482-1.95-0.201-4.644 1.313-6.189l0.431-0.435c1.298-1.317 4.67-1.707 6.537-1.822l-3.668 4.236c-0.328 0.379-0.311 0.95 0.038 1.309l5.798 5.948c0.352 0.362 0.92 0.383 1.299 0.047l4.082-3.676c-0.122 1.98-0.506 4.856-1.748 6.115z'/%3E%3C/svg%3E");
}
.catalog-seo-text .seo-feature-grid li:nth-child(3)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='%23000000' viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M174,175.3c0.8,0.3,2.1,0.7,3.6,0.6c2.4-0.1,4.6-1.1,6.2-2.7c1.8-1.8,2.7-4.2,2.7-6.7c-0.2-15.1,9.4-28.3,23.7-32.8 c1-0.3,2-0.8,2.9-1.5c2-1.5,3.3-3.7,3.6-6c0.4-2.5-0.2-5-1.7-7.1c-9-12.1-9.1-28.4-0.1-40.5l1.1-1.4l0.5-1.5c0.8-2.4,0.5-5-0.6-7 c-1.1-2.3-3.1-4-5.5-4.7c-14.3-4.6-23.9-17.7-23.7-32.7c0-1.2-0.2-2.2-0.5-3.2c-0.8-2.3-2.5-4.2-4.8-5.4c-2.2-1-4.7-1.2-7-0.4 c-3.5,1.2-7.2,1.8-10.9,1.8c-11,0-21.4-5.3-27.7-14.3c-0.7-0.9-1.5-1.7-2.2-2.2c-4.2-3-10-2-13,2.2c-6.4,9-16.7,14.3-27.7,14.3 c-3.8,0-7.4-0.6-10.8-1.8c-3.2-1.1-7.3-0.3-9.7,2.2c-1.8,1.8-2.7,4.2-2.7,6.6c0.2,15.1-9.4,28.3-23.7,32.7c-1.1,0.3-2,0.8-3,1.5 c-4.1,3.1-4.9,8.9-1.9,13.1c9,12.1,9,28.4,0,40.6c-0.6,0.8-1.1,1.8-1.4,2.7c-0.7,2.4-0.5,4.8,0.6,7.2c1.2,2.2,3.2,3.8,5.4,4.5 c14.4,4.6,23.9,17.8,23.7,32.6c-0.1,1.2,0.1,2.3,0.5,3.4c0.8,2.3,2.5,4.2,4.8,5.4c2.3,1,4.7,1.2,7,0.4c3.6-1.2,7.4-1.8,11.1-1.8 c11.1,0,21.1,5.2,27.6,14.3c0.6,0.8,1.4,1.6,2.2,2.2c1.6,1.1,3.5,1.7,5.4,1.7c0.5,0,1.1,0,1.6-0.1c2.5-0.4,4.6-1.8,6-3.8 C144.3,175.6,159.7,170.5,174,175.3z M127.9,181.7c-8.2-11.3-21.3-18-35.2-18c-4.6,0-9.3,0.7-13.6,2.2c0-19-12.1-35.7-30-41.4 c11.2-15.4,11.2-35.9,0.1-51.3c18-5.9,30-22.4,30.1-41.4c4.3,1.4,8.8,2.1,13.4,2.1c13.9,0,27.1-6.7,35.3-17.9 c8.2,11.2,21.4,17.9,35.4,17.9c4.7,0,9.3-0.7,13.4-2.2c0,18.8,11.9,35.3,29.9,41.4c-11.1,15.4-11.1,35.8,0,51.3 c-18,5.9-29.9,22.4-30,41.4C158.6,160,139.2,166.3,127.9,181.7z'/%3E%3Cpath d='M168.4,92.1c-15.3-6.4-27.3-18.3-33.8-33.6c-1.1-2.7-3.8-4.5-6.7-4.5c-2.9,0-5.6,1.8-6.7,4.4 c-6.5,15.2-18.4,27.1-33.6,33.6c-2.7,1.1-4.5,3.7-4.5,6.6c0,2.9,1.7,5.5,4.4,6.7c14.7,6.4,26.9,18.8,33.6,34 c1.2,2.7,3.8,4.4,6.6,4.4c0,0,0,0,0,0c2.9,0,5.5-1.7,6.6-4.4c6.4-14.8,18.8-27.1,34.1-33.9c2.6-1.2,4.3-3.8,4.3-6.7 C172.8,95.8,171.1,93.2,168.4,92.1z M127.8,130.6c-7.2-13.6-18.3-24.8-31.5-31.9c13.6-7,24.6-17.9,31.6-31.5 c7,13.7,18.1,24.7,31.8,31.6C146,106.1,134.8,117.3,127.8,130.6z'/%3E%3Cpath d='M98.6,188.8c-2.3-1.5-5.3-0.8-6.8,1.4l-26.2,40.1l-13.1-26.9l-27.3-0.1l27.4-42c1.5-2.3,0.8-5.3-1.4-6.8 c-2.3-1.5-5.3-0.8-6.8,1.4L7.1,213.1l39.3,0.1l18,36.9l35.6-54.5C101.5,193.3,100.9,190.2,98.6,188.8z'/%3E%3Cpath d='M211.5,155.9c-1.5-2.3-4.5-2.9-6.8-1.4c-2.3,1.5-2.9,4.5-1.4,6.8l27.5,42l-27.4,0.1l-13.1,26.9l-26.2-40.1 c-1.5-2.3-4.5-2.9-6.8-1.4c-2.3,1.5-2.9,4.5-1.4,6.8l35.7,54.5l18-36.9l39.3-0.1L211.5,155.9z'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg fill='%23000000' viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M174,175.3c0.8,0.3,2.1,0.7,3.6,0.6c2.4-0.1,4.6-1.1,6.2-2.7c1.8-1.8,2.7-4.2,2.7-6.7c-0.2-15.1,9.4-28.3,23.7-32.8 c1-0.3,2-0.8,2.9-1.5c2-1.5,3.3-3.7,3.6-6c0.4-2.5-0.2-5-1.7-7.1c-9-12.1-9.1-28.4-0.1-40.5l1.1-1.4l0.5-1.5c0.8-2.4,0.5-5-0.6-7 c-1.1-2.3-3.1-4-5.5-4.7c-14.3-4.6-23.9-17.7-23.7-32.7c0-1.2-0.2-2.2-0.5-3.2c-0.8-2.3-2.5-4.2-4.8-5.4c-2.2-1-4.7-1.2-7-0.4 c-3.5,1.2-7.2,1.8-10.9,1.8c-11,0-21.4-5.3-27.7-14.3c-0.7-0.9-1.5-1.7-2.2-2.2c-4.2-3-10-2-13,2.2c-6.4,9-16.7,14.3-27.7,14.3 c-3.8,0-7.4-0.6-10.8-1.8c-3.2-1.1-7.3-0.3-9.7,2.2c-1.8,1.8-2.7,4.2-2.7,6.6c0.2,15.1-9.4,28.3-23.7,32.7c-1.1,0.3-2,0.8-3,1.5 c-4.1,3.1-4.9,8.9-1.9,13.1c9,12.1,9,28.4,0,40.6c-0.6,0.8-1.1,1.8-1.4,2.7c-0.7,2.4-0.5,4.8,0.6,7.2c1.2,2.2,3.2,3.8,5.4,4.5 c14.4,4.6,23.9,17.8,23.7,32.6c-0.1,1.2,0.1,2.3,0.5,3.4c0.8,2.3,2.5,4.2,4.8,5.4c2.3,1,4.7,1.2,7,0.4c3.6-1.2,7.4-1.8,11.1-1.8 c11.1,0,21.1,5.2,27.6,14.3c0.6,0.8,1.4,1.6,2.2,2.2c1.6,1.1,3.5,1.7,5.4,1.7c0.5,0,1.1,0,1.6-0.1c2.5-0.4,4.6-1.8,6-3.8 C144.3,175.6,159.7,170.5,174,175.3z M127.9,181.7c-8.2-11.3-21.3-18-35.2-18c-4.6,0-9.3,0.7-13.6,2.2c0-19-12.1-35.7-30-41.4 c11.2-15.4,11.2-35.9,0.1-51.3c18-5.9,30-22.4,30.1-41.4c4.3,1.4,8.8,2.1,13.4,2.1c13.9,0,27.1-6.7,35.3-17.9 c8.2,11.2,21.4,17.9,35.4,17.9c4.7,0,9.3-0.7,13.4-2.2c0,18.8,11.9,35.3,29.9,41.4c-11.1,15.4-11.1,35.8,0,51.3 c-18,5.9-29.9,22.4-30,41.4C158.6,160,139.2,166.3,127.9,181.7z'/%3E%3Cpath d='M168.4,92.1c-15.3-6.4-27.3-18.3-33.8-33.6c-1.1-2.7-3.8-4.5-6.7-4.5c-2.9,0-5.6,1.8-6.7,4.4 c-6.5,15.2-18.4,27.1-33.6,33.6c-2.7,1.1-4.5,3.7-4.5,6.6c0,2.9,1.7,5.5,4.4,6.7c14.7,6.4,26.9,18.8,33.6,34 c1.2,2.7,3.8,4.4,6.6,4.4c0,0,0,0,0,0c2.9,0,5.5-1.7,6.6-4.4c6.4-14.8,18.8-27.1,34.1-33.9c2.6-1.2,4.3-3.8,4.3-6.7 C172.8,95.8,171.1,93.2,168.4,92.1z M127.8,130.6c-7.2-13.6-18.3-24.8-31.5-31.9c13.6-7,24.6-17.9,31.6-31.5 c7,13.7,18.1,24.7,31.8,31.6C146,106.1,134.8,117.3,127.8,130.6z'/%3E%3Cpath d='M98.6,188.8c-2.3-1.5-5.3-0.8-6.8,1.4l-26.2,40.1l-13.1-26.9l-27.3-0.1l27.4-42c1.5-2.3,0.8-5.3-1.4-6.8 c-2.3-1.5-5.3-0.8-6.8,1.4L7.1,213.1l39.3,0.1l18,36.9l35.6-54.5C101.5,193.3,100.9,190.2,98.6,188.8z'/%3E%3Cpath d='M211.5,155.9c-1.5-2.3-4.5-2.9-6.8-1.4c-2.3,1.5-2.9,4.5-1.4,6.8l27.5,42l-27.4,0.1l-13.1,26.9l-26.2-40.1 c-1.5-2.3-4.5-2.9-6.8-1.4c-2.3,1.5-2.9,4.5-1.4,6.8l35.7,54.5l18-36.9l39.3-0.1L211.5,155.9z'/%3E%3C/g%3E%3C/svg%3E");
}
.catalog-seo-text .seo-feature-grid li:nth-child(4)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.43361 9.90622C5.34288 10.3793 4.29751 10.6158 4.04881 11.4156C3.8001 12.2153 4.51276 13.0487 5.93808 14.7154L6.30683 15.1466C6.71186 15.6203 6.91438 15.8571 7.00548 16.1501C7.09659 16.443 7.06597 16.759 7.00474 17.3909L6.94899 17.9662C6.7335 20.19 6.62575 21.3019 7.27688 21.7962C7.928 22.2905 8.90677 21.8398 10.8643 20.9385L11.3708 20.7053C11.927 20.4492 12.2052 20.3211 12.5 20.3211C12.7948 20.3211 13.073 20.4492 13.6292 20.7053L14.1357 20.9385C16.0932 21.8398 17.072 22.2905 17.7231 21.7962C18.3742 21.3019 18.2665 20.19 18.051 17.9662M19.0619 14.7154C20.4872 13.0487 21.1999 12.2153 20.9512 11.4156C20.7025 10.6158 19.6571 10.3793 17.5664 9.90622L17.0255 9.78384C16.4314 9.64942 16.1343 9.5822 15.8958 9.40114C15.6573 9.22007 15.5043 8.94564 15.1984 8.3968L14.9198 7.89712C13.8432 5.96571 13.3048 5 12.5 5C11.6952 5 11.1568 5.96571 10.0802 7.89712' stroke='%231C274C' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M4.98987 2C4.98987 2 5.2778 3.45771 5.90909 4.08475C6.54037 4.71179 8 4.98987 8 4.98987C8 4.98987 6.54229 5.2778 5.91525 5.90909C5.28821 6.54037 5.01013 8 5.01013 8C5.01013 8 4.7222 6.54229 4.09091 5.91525C3.45963 5.28821 2 5.01013 2 5.01013C2 5.01013 3.45771 4.7222 4.08475 4.09091C4.71179 3.45963 4.98987 2 4.98987 2Z' stroke='%231C274C' stroke-linejoin='round'/%3E%3Cpath d='M18 5H20M19 6L19 4' stroke='%231C274C' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.43361 9.90622C5.34288 10.3793 4.29751 10.6158 4.04881 11.4156C3.8001 12.2153 4.51276 13.0487 5.93808 14.7154L6.30683 15.1466C6.71186 15.6203 6.91438 15.8571 7.00548 16.1501C7.09659 16.443 7.06597 16.759 7.00474 17.3909L6.94899 17.9662C6.7335 20.19 6.62575 21.3019 7.27688 21.7962C7.928 22.2905 8.90677 21.8398 10.8643 20.9385L11.3708 20.7053C11.927 20.4492 12.2052 20.3211 12.5 20.3211C12.7948 20.3211 13.073 20.4492 13.6292 20.7053L14.1357 20.9385C16.0932 21.8398 17.072 22.2905 17.7231 21.7962C18.3742 21.3019 18.2665 20.19 18.051 17.9662M19.0619 14.7154C20.4872 13.0487 21.1999 12.2153 20.9512 11.4156C20.7025 10.6158 19.6571 10.3793 17.5664 9.90622L17.0255 9.78384C16.4314 9.64942 16.1343 9.5822 15.8958 9.40114C15.6573 9.22007 15.5043 8.94564 15.1984 8.3968L14.9198 7.89712C13.8432 5.96571 13.3048 5 12.5 5C11.6952 5 11.1568 5.96571 10.0802 7.89712' stroke='%231C274C' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M4.98987 2C4.98987 2 5.2778 3.45771 5.90909 4.08475C6.54037 4.71179 8 4.98987 8 4.98987C8 4.98987 6.54229 5.2778 5.91525 5.90909C5.28821 6.54037 5.01013 8 5.01013 8C5.01013 8 4.7222 6.54229 4.09091 5.91525C3.45963 5.28821 2 5.01013 2 5.01013C2 5.01013 3.45771 4.7222 4.08475 4.09091C4.71179 3.45963 4.98987 2 4.98987 2Z' stroke='%231C274C' stroke-linejoin='round'/%3E%3Cpath d='M18 5H20M19 6L19 4' stroke='%231C274C' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.catalog-seo-text .seo-feature-grid li b {
    display: block;
    font-size: 22px;
    margin-bottom: 15px;
    color: var(--text-color);
    font-weight: 400;
    line-height: 1.2;
}

.catalog-seo-text .seo-feature-grid li span {
    font-size: 15px;
    opacity: .7;
    line-height: 1.2;
}

/* --- 1. Filter Accordion Styles --- */
.filter-group__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    padding: 2px 0; /* Небольшой отступ для удобства клика */
}

.filter-group__header label {
    margin-bottom: 0;
    font-weight: 600; /* Делаем заголовки жирнее */
    font-size: 16px;
}

.filter-group__toggle {
    width: 16px;
    height: 16px;
    position: relative;
    transition: transform 0.3s ease;
}

.filter-group__toggle::before,
.filter-group__toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    background-color: currentColor;
    transform-origin: center;
}

.filter-group__toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.filter-group__toggle::before {
     transform: translate(-50%, -50%);
}

.filter-group.is-collapsed .filter-group__toggle::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.filter-group__content {
    max-height: 1000px; /* Достаточно большая высота */
    /* overflow: hidden; */
    padding-top: 5px; /* Отступ сверху от контента */
    transition: max-height 0.4s ease, padding-top 0.4s ease;
}

.filter-group.is-collapsed .filter-group__content {
    max-height: 0;
    padding-top: 0;
    overflow: hidden;
}

/* --- 2. Custom Checkbox Styles --- */
.checkbox-group .label { /* Изменил селектор для избежания конфликтов */
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    display: none; /* Скрываем стандартный чекбокс */
}

.checkbox-group .label::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.checkbox-group input[type="checkbox"]:checked + .label::before {
    background-color: var(--green);
    border-color: var(--green);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- 3. Custom Select (Choices.js) Styles --- */
.choices {
    margin-bottom: 0;
}

.choices__inner {
    background-color: var(--bg-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 5px;
    color: var(--text-color);
    padding: 6px 10px !important;
    font-size: 15px !important;
    min-height: auto !important;
    transition: border-color 0.3s; /* Добавляем плавный переход */
}

.choices.is-focused .choices__inner {
    border-color: var(--green) !important;
}

.choices[data-type*="select-one"]::after {
    border-color: var(--text-color) transparent transparent !important;
    right: 12.5px;
    margin-top: -3px;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.choices.is-open[data-type*="select-one"]::after {
    border-color: transparent transparent var(--text-color) !important;
    margin-top: -8px;
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
    background-color: var(--bg-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 5px;
    z-index: 15 !important;
}

.choices__list--dropdown .choices__item--selectable {
    padding-right: 10px;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--border-color) !important;
}

.choices__item {
    font-size: 15px;
    color: var(--text-color) !important;
}
.choices__list--dropdown .choices__item--selectable[data-disabled] {
    background-color: transparent !important;
    opacity: 0.5; /* Немного уменьшим прозрачность для лучшей читаемости */
    color: var(--text-color) !important;
}

/* --- 17. Single Car Page --- */
.single-car-container {
    padding: 30px 30px 40px;
}
.single-car__title {
    margin-bottom: 15px;
    font-size: 36px;
}
.single-car-grid {
    display: grid;
    grid-template-columns: calc(calc(100% - 40px) * 0.6) calc(calc(100% - 40px) * 0.4);
    gap: 40px;
    margin-bottom: 60px;
    margin-top: 30px;
}
.single-car__gallery {
    position: relative;
}
.single-car__gallery .swiper-slide {
    aspect-ratio: 16 / 10;
}
.single-car__gallery .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
/* --- Single Car Page Notify Button --- */
.car-notify-block {
    margin-bottom: 30px; /* Такий самий відступ, як у .car-price__wrapper-block */
}

.car-notify-block .button {
    width: 100%;
    text-align: center;
}
.swiper-main-gallery {
    margin-bottom: 15px;
    border-radius: 8px;
}
.swiper-main-gallery .swiper-button-next,
.swiper-main-gallery .swiper-button-prev {
    background-color: var(--green);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    opacity: .8;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    transition: all .3s ease;
}
.swiper-main-gallery .swiper-button-prev {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='-5 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:sketch='http://www.bohemiancoding.com/sketch/ns' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ctitle%3Echevron-left%3C/title%3E%3Cdesc%3ECreated with Sketch Beta.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' sketch:type='MSPage'%3E%3Cg id='Icon-Set' sketch:type='MSLayerGroup' transform='translate(-421.000000, -1195.000000)' fill='%23fff'%3E%3Cpath d='M423.429,1206.98 L434.686,1196.7 C435.079,1196.31 435.079,1195.67 434.686,1195.28 C434.293,1194.89 433.655,1194.89 433.263,1195.28 L421.282,1206.22 C421.073,1206.43 420.983,1206.71 420.998,1206.98 C420.983,1207.26 421.073,1207.54 421.282,1207.75 L433.263,1218.69 C433.655,1219.08 434.293,1219.08 434.686,1218.69 C435.079,1218.29 435.079,1217.66 434.686,1217.27 L423.429,1206.98' id='chevron-left' sketch:type='MSShapeGroup'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.swiper-main-gallery .swiper-button-next {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='-5 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:sketch='http://www.bohemiancoding.com/sketch/ns' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ctitle%3Echevron-right%3C/title%3E%3Cdesc%3ECreated with Sketch Beta.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' sketch:type='MSPage'%3E%3Cg id='Icon-Set' sketch:type='MSLayerGroup' transform='translate(-473.000000, -1195.000000)' fill='%23fff'%3E%3Cpath d='M486.717,1206.22 L474.71,1195.28 C474.316,1194.89 473.678,1194.89 473.283,1195.28 C472.89,1195.67 472.89,1196.31 473.283,1196.7 L484.566,1206.98 L473.283,1217.27 C472.89,1217.66 472.89,1218.29 473.283,1218.69 C473.678,1219.08 474.316,1219.08 474.71,1218.69 L486.717,1207.75 C486.927,1207.54 487.017,1207.26 487.003,1206.98 C487.017,1206.71 486.927,1206.43 486.717,1206.22' id='chevron-right' sketch:type='MSShapeGroup'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.swiper-main-gallery .swiper-button-next:hover,
.swiper-main-gallery .swiper-button-prev:hover {
    opacity: 1;
}
.swiper-thumb-gallery {
    height: auto;
}
.swiper-thumb-gallery .swiper-slide {
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.3s ease;
    aspect-ratio: 16 / 10;
}
.swiper-thumb-gallery .swiper-slide-thumb-active {
    opacity: 1;
}
.single-car__main-image-fallback {
    border-radius: 8px;
}
.car-price__wrapper-block {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background-color: var(--border-color);
    padding: 10px 20px;
    border-radius: 12px;
}

.car-price-block {
    /* Убираем фон и добавляем нижнюю границу для разделения */
    background-color: transparent;
    width: 100%;
}

.car-price--current {
    display: flex;
    align-items: center; /* Идеально для выравнивания текстов разного размера */
    gap: 15px;
    flex-wrap: wrap; /* На случай узких экранов */
}

.price-usd {
    font-size: 36px; /* Немного увеличим для акцента */
    font-weight: 700;
    color: var(--green);
    line-height: 1; /* Убираем лишнюю высоту строки */
}

.price-uah {
    font-size: 18px;
    opacity: 0.7;
}

.car-price--old {
    font-size: 18px; /* Делаем крупнее, чем UAH, но меньше основного */
    text-decoration: line-through;
    opacity: 0.5;
    margin-left: auto;
}

.car-specs__title {
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
.car-specs__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.car-specs__list li {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}
.car-specs__list li:last-child {
    border-bottom: none;
}
.spec-label {
    opacity: 0.7;
    padding-right: 10px;
}
.spec-value {
    font-weight: 500;
    text-align: right;
}

.car-action-buttons {
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    gap: 15px;
}
.car-action-buttons .button {
    width: 100%;
    text-align: center;
    text-transform: uppercase;
}

.car-action-buttons .button:nth-child(even) {
    background-color: var(--purple);
    border-color: var(--purple);
}

.single-car-content {
    border-top: 1px solid var(--border-color);
    padding-top: 40px;
}
.car-complectation, .car-description {
    margin-bottom: 40px;
}
.single-car-content h2 {
    font-size: 28px;
    margin-bottom: 20px;
}

/* --- Single Car Page - Features Grid (Комплектація) --- */
.car-features {
    margin-bottom: 40px;
}

.car-features-grid {
    display: grid;
    gap: 30px 40px; /* Вертикальный и горизонтальный отступ */
    /* 5 колонок на больших десктопах */
    grid-template-columns: repeat(5, 1fr); 
}

.car-features-column__title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--text-color);
}

.car-features-column__list ul {
    list-style-position: inside;
    padding-left: 0;
}

.car-features-column__list p:last-child,
.car-features-column__list ul:last-child {
    margin-bottom: 0;
}

/* --- Single Car Page Test Drive Button --- */
.car-test-drive-block {
    margin-bottom: 0; /* Отступ от блока с ценой */
}

.car-test-drive-block .button {
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    text-wrap: nowrap;
    display: flex;
}

/* --- About Us Page Hero --- */
.about-hero {
    padding: 30px 0 80px;
    background-color: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
}
.about-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
    margin-top: 30px;
}
.about-hero__image-wrapper {
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
}
.about-hero__image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}
.about-hero__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-weight: 300;
    font-size: 70px;
    font-family: 'Alta Regular';
}

.about-hero__title span {
    font-size: 26px;
    font-weight: 450;
    line-height: 1.3;
    letter-spacing: 1.2px;
    text-transform: unset;
    width: 100%;
    border-top: 1px solid var(--border-color);
    margin-top: 10px;
    padding-top: 20px;
    margin-bottom: 20px;
    font-family: var(--font-main);
}
.about-hero__subtitle {
    font-size: 18px;
    opacity: 0.8;
    line-height: 1.7;
}

.about-video-banner {
    width: 100%;
    height: 400px; /* Висота банера на десктопі */
    overflow: hidden; /* Обрізаємо все, що виходить за межі */
    position: relative; /* Для позиціонування відео */
    background-color: var(--black); /* Фоновий колір на випадок затримки завантаження */
}

.about-video-banner video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%); /* Центруємо відео */
    object-fit: cover; /* Масштабуємо відео, щоб воно покрило всю область */
}

/* --- Contacts Page --- */
.contacts-section {
    padding: 80px 0;
}
.contacts-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    align-items: flex-start;
}
.contact-item {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
}
.contact-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
}
.contact-item__title {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 1;
    margin-bottom: 15px;
    color: var(--green);
}
.contact-item__text {
    font-size: 18px;
    line-height: 1.6;
    opacity: 1;
}
.contact-item__link {
    display: block;
    font-size: 18px;
    margin-bottom: 5px;
    transition: color 0.3s;
}
.contact-item__link:hover {
    color: var(--green);
}
.working-hours-list {
    font-size: 18px;
}
.wh-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}
.wh-item__days {
    font-weight: 500;
}
.contact-socials {
    display: flex;
    gap: 15px;
}
.contact-socials__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--text-color);
    border-radius: 50%;
    transition: all 0.3s;
}
.contact-socials__link svg {
    width: 24px;
    height: 24px;
}

.contact-socials__link svg path,
.contact-socials__link svg circle {
    stroke: var(--text-color);
    transition: stroke 0.3s;
}
.contact-socials__link svg circle:last-child {
    fill: var(--text-color);
    transition: fill 0.3s;
}
.contact-socials__link:hover {
    border-color: var(--green);
    background-color: var(--green);
}
.contact-socials__link:hover svg path,
.contact-socials__link:hover svg circle {
    stroke: var(--white);
}

.contact-socials__link:hover svg circle:last-child {
    fill: var(--white);
}

.contact-messengers {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 15px;
}

.contact-messengers__link svg {
  width: 28px;
  height: 28px;
}

.contact-messengers__link svg path {
    color: var(--text-color);
    transition: all 0.3s ease;
}

.contact-messengers__link:hover svg path {
  color: var(--green);
}

.contact-item__phones {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-item__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.map-embed-wrapper {
    position: relative;
    width: 100%;
    padding-top: 75%;
    overflow: hidden;
    border-radius: 8px;
}
.map-embed-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.map-button {
    margin-top: 20px;
    width: 100%;
    text-align: center;
}

/* --- FAQ Page --- */
.faq-section {
    padding: 80px 0;
}
.faq-category-title {
    font-size: 32px;
    text-align: center;
    margin-top: 60px; /* Відступ над новою категорією */
    margin-bottom: 40px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    scroll-padding-top: 200px;
}

/* Прибираємо зайвий відступ у першого заголовка */
.faq-accordion > .faq-category-title:first-of-type {
    margin-top: 0;
}
.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
}
.faq-item {
    border-bottom: 1px solid var(--border-color);
}
.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    font-size: 20px;
    font-weight: 500;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color);
}
.faq-icon {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-left: 20px;
}
.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    background-color: currentColor;
    transition: transform 0.3s ease;
}
.faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}
.faq-icon::before {
    transform: translate(-50%, -50%);
}
.faq-item.is-active .faq-icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.faq-answer__content {
    padding-bottom: 25px;
}
/* --- FAQ Page - Anchor Links Menu --- */
.faq-anchors {
    margin-bottom: 60px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.faq-anchors__list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Дозволяє переносити посилання на новий рядок */
    gap: 20px; /* Вертикальний та горизонтальний відступи */
}

.faq-anchors__list a {
    position: relative;
    text-decoration: none;
    font-size: 16px;
    font-weight: 450;
    color: var(--text-color);
    background-color: var(--border-color);
    padding: 10px;
    line-height: 1;
    border-radius: 99px;
    transition: all 0.3s ease;;
}

.faq-anchors__list a:hover {
    background-color: var(--green-light);
}

/* --- 18. Breadcrumbs --- */
.breadcrumbs {
    margin-bottom: 15px;
    font-size: 14px;
    color: var(--white);
    opacity: 0.8;
}

body.car-template-default .breadcrumbs,
body.page-template-template-about .breadcrumbs,
body.post-type-archive-car .breadcrumbs {
    color: var(--text-color);
}

.breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.car-template-default .breadcrumbs ol,
body.page-template-template-about .breadcrumbs ol,
body.post-type-archive-car .breadcrumbs ol {
    justify-content: flex-start;
}

.breadcrumbs li {
    display: inline;
}

.breadcrumbs a {
    color: var(--white);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

body.car-template-default .breadcrumbs a,
body.page-template-template-about .breadcrumbs a,
body.post-type-archive-car .breadcrumbs a {
    color: var(--text-color);
}

.breadcrumbs a:hover {
    opacity: 0.7;
}

.breadcrumbs span[itemprop="name"] {
    display: inline-block;
}

/* Стили для разделителя */
.breadcrumbs .separator {
    margin: 0 8px;
    color: var(--white);
    opacity: 0.6;
}

body.car-template-default .breadcrumbs .separator,
body.page-template-template-about .breadcrumbs .separator,
body.post-type-archive-car .breadcrumbs .separator {
    color: var(--text-color);
}

.filters-toggle-button,
.close-filters-button,
.filters-overlay {
    display: none;
}

/* --- 19. Fluent Form Popup Styles --- */
.popup-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1010;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    
    /* Скрываем по умолчанию */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0s 0.3s;
}

.popup-wrapper.is-open {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

.popup-content {
    position: relative;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 40px;
    width: 100%;
    max-width: 550px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.popup-wrapper.is-open .popup-content {
    transform: scale(1);
}

.popup-close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: var(--text-color);
    opacity: 0.7;
    transition: opacity 0.3s;
}
.popup-close-button:hover {
    opacity: 1;
}
.popup-close-button svg {
    width: 24px;
    height: 24px;
}

/* Стили для контейнера формы внутри попапа */
.popup-form-container .fluentform {
    margin-top: 0 !important;
}

/* Блокируем скролл основной страницы при открытом попапе */
body.popup-open {
    overflow: hidden;
}

/* --- Commission Sale Page Styles --- */

/* Intro Grid */
.commission-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}
.commission-intro-grid__media {
    width: 100%;
    height: 100%;
    position: relative;
}
.commission-intro-grid__media img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    display: block;
    object-fit: cover;
    position: absolute;
    inset: 0;
}
.commission-intro-grid__button-wrapper {
    margin-top: 30px;
}

/* Included Services Section */
.commission-included .our-values__item-description {
    font-size: 16px; /* Збільшуємо шрифт для кращої читабельності */
}
.commission-included__note {
    margin-top: 60px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Other Ways to Sell Section */
.commission-other-ways {
    padding: 60px 0;
    background-color: var(--bg-color);
    border-top: 1px solid var(--border-color);
}
.commission-other-ways__title {
    text-align: center;
    margin-bottom: 60px;
    font-size: 42px;
}
.commission-other-ways__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}
.other-way-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.other-way-card__icon {
    width: 56px;
    height: 56px;
    color: var(--green);
    margin-bottom: 25px;
}
.other-way-card__icon svg {
    width: 100%;
    height: 100%;
}
.other-way-card__title {
    font-size: 24px;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.other-way-card__description {
    font-size: 16px;
    opacity: 0.8;
    margin-bottom: 30px;
    flex-grow: 1; /* Робить опис гнучким, щоб кнопка була внизу */
}

/* --- 6. Responsive Styles --- */
@media (max-width: 1200px) {
    .car-features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .header__container {
        padding: 0;
        /* Убираем боковые отступы у контейнера */
    }

    /* Верхний ряд становится единственным видимым рядом */
    .header__top-row {
        padding: 15px 20px;
        border-bottom: none;
        /* Убираем нижнюю границу */
    }

    /* Полностью скрываем нижний ряд с навигацией и переключателем темы */
    .header__bottom-row {
        display: none;
    }

    /* В верхнем ряду скрываем все, кроме логотипа */
    .header__section--right .header__contacts,
    .header__section--right .header__messengers,
    .header__section--right .header__actions,
    .header__section--left .header__lang-switcher {
        display: none;
    }

    /* Показываем кнопку бургера */
    .header__burger-button {
        display: flex;
    }

    .mobile-menu-panel {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--bg-color);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 80px 20px 40px;
        box-sizing: border-box;
        transform: translateX(-100%);
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        z-index: 1000;
        visibility: hidden;
        overflow-y: auto;
    }

    .mobile-menu-panel.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    .mobile-menu-panel .header__menu-list {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .mobile-menu-panel a {
        font-size: 22px;
    }

    .mobile-menu-panel .menu-item-has-children>a {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .mobile-menu-panel .header__menu-chevron {
        width: 16px;
        height: 16px;
        transition: transform 0.3s ease;
    }

    .mobile-menu-panel .menu-item-has-children.is-open>a>.header__menu-chevron {
        transform: rotate(180deg);
    }

    .mobile-menu-panel .sub-menu {
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.4s ease-in-out;
        background-color: rgba(255, 255, 255, 0.05);
        border-radius: 5px;
        margin-top: 0;
        position: static;
        box-shadow: none;
        border: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        padding: 0;
    }

    .mobile-menu-panel .sub-menu a {
        font-size: 18px;
        padding: 12px 10px;
    }

    .mobile-menu__footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
        margin-top: 40px;
        border-top: 1px solid var(--border-color);
        padding-top: 25px;
    }

    .mobile-menu__footer .header__actions,
    .mobile-menu__footer .header__contacts,
    .mobile-menu__footer .header__lang-switcher {
        display: flex;
    }

    .mobile-menu__footer .header__contacts {
        flex-direction: column;
        gap: 15px;
    }

    .mobile-menu__footer .header__contacts a {
        font-size: 22px;
    }

    .mobile-menu__nav-container a {
        font-size: 26px;
        padding: 10px 0;
        display: inline-flex;
    }

    .mobile-menu__footer .header__lang-switcher ul {
        gap: 20px;
    }

    .hero__grid {
        grid-template-columns: 1fr; /* Одна колонка */
        text-align: center;
        align-items: center;
    }
    
    .hero-form {
        margin-top: 40px;
    }

    .hero__main-title,
    .about-hero__title {
        font-size: 36px;
        margin-bottom: 20px;
    }

    .hero__subtitle {
        margin-bottom: 0;
    }

    .hero-form__title {
        text-transform: uppercase;
    }

    .hero__main-title span,
    .about-hero__title span {
        font-size: 18px;
        margin-top: 0;
    }

    .contact-section__container {
        grid-template-columns: 1fr;
    }

    .contact-section__image-wrapper {
        display: none;
        /* На мобильных скрываем картинку для экономии места */
    }

    .how-we-work__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .available-cars__grid,
    body.page-template-template-trade-in .available-cars__grid, 
    body.page-template-template-leasing .available-cars__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .our-values__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .our-services__content-wrapper {
        grid-template-columns: 1fr 2fr;
        gap: 40px;
    }

    .catalog-page-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .catalog-page-content .breadcrumbs {
        grid-column: span 1;
    }
    .catalog-filters {
        position: static;
    }
    .car-listings-grid.view-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .single-car-grid {
        grid-template-columns: 100%;
    }

    
    .buyback-content-grid,
    .tradein-content-grid {
        grid-template-columns: 1fr; /* Сетка в одну колонку */
        gap: 40px;
    }

    .footer__main {
        grid-template-columns: 1fr 1fr;
    }

    /* --- Стили для мобильного фильтра (ДОБАВИТЬ В КОНЕЦ @media (max-width: 1024px)) --- */
    .filters-toggle-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--border-color);
        border: none;
        padding: 8px 16px;
        border-radius: 5px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
    }
    .filters-toggle-button svg {
        width: 20px;
        height: 20px;
    }
    .catalog-filters {
        position: fixed;
        top: 0;
        left: 0;
        width: 300px; /* Ширина выезжающей панели */
        height: 100vh;
        background: var(--bg-color);
        z-index: 1002;
        transform: translateX(-100%);
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        overflow-y: auto; /* Добавляем скролл, если фильтров много */
    }
    .catalog-filters.is-open {
        transform: translateX(0);
        box-shadow: 5px 0 25px rgba(0,0,0,0.3);
    }
    .close-filters-button {
        position: fixed;
        top: 16px;
        right: 16px;
        z-index: 1003;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        color: var(--text-color);
        opacity: 0;
        visibility: hidden;
        transform: scale(0.8);
        transition: opacity 0.3s, transform 0.3s, visibility 0s 0.3s;
        background-color: var(--bg-color);
        border-radius: 50%;
    }

    /* Показываем кнопку, когда фильтры открыты */
    body.filters-open .close-filters-button {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
        transition-delay: 0.2s, 0.2s, 0s; /* Небольшая задержка для красивого появления */
        display: block;
    }

    .close-filters-button svg {
        width: 28px;
        height: 28px;
    }
    .filters-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 1001;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s, visibility 0s 0.4s;
    }
    body.filters-open .filters-overlay {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
        display: block;
    }
    body.filters-open {
        overflow: hidden; /* Блокируем скролл основной страницы */
    }
    .catalog-sort label {
        display: none; /* Скрываем лейбл сортировки */
    }
    .catalog-controls {
        align-items: center; /* Выравниваем элементы по центру */
    }
    
    .car-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .buyback-steps__content ul {
        column-count: 1;
    }
    .commission-intro-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .commission-intro-grid__media {
        order: -1; /* Зображення буде зверху на мобільних */
    }

    .buyback-content-grid__media img, 
    .tradein-content-grid__media img,
    .about-hero__image-wrapper img {
        aspect-ratio: 16 / 10;
        position: unset;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 36px;
    }

    h2 {
        font-size: 32px;
    }

    h3 {
        font-size: 28px;
    }

    h4 {
        font-size: 24px;
    }

    h5 {
        font-size: 20px;
    }

    h6 {
        font-size: 18px;
    }

    .content-styles h1, .content-styles h2, .content-styles h3, .content-styles h4, .content-styles h5, .content-styles h6, .content-styles p {
        margin-bottom: 16px;
    }

    .buyback-content-grid__text .content-styles ul {
        column-count: 1;
    }

    .hero-form {
        max-width: 100%;
        margin-top: 50px; /* Отступ от верха на мобильных */
    }

    .hero__navigation {
        gap: 15px;
        padding: 8px 15px;
        position: unset;
        transform: unset;
        margin: 40px 30px 0;
    }
    .about-video-banner {
        height: 300px; /* Зменшуємо висоту на мобільних */
    }

    .about-hero__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .about-hero__image-wrapper {
        order: -1; /* Move image to the top on mobile */
    }
    .about-hero__title {
        font-size: 36px;
    }

    .how-we-work {
        padding: 60px 0;
    }

    .how-we-work__title {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .how-we-work__grid {
        grid-template-columns: 1fr;
    }

    .available-cars {
        padding: 60px 0;
    }

    .available-cars__title {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .available-cars__grid,
    body.page-template-template-trade-in .available-cars__grid, 
    body.page-template-template-leasing .available-cars__grid {
        grid-template-columns: 1fr;
    }

    .our-values, .our-clients {
        padding: 60px 0;
    }

    .our-values__title, .our-clients__title {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .our-values__grid {
        grid-template-columns: 1fr;
    }

    .our-values__subtitle {
        margin-bottom: 40px;
    }
    
    .our-clients__gallery {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 180px;
    }

    .our-clients__gallery-item:nth-child(n) {
        grid-column: auto;
        grid-row: auto;
    }

    .our-services {
        padding: 60px 0;
    }
    .our-services__title {
        font-size: 32px;
        margin-bottom: 40px;
    }
    .our-services__content-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .our-services__tab-item {
        padding: 15px 10px;
        font-size: 18px;
        border-bottom-width: 2px;
    }
    .our-services__tabs {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border-color);
    }
    .our-services__tabs li {
        flex-shrink: 0;
    }
    .our-services__tab-item {
        border-bottom: none;
        padding: 10px 15px;
    }
    .our-services__tab-arrow {
        display: none;
    }
    .our-services__tab-item.is-active {
        border-bottom: 2px solid var(--green);
    }
    
    .page-hero {
        padding: 40px 0;
    }
    .page-hero__title {
        font-size: 36px;
    }
    .page-content,
    .buyback-criteria,
    .buyback-steps,
    .commission-steps {
        padding: 60px 0;
    }
    .buyback-criteria__title,
    .buyback-steps__title {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .catalog-page-content {
        padding: 30px 15px;
    }
    .car-listings-grid.view-grid,
    .available-cars__grid,
    body.page-template-template-trade-in .available-cars__grid, 
    body.page-template-template-leasing .available-cars__grid {
        grid-template-columns: 1fr;
    }
    .sold-cars__title {
        font-size: 32px;
    }
    .view-list .car-card {
        flex-direction: column;
    }
    .view-list .car-card__image-wrapper {
        width: 100%;
        aspect-ratio: 16/10;
    }
    .single-car__title {
        font-size: 28px;
    }
    .price-usd {
        font-size: 28px;
    }

    .catalog-view-switcher {
        display: none;
    }
    .contacts-grid {
        grid-template-columns: 1fr;
    }

    .car-card__pills {
        /* flex-wrap: nowrap;
        overflow-x: auto; */
    }

    .car-card__pill {
        flex-shrink: 0;
    }
    .car-features-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .commission-other-ways__grid {
        grid-template-columns: 1fr;
    }
    .commission-other-ways, .commission-included {
        padding: 60px 0;
    }
    .commission-other-ways__title {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .faq-category-title {
        font-size: 28px;
        margin-top: 50px;
        margin-bottom: 30px;
    }
    .footer__main {
        grid-template-columns: 1fr;
    }
}