.category-faq {

    --accent-color: #ff8c42;
    --text-dark: #2c3e50;
    --bg-light: #f8f9fa;
    --border-color: #575757;


    .col-md-12.category-faq {
        padding: 20px;
    }

    .category-faq-item {
        border: 1px solid var(--border-color);
        overflow: hidden;
        transition: all 0.3s ease;
        border-bottom: none;
    }

    [itemscope]:last-child {
        border-bottom: 1px solid var(--border-color);
    }

    .category-faq-item > span {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 24px;
        background: white;
        color: var(--text-dark);
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        user-select: none;
        transition: all 0.3s ease;
        position: relative;
        margin: 0;
    }

    .category-faq-item > span:hover {
        background: var(--bg-light);
        color: var(--accent-color);
    }

    .category-faq-item > span::after,
    .category-faq-item > span::before {
        width: 54px;
        height: 54px;
        position: absolute;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        /*border: 1px solid var(--border-color);*/
    }

    .category-faq-item > span::after {
        content: '+';
        font-size: 24px;
        font-weight: 300;
        color: var(--accent-color);
        transition: transform 0.3s ease;
        margin-left: auto;
        /*padding-left: 20px;*/
    }

    .category-faq-item > span.active {
        font-weight: 700;
        border-bottom: 1px solid var(--border-color);
    }

    .category-faq-item > span.active::after {
        content: '−';
        transform: rotate(180deg);
    }

    .answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, padding 0.4s ease;
    }

    .answer.show {
        max-height: 500px;

    }

    .answer {
        /*padding: 0 24px;*/
    }

    .answer div {
        color: var(--text-dark);
        font-size: 1rem;
        line-height: 1.6;
        padding: 24px;

    }

    .separator {
        display: none;
    }

    /* Анімація входу */
    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .category-faq-item {
        animation: slideIn 0.4s ease backwards;
        border-left: none;
        border-right: none;
    }

    .category-faq-item:nth-child(1) {
        animation-delay: 0.05s;
    }

    .category-faq-item:nth-child(3) {
        animation-delay: 0.1s;
    }

    .category-faq-item:nth-child(5) {
        animation-delay: 0.15s;
    }

    .category-faq-item:nth-child(7) {
        animation-delay: 0.2s;
    }

    .category-faq-item:nth-child(9) {
        animation-delay: 0.25s;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .category-faq-item > span {
            padding: 16px 20px;
            font-size: 0.95rem;
        }

        .answer div {
            padding: 16px;
        }
    }
}


/* ========================================
EDITOR CONTENT STYLES
Hectare CMS - Text Editor Typography
======================================== */

/* ========================================
   BASE TYPOGRAPHY
   ======================================== */

.dynamic_content {
    --color-primary: #575757;
    --color-orange: #fe7127;
    --color-orange-light: #fff5f0;
    --color-green: #0e6736;
    --color-green-light: #e7f0eb;
    --color-grey-light: #eef0f7;
    --color-border: #ddd;
    --font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --line-height-normal: 1.4;
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;


    font-family: var(--font-family);
    color: var(--color-primary);
    font-size: 16px;
    line-height: var(--line-height-normal);
    max-width: 100%;
}

.dynamic_content p {
    margin: 0 0 var(--spacing-sm) 0;
    font-weight: 400;
    line-height: var(--line-height-normal);
    word-break: break-word;
}

/* ========================================
   HEADINGS
   ======================================== */

/* H1 - Main Title (28px, bold) */
.dynamic_content h1 {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
    margin: var(--spacing-lg) 0 var(--spacing-md) 0;
    padding: 0;
}

.dynamic_content h1:first-child {
    margin-top: 0;
}

/* H2 - Section Title (22px, bold) */
.dynamic_content h2 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
    margin: var(--spacing-lg) 0 var(--spacing-md) 0;
    padding: 0;
}

/* H3 - Subsection Title (20px, bold) */
.dynamic_content h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
    margin: var(--spacing-md) 0 var(--spacing-sm) 0;
    padding: 0;
}

/* H4 - Small Heading (18px, bold) */
.dynamic_content h4 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
    margin: var(--spacing-md) 0 var(--spacing-sm) 0;
    padding: 0;
}

/* H5 - Smallest Heading (16px, bold) */
.dynamic_content h5 {
    font-size: 16px;
    font-weight: 700;
    line-height: var(--line-height-normal);
    color: var(--color-primary);
    margin: var(--spacing-sm) 0 var(--spacing-xs) 0;
    padding: 0;
}

/* ========================================
   PARAGRAPH STYLES
   ======================================== */

.dynamic_content p.lead {
    font-weight: 600;
    font-size: 16px;
}

.dynamic_content p.regular {
    font-weight: 400;
    font-size: 16px;
}

/* ========================================
   LISTS
   ======================================== */

.dynamic_content ul,
.dynamic_content ol {
    margin: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-md);
    padding-left: var(--spacing-md);
}

.dynamic_content li {
    margin-bottom: var(--spacing-xs);
    line-height: var(--line-height-normal);
    color: var(--color-primary);
}

.dynamic_content ul li::marker {
    color: var(--color-orange);
    font-weight: 600;
}

.dynamic_content ol li {
    counter-increment: list-counter;
}

.dynamic_content ol li::marker {
    color: var(--color-orange);
    font-weight: 600;
    font-size: 16px;
}

/* Numbered list with custom styling */
.dynamic_content ol.numbered-list {
    list-style: none;
    padding-left: 0;
    counter-reset: list-counter;
}

.dynamic_content ol.numbered-list li {
    margin-bottom: var(--spacing-xs);
    padding-left: var(--spacing-md);
    position: relative;
}

