@layer utilities {
    .faq-shell {
        @apply rounded-2xl border border-slate-200 bg-white p-6 shadow-sm md:p-8 lg:p-10;
    }

    .faq-shell__header {
        @apply border-b border-slate-200 pb-6;
    }

    .faq-shell__title {
        @apply text-3xl font-bold text-slate-900;
    }

    .faq-shell__subtitle {
        @apply mt-2 text-base font-medium text-slate-500;
    }

    .faq-section {
        @apply pt-7;
    }

    .faq-section + .faq-section {
        @apply mt-2;
    }

    .faq-section__title {
        @apply border-b-2 border-primary pb-3 text-xl font-semibold text-slate-900;
    }

    .faq-list {
        @apply mt-6 space-y-4;
    }

    .faq-item {
        @apply overflow-hidden rounded-2xl border border-slate-200 bg-white;
    }

    .faq-item__summary {
        @apply flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-5 text-lg font-semibold text-slate-900 transition-colors duration-200;
    }

    .faq-item__summary::-webkit-details-marker {
        display: none;
    }

    .faq-item__icon {
        @apply shrink-0 text-base text-primary transition-transform duration-200;
    }

    .faq-item[open] .faq-item__icon {
        @apply rotate-180;
    }

    .faq-item__body {
        @apply border-t border-slate-200 bg-slate-50 px-5 py-5 text-base leading-7 text-slate-600;
    }

    .faq-support {
        @apply mt-8 rounded-2xl border border-primary/10 bg-primary/5 px-6 py-7 md:px-7;
    }

    .faq-support__title {
        @apply text-2xl font-bold text-slate-900;
    }

    .faq-support__copy {
        @apply mt-3 max-w-3xl text-base leading-7 text-slate-600;
    }

    .faq-support__button {
        @apply mt-5 inline-flex items-center justify-center rounded-xl bg-primary px-6 py-3.5 text-base font-semibold text-white transition-colors duration-200 hover:bg-primary-strong;
    }
}
