/**
 * Frontend Styles — FAQ webslon.by
 */

/* === Контейнер === */
.faq-webslon-by-wrapper {
    width: 100%;
    clear: both;
}

.faq-webslon-by {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* === Элемент FAQ === */
.faq-webslon-by-item {
    width: 100%;
    overflow: hidden;
}

/* === H3 вопрос — кликабельный заголовок === */
.faq-webslon-by-question {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
}

.faq-webslon-by-question:focus {
    outline: none;
}

/* === Box вопроса (фон, рамка, внутренние отступы, скругление) === */
.faq-webslon-by-question-box {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* === Текст вопроса === */
.faq-webslon-by-question-text {
    flex: 1;
    margin: 0;
}

/* === Стрелочка — ВНУТРИ стилизованного бокса вопроса === */
.faq-webslon-by-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-webslon-by-arrow svg {
    display: block;
}

/* Поворот стрелочки при открытии */
.faq-webslon-by-item.is-open > .faq-webslon-by-question .faq-webslon-by-arrow {
    transform: rotate(90deg);
}

/* === Ответ — grid-анимация, БЕЗ padding на контейнере === */
.faq-webslon-by-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease;
    opacity: 0;
    padding: 0;
    margin: 0;
}

.faq-webslon-by-answer[hidden] {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    padding: 0;
    margin: 0;
}

/* Открытое состояние ответа */
.faq-webslon-by-item.is-open > .faq-webslon-by-answer {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* Внутренняя обёртка для smooth grid animation */
.faq-webslon-by-answer-inner {
    overflow: hidden;
    min-height: 0;
}

/* Контент ответа */
.faq-webslon-by-answer-content {
    line-height: 1.7;
}

.faq-webslon-by-answer-content p:last-child {
    margin-bottom: 0;
}

.faq-webslon-by-answer-content ul,
.faq-webslon-by-answer-content ol {
    margin-bottom: 1em;
    padding-left: 2em;
}

.faq-webslon-by-answer-content img {
    max-width: 100%;
    height: auto;
}

/* === Адаптивность === */
@media (max-width: 600px) {
    .faq-webslon-by-arrow {
        margin-left: 8px;
    }
}