.ilyk-course-modules {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ilyk-course-modules .accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ilyk-course-modules .accordion-item {
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    /* overflow: hidden видалено — воно конфліктує з Bootstrap height-анімацією
       на .collapsing і викликає глюки при розкритті. Border-radius діє без нього. */
    background: #fff !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Замість overflow:hidden на item — обрізаємо тільки кнопку і тіло по кутах */
.ilyk-course-modules .accordion-item:first-child .accordion-button {
    border-radius: 10px 10px 0 0 !important;
}
.ilyk-course-modules .accordion-item:last-child .accordion-button.collapsed {
    border-radius: 0 0 10px 10px !important;
}
.ilyk-course-modules .accordion-item:last-child .accordion-collapse {
    border-radius: 0 0 10px 10px !important;
}

.ilyk-course-modules .accordion-item:hover {
    border-color: rgba(var(--ilyk-accent-r, 81), var(--ilyk-accent-g, 105), var(--ilyk-accent-b, 241), 0.3) !important;
    box-shadow: 0 2px 12px rgba(var(--ilyk-accent-r, 81), var(--ilyk-accent-g, 105), var(--ilyk-accent-b, 241), 0.07) !important;
}

.ilyk-course-modules .accordion-item:has(.accordion-collapse.show) {
    border-color: rgba(var(--ilyk-accent-r, 81), var(--ilyk-accent-g, 105), var(--ilyk-accent-b, 241), 0.3) !important;
    box-shadow: 0 2px 12px rgba(var(--ilyk-accent-r, 81), var(--ilyk-accent-g, 105), var(--ilyk-accent-b, 241), 0.07) !important;
}

.ilyk-course-modules .accordion-button {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    background: #fff !important;
    padding: 16px 20px !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

.ilyk-course-modules .accordion-button:not(.collapsed) {
    color: rgba(var(--ilyk-accent-r, 81), var(--ilyk-accent-g, 105), var(--ilyk-accent-b, 241), 1) !important;
    background: rgba(var(--ilyk-accent-r, 81), var(--ilyk-accent-g, 105), var(--ilyk-accent-b, 241), 0.04) !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

.ilyk-course-modules .accordion-button::after {
    background-image: none !important;
    content: '\f078' !important;
    font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
    transition: transform 0.25s ease, color 0.25s ease !important;
    width: auto !important;
    height: auto !important;
    flex-shrink: 0 !important;
}

.ilyk-course-modules .accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg) !important;
    color: rgba(var(--ilyk-accent-r, 81), var(--ilyk-accent-g, 105), var(--ilyk-accent-b, 241), 1) !important;
}

.ilyk-course-modules .accordion-body {
    padding: 14px 20px 18px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #475569 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    min-width: 0 !important;
}

.ilyk-course-modules .accordion-collapse {
    overflow: hidden;
}

.ilyk-course-modules .accordion-body p:first-child { margin-top: 0; }
.ilyk-course-modules .accordion-body p:last-child  { margin-bottom: 0; }

/* Border завжди присутній (прозорий) — щоб не викликати layout shift при появі.
   Стає видимим тільки коли акордеон відкритий. */
.ilyk-course-modules .accordion-header {
    border-bottom: 1px solid transparent !important;
    transition: border-color 0.2s ease !important;
}
.ilyk-course-modules .accordion-item:has(.accordion-collapse.show) .accordion-header {
    border-bottom-color: #f1f5f9 !important;
}

.ilyk-course-modules .accordion-body ul,
.ilyk-course-modules .accordion-body ol {
    padding-left: 1.5em !important;
    margin-bottom: 0.75em !important;
}
.ilyk-course-modules .accordion-body ul { list-style: disc !important; }
.ilyk-course-modules .accordion-body ol { list-style: decimal !important; }
.ilyk-course-modules .accordion-body li {
    list-style: inherit !important;
    display: list-item !important;
    margin-bottom: 0.3em !important;
}

@media (max-width: 767px) {

    .ilyk-course-modules .accordion-collapse {
        transition: none !important;
    }

    .ilyk-course-modules .accordion-collapse:not(.show) .accordion-body {
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    .ilyk-course-modules .accordion-collapse.show .accordion-body {
        opacity: 1;
        transition: opacity 0.25s ease;
    }

    .ilyk-course-modules .accordion-button {
        font-size: 14px !important;
        padding: 14px 16px !important;
    }

    .ilyk-course-modules .accordion-body {
        padding: 12px 16px 16px !important;
        font-size: 14px !important;
    }

    .ilyk-course-modules .accordion-item:has(.accordion-collapse.show) {
        border-color: rgba(var(--ilyk-accent-r, 81), var(--ilyk-accent-g, 105), var(--ilyk-accent-b, 241), 0.3) !important;
        box-shadow: 0 1px 8px rgba(var(--ilyk-accent-r, 81), var(--ilyk-accent-g, 105), var(--ilyk-accent-b, 241), 0.05) !important;
    }
}

@media (max-width: 767px) {
    /* FAQ — та сама мобільна оптимізація що і в Темах модулів:
       вимикаємо важку Bootstrap height-анімацію, замінюємо на легку opacity */
    .extra-info-tab .accordion-collapse {
        transition: none !important;
    }
    .extra-info-tab .accordion-collapse:not(.show) .accordion-body {
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    .extra-info-tab .accordion-collapse.show .accordion-body {
        opacity: 1;
        transition: opacity 0.25s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ilyk-course-modules .accordion-item,
    .ilyk-course-modules .accordion-button::after,
    .ilyk-course-modules .accordion-collapse {
        transition: none !important;
    }
}

/* Прибираємо Bootstrap focus box-shadow на акордеоні FAQ (.extra-info-tab)
   Bootstrap задає --bs-accordion-btn-focus-box-shadow: rgba(13,110,253,0.25) — синій.
   Замінюємо на прозорий щоб не було "виділення" після кліку. */
.extra-info-tab .accordion-button:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Те саме для модулів — на випадок якщо courses-settings.php ще не перезаписав */
.ilyk-course-modules .accordion-button:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(var(--ilyk-accent-r, 81), var(--ilyk-accent-g, 105), var(--ilyk-accent-b, 241), 0.15) !important;
}

/* FAQ акордеон — прибираємо Bootstrap inset box-shadow (розділювач під заголовком) */
.extra-info-tab .accordion-button:not(.collapsed) {
    box-shadow: none !important;
}

/* Bootstrap залишає focus box-shadow після кліку мишею на accordion-button.
   :focus-visible спрацьовує тільки при клавіатурній навігації — саме це і потрібно. */
.ilyk-course-modules .accordion-button:focus:not(:focus-visible),
.extra-info-tab .accordion-button:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}