.design_template.faqs {
    padding:20px 0 20px 0;
	background-color: #000000;
}
.design_template.faqs .faqs-container {
    width:85%;
    margin: 0 auto;
}



.faq-item {
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden; /* Заобля ъглите на целия блок */
    color: white;
}

/* Горна част с въпроса - Тъмнокафяв фон */
.faq-header {
    background-color: #653328; 
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer; /* Прави го да изглежда кликаемо */
    user-select: none; /* Предотвратява маркирането на текст при клик */
}

.faq-icon {
    background: white;
    color: #4a2c24;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.faq-header h3 {
    margin: 0;
    flex-grow: 1;
    font-size: 0.9vw;
    font-weight: 500;
}

.faq-arrow {
    font-size: 16px;
    opacity: 0.7;
    transition: transform 0.3s ease; /* Плавна анимация на стрелката */
}

/* Скриваме съдържанието по подразбиране */
.faq-content {
    background-color: #000000; 
    padding: 0 10px; /* Махаме горния/долния padding, за да се скрие напълно */
    max-height: 0; /* Ключово за скриването */
    overflow: hidden; /* Скрива излизащия текст */
    transition: max-height 0.3s ease, padding 0.3s ease; /* Плавна анимация за разпъване */
}


.faq-content p {
    margin: 0;
    line-height: 1.4;
    color: #e0e0e0; /* Леко сивкав текст за по-добра четимост на черен фон */
	font-size: 14px;
}

/* Клас, който ще се добавя с JavaScript при отваряне */
.faq-item.active .faq-content {
    max-height: 500px; /* Достатъчна височина за текста */
    padding: 10px; /* Връщаме вътрешното разстояние */
}

.faq-item.active .faq-arrow {
    transform: rotate(90deg); /* Завърта стрелката надясно или надолу, според вкуса */
}