.dynamic_content ol.numbered-list li::before {
    content: counter(list-counter, decimal-leading-zero) '.';
    counter-increment: list-counter;
    position: absolute;
    left: 0;
    color: var(--color-orange);
    font-weight: 600;
    min-width: 30px;
}

/* Bullet list with custom styling */
.dynamic_content ul.bullet-list {
    list-style: none;
    padding-left: 0;
}

.dynamic_content ul.bullet-list li {
    padding-left: var(--spacing-md);
    position: relative;
    margin-bottom: var(--spacing-xs);
}

.dynamic_content ul.bullet-list li::before {
    content: '▪';
    position: absolute;
    left: 0;
    color: var(--color-orange);
    font-weight: 600;
}

/* ========================================
   BLOCKQUOTE & HIGHLIGHT BOXES
   ======================================== */

.dynamic_content blockquote {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
    border-left: 2px solid var(--color-orange);
    background-color: var(--color-orange-light);
    font-style: italic;
    color: var(--color-primary);
    line-height: var(--line-height-normal);
}

.dynamic_content blockquote p {
    margin: 0;
    font-weight: 400;
}

/* Green highlight box */
.dynamic_content .highlight-green {
    background-color: var(--color-green-light);
    border-left: 2px solid var(--color-green);
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
    line-height: var(--line-height-normal);
}

.dynamic_content .highlight-green p {
    color: var(--color-green);
    font-weight: 600;
    margin: 0;
}

/* Orange highlight box */
.dynamic_content .highlight-orange {
    background-color: var(--color-orange-light);
    border-left: 2px solid var(--color-orange);
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
    line-height: var(--line-height-normal);
}

.dynamic_content .highlight-orange p {
    color: var(--color-primary);
    font-weight: 400;
    margin: 0;
}

.dynamic_content .highlight-orange .label {
    color: var(--color-orange);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    display: block;
    margin-bottom: var(--spacing-xs);
}

/* Grey highlight box */
.dynamic_content .highlight-grey {
    background-color: var(--color-grey-light);
    border: 1px solid var(--color-border);
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
    line-height: var(--line-height-normal);
}

/* ========================================
   TABLES
   ======================================== */

.dynamic_content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-md) 0;
    font-size: 16px;
}

.dynamic_content table th {
    background-color: transparent;
    border: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 13.5px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--color-primary);
    line-height: var(--line-height-normal);
}

.dynamic_content table td {
    border: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 13.5px 16px;
    color: var(--color-primary);
    line-height: var(--line-height-normal);
}

.dynamic_content table tbody tr:nth-child(even) {
    background-color: var(--color-grey-light);
}

.dynamic_content table tbody tr:nth-child(odd) {
    background-color: transparent;
}

/* ========================================
   IMAGES
   ======================================== */

.dynamic_content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: var(--spacing-md) 0;
    border: none;
    border-radius: 0;
}

.dynamic_content figure {
    margin: var(--spacing-md) 0;
    padding: 0;
}

.dynamic_content figure img {
    display: block;
    width: 100%;
    height: auto;
}

.dynamic_content figcaption {
    font-size: 14px;
    color: var(--color-primary);
    margin-top: var(--spacing-xs);
    line-height: var(--line-height-normal);
    opacity: 0.8;
}

/* ========================================
   LINKS
   ======================================== */

.dynamic_content a {
    color: var(--color-orange);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.dynamic_content a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.dynamic_content a:active {
    opacity: 0.6;
}

/* ========================================
   STRONG & EMPHASIS
   ======================================== */

.dynamic_content strong,
.dynamic_content b {
    font-weight: 600;
}

.dynamic_content em,
.dynamic_content i {
    font-style: italic;
}

/* ========================================
   CODE (if needed)
   ======================================== */

.dynamic_content code {
    background-color: var(--color-grey-light);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: var(--color-primary);
}

.dynamic_content pre {
    background-color: var(--color-grey-light);
    padding: var(--spacing-md);
    border-radius: 4px;
    overflow-x: auto;
    margin: var(--spacing-md) 0;
}

.dynamic_content pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

/* ========================================
   HORIZONTAL RULE
   ======================================== */

.dynamic_content hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--spacing-lg) 0;
}

/* ========================================
   SPACING UTILITIES
   ======================================== */

.dynamic_content .spacing-xs {
    margin-bottom: var(--spacing-xs);
}

.dynamic_content .spacing-sm {
    margin-bottom: var(--spacing-sm);
}

.dynamic_content .spacing-md {
    margin-bottom: var(--spacing-md);
}

.dynamic_content .spacing-lg {
    margin-bottom: var(--spacing-lg);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    .dynamic_content {
        font-size: 15px;
    }

    .dynamic_content h1 {
        font-size: 24px;
        margin: var(--spacing-md) 0 var(--spacing-sm) 0;
    }

    .dynamic_content h2 {
        font-size: 20px;
        margin: var(--spacing-md) 0 var(--spacing-sm) 0;
    }

    .dynamic_content h3 {
        font-size: 18px;
        margin: var(--spacing-sm) 0 var(--spacing-xs) 0;
    }

    .dynamic_content ul,
    .dynamic_content ol {
        margin-left: var(--spacing-sm);
        padding-left: var(--spacing-sm);
    }

    .dynamic_content table {
        font-size: 14px;
    }

    .dynamic_content table th,
    .dynamic_content table td {
        padding: 10px 12px;
    }

    .dynamic_content blockquote {
        padding: var(--spacing-sm);
        margin: var(--spacing-sm) 0;
    }
}