/* =====================================================================
   FAQcraft Pro — Animation System
   All transition/animation primitives consumed by every layout
   ===================================================================== */

/* ── Keyframe Definitions ──────────────────────────────────────────── */

@keyframes fc-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fc-slide-down {
    from {
        max-height: 0;
        opacity: 0;
    }

    to {
        max-height: var(--fc-panel-height, 9999px);
        opacity: 1;
    }
}

@keyframes fc-bounce-open {
    0% {
        transform: scaleY(0.85);
        opacity: 0;
    }

    60% {
        transform: scaleY(1.04);
        opacity: 1;
    }

    80% {
        transform: scaleY(0.97);
    }

    100% {
        transform: scaleY(1);
    }
}

@keyframes fc-scale-up {
    from {
        transform: scale(0.96);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fc-highlight-pulse {
    0% {
        background-color: rgba(255, 214, 0, 0.0);
    }

    30% {
        background-color: rgba(255, 214, 0, 0.55);
    }

    100% {
        background-color: rgba(255, 214, 0, 0.2);
    }
}

@keyframes fc-chevron-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(180deg);
    }
}

@keyframes fc-card-enter {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Speed Custom Property ─────────────────────────────────────────── */
/* JS writes --fc-anim-duration via dataset; fallback = 300ms */
.faqcraft-wrap {
    --fc-anim-duration: 300ms;
}

/* ── Item Stagger Delays (up to 20 items) ──────────────────────────── */
.faqcraft-animated .faqcraft-accordion__item:nth-child(1),
.faqcraft-animated .faqcraft-card:nth-child(1) {
    animation-delay: 0ms;
}

.faqcraft-animated .faqcraft-accordion__item:nth-child(2),
.faqcraft-animated .faqcraft-card:nth-child(2) {
    animation-delay: 40ms;
}

.faqcraft-animated .faqcraft-accordion__item:nth-child(3),
.faqcraft-animated .faqcraft-card:nth-child(3) {
    animation-delay: 80ms;
}

.faqcraft-animated .faqcraft-accordion__item:nth-child(4),
.faqcraft-animated .faqcraft-card:nth-child(4) {
    animation-delay: 120ms;
}

.faqcraft-animated .faqcraft-accordion__item:nth-child(5),
.faqcraft-animated .faqcraft-card:nth-child(5) {
    animation-delay: 160ms;
}

.faqcraft-animated .faqcraft-accordion__item:nth-child(6),
.faqcraft-animated .faqcraft-card:nth-child(6) {
    animation-delay: 200ms;
}

.faqcraft-animated .faqcraft-accordion__item:nth-child(7),
.faqcraft-animated .faqcraft-card:nth-child(7) {
    animation-delay: 240ms;
}

.faqcraft-animated .faqcraft-accordion__item:nth-child(8),
.faqcraft-animated .faqcraft-card:nth-child(8) {
    animation-delay: 280ms;
}

.faqcraft-animated .faqcraft-accordion__item:nth-child(9),
.faqcraft-animated .faqcraft-card:nth-child(9) {
    animation-delay: 320ms;
}

.faqcraft-animated .faqcraft-accordion__item:nth-child(10),
.faqcraft-animated .faqcraft-card:nth-child(10) {
    animation-delay: 360ms;
}

/* ── Fade-In on Initial Load ───────────────────────────────────────── */
.faqcraft-animated .faqcraft-accordion__item,
.faqcraft-animated .faqcraft-card,
.faqcraft-animated .faqcraft-tab-panel.is-active {
    animation: fc-fade-in var(--fc-anim-duration, 300ms) ease both;
}

/* ── Accordion Panel Open/Close ────────────────────────────────────── */
.faqcraft-accordion__panel {
    overflow: hidden;
    transition:
        max-height var(--fc-anim-duration, 300ms) ease,
        opacity var(--fc-anim-duration, 300ms) ease;
    max-height: 0;
    opacity: 0;
}

.faqcraft-accordion__panel:not([hidden]) {
    max-height: 2000px;
    opacity: 1;
}

/* ── Bounce variant ────────────────────────────────────────────────── */
.faqcraft-wrap[data-anim-type="bounce-open"] .faqcraft-accordion__panel:not([hidden]) {
    animation: fc-bounce-open var(--fc-anim-duration, 300ms) ease both;
}

/* ── Scale-up for panels ───────────────────────────────────────────── */
.faqcraft-wrap[data-anim-type="scale-up"] .faqcraft-accordion__panel:not([hidden]) {
    animation: fc-scale-up var(--fc-anim-duration, 300ms) ease both;
}

/* ── Grid Card Entry ───────────────────────────────────────────────── */
.faqcraft-animated .faqcraft-card {
    animation: fc-card-enter var(--fc-anim-duration, 300ms) ease both;
}

/* ── Grid Card Hover (scale) ───────────────────────────────────────── */
.faqcraft-card {
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.faqcraft-card:hover {
    transform: translateY(-3px) scale(1.02);
}

/* ── Chevron Rotation ──────────────────────────────────────────────── */
.faqcraft-accordion__chevron {
    display: inline-flex;
    align-items: center;
    transition: transform var(--fc-anim-duration, 300ms) ease;
}

.faqcraft-accordion__item.is-open .faqcraft-accordion__chevron {
    transform: rotate(180deg);
}

/* ── Search Highlight Pulse ────────────────────────────────────────── */
.faqcraft-highlight {
    background-color: rgba(255, 214, 0, 0.2);
    border-radius: 3px;
    animation: fc-highlight-pulse 800ms ease both;
}

/* ── Tab Panel Transition ──────────────────────────────────────────── */
.faqcraft-tab-panel {
    animation: fc-fade-in var(--fc-anim-duration, 300ms) ease both;
}

/* ── Respect prefers-reduced-motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .faqcraft-wrap,
    .faqcraft-wrap * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        animation-delay: 0ms !important;
    }
}

/* ── Layout Base Styles (shared across themes) ─────────────────────── */

/* Wrap */
.faqcraft-wrap {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--fc-fg, #1f2937);
    box-sizing: border-box;
}

.faqcraft-wrap * {
    box-sizing: border-box;
}

/* ── Accordion ─────────────────────────────────────────────────────── */
.faqcraft-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.faqcraft-accordion__item {
    border: 1px solid var(--fc-border, #e5e7eb);
    border-radius: var(--fc-radius, 10px);
    overflow: hidden;
    background: var(--fc-item-bg, #fff);
    box-shadow: var(--fc-shadow, 0 1px 3px rgba(0, 0, 0, .06));
}

.faqcraft-accordion__trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 18px 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: var(--fc-question-color, #111827);
    transition: background var(--fc-anim-duration, 200ms) ease, color var(--fc-anim-duration, 200ms) ease;
}

.faqcraft-accordion__trigger:hover {
    background: var(--fc-trigger-hover, rgba(74, 108, 247, .05));
    color: var(--fc-accent, #4A6CF7);
}

.faqcraft-accordion__item.is-open .faqcraft-accordion__trigger {
    color: var(--fc-accent, #4A6CF7);
    background: var(--fc-trigger-open-bg, rgba(74, 108, 247, .04));
}

.faqcraft-accordion__trigger:focus-visible {
    outline: 3px solid var(--fc-accent, #4A6CF7);
    outline-offset: -3px;
}

.faqcraft-accordion__question {
    flex: 1;
}

.faqcraft-accordion__icon {
    font-size: 18px;
    color: var(--fc-accent, #4A6CF7);
    flex-shrink: 0;
}

.faqcraft-accordion__answer {
    padding: 0 20px 18px 20px;
    color: var(--fc-answer-color, #4b5563);
    font-size: 0.95rem;
}

.faqcraft-accordion__answer p:last-child {
    margin-bottom: 0;
}

/* ── Tabs ──────────────────────────────────────────────────────────── */
.faqcraft-tab-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 2px solid var(--fc-border, #e5e7eb);
    margin-bottom: 20px;
}

.faqcraft-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--fc-fg, #4b5563);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    border-radius: var(--fc-radius, 8px) var(--fc-radius, 8px) 0 0;
    transition: all 200ms ease;
}

.faqcraft-tab-btn:hover {
    color: var(--fc-accent, #4A6CF7);
    background: rgba(74, 108, 247, .05);
}

.faqcraft-tab-btn.is-active {
    color: var(--fc-accent, #4A6CF7);
    border-bottom-color: var(--fc-accent, #4A6CF7);
    font-weight: 700;
}

.faqcraft-tab-btn:focus-visible {
    outline: 3px solid var(--fc-accent, #4A6CF7);
    outline-offset: 2px;
}

.faqcraft-tab-panel {
    display: none;
}

.faqcraft-tab-panel.is-active {
    display: block;
    color: var(--fc-answer-color, #4b5563);
    font-size: 0.95rem;
}

/* ── Grid ──────────────────────────────────────────────────────────── */
.faqcraft-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.faqcraft-card {
    background: var(--fc-item-bg, #fff);
    border: 1px solid var(--fc-border, #e5e7eb);
    border-radius: var(--fc-radius, 12px);
    padding: 24px;
    box-shadow: var(--fc-shadow, 0 2px 8px rgba(0, 0, 0, .07));
}

.faqcraft-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.faqcraft-card__icon {
    font-size: 22px;
    color: var(--fc-accent, #4A6CF7);
}

.faqcraft-card__icon--default {
    color: var(--fc-accent, #4A6CF7);
    opacity: .7;
}

.faqcraft-card__category {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--fc-accent, #4A6CF7);
    background: rgba(74, 108, 247, .08);
    padding: 2px 8px;
    border-radius: 99px;
}

.faqcraft-card__question {
    font-size: 1rem;
    font-weight: 700;
    color: var(--fc-question-color, #111827);
    margin: 0 0 10px;
}

.faqcraft-card__answer {
    font-size: 0.9rem;
    color: var(--fc-answer-color, #4b5563);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.faqcraft-card.is-expanded .faqcraft-card__answer {
    -webkit-line-clamp: unset;
    overflow: visible;
}

.faqcraft-card__expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fc-accent, #4A6CF7);
    padding: 0;
    transition: gap 200ms ease;
}

.faqcraft-card__expand-btn:hover {
    gap: 8px;
}

.faqcraft-card__expand-icon {
    transition: transform 200ms ease;
}

.faqcraft-card.is-expanded .faqcraft-card__expand-icon {
    transform: rotate(180deg);
}

/* ── Search Bar ────────────────────────────────────────────────────── */
.faqcraft-search-bar {
    margin-bottom: 24px;
}

.faqcraft-search-bar__inner {
    position: relative;
    display: flex;
    align-items: center;
}

.faqcraft-search-bar__icon {
    position: absolute;
    left: 14px;
    color: var(--fc-fg, #9ca3af);
    pointer-events: none;
    display: flex;
}

.faqcraft-search-bar__input {
    width: 100%;
    padding: 13px 44px 13px 44px;
    border: 2px solid var(--fc-border, #e5e7eb);
    border-radius: var(--fc-radius, 10px);
    font-size: 1rem;
    background: var(--fc-item-bg, #fff);
    color: var(--fc-fg, #111827);
    transition: border-color 200ms ease, box-shadow 200ms ease;
    -webkit-appearance: none;
}

.faqcraft-search-bar__input:focus {
    outline: none;
    border-color: var(--fc-accent, #4A6CF7);
    box-shadow: 0 0 0 4px rgba(74, 108, 247, .12);
}

.faqcraft-search-bar__clear {
    position: absolute;
    right: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--fc-fg, #9ca3af);
    padding: 4px;
    display: flex;
    border-radius: 4px;
    transition: color 150ms ease;
}

.faqcraft-search-bar__clear:hover {
    color: var(--fc-fg, #111827);
}

.faqcraft-search-bar__count {
    font-size: 0.8rem;
    color: var(--fc-fg, #9ca3af);
    margin: 8px 0 0;
    text-align: right;
}

/* ── No Results ────────────────────────────────────────────────────── */
.faqcraft-no-results {
    text-align: center;
    padding: 40px 20px;
    color: var(--fc-fg, #9ca3af);
}

.faqcraft-no-results__icon {
    font-size: 32px;
    display: block;
    margin-bottom: 8px;
}

/* ── THEME: Minimal Light (default) ───────────────────────────────── */
.faqcraft-theme-minimal-light {
    --fc-fg: #1f2937;
    --fc-answer-color: #4b5563;
    --fc-question-color: #111827;
    --fc-accent: #4A6CF7;
    --fc-border: #e5e7eb;
    --fc-item-bg: #ffffff;
    --fc-trigger-hover: rgba(74, 108, 247, .05);
    --fc-trigger-open-bg: rgba(74, 108, 247, .04);
    --fc-shadow: 0 1px 3px rgba(0, 0, 0, .07);
    --fc-radius: 10px;
}

/* ── THEME: Modern Dark ────────────────────────────────────────────── */
.faqcraft-theme-modern-dark {
    --fc-fg: #e2e8f0;
    --fc-answer-color: #94a3b8;
    --fc-question-color: #f1f5f9;
    --fc-accent: #00d4ff;
    --fc-border: #2d3748;
    --fc-item-bg: #1a1a2e;
    --fc-trigger-hover: rgba(0, 212, 255, .08);
    --fc-trigger-open-bg: rgba(0, 212, 255, .06);
    --fc-shadow: 0 2px 12px rgba(0, 0, 0, .4);
    --fc-radius: 10px;
    background: #0f0f1a;
    border-radius: 16px;
    padding: 24px;
}

/* ── THEME: Bold Gradient ──────────────────────────────────────────── */
.faqcraft-theme-bold-gradient {
    --fc-fg: #fff;
    --fc-answer-color: rgba(255, 255, 255, .85);
    --fc-question-color: #fff;
    --fc-accent: #ffd700;
    --fc-border: rgba(255, 255, 255, .2);
    --fc-item-bg: rgba(255, 255, 255, .12);
    --fc-trigger-hover: rgba(255, 255, 255, .15);
    --fc-trigger-open-bg: rgba(255, 255, 255, .18);
    --fc-shadow: 0 4px 20px rgba(0, 0, 0, .2);
    --fc-radius: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 28px;
}

.faqcraft-theme-bold-gradient .faqcraft-accordion__item {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ── THEME: Corporate Clean ───────────────────────────────────────── */
.faqcraft-theme-corporate-clean {
    --fc-fg: #2d3748;
    --fc-answer-color: #4a5568;
    --fc-question-color: #1a202c;
    --fc-accent: #2b6cb0;
    --fc-border: #cbd5e0;
    --fc-item-bg: #f7fafc;
    --fc-trigger-hover: rgba(43, 108, 176, .05);
    --fc-trigger-open-bg: rgba(43, 108, 176, .04);
    --fc-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    --fc-radius: 6px;
    font-family: 'Georgia', 'Times New Roman', serif;
}

.faqcraft-theme-corporate-clean .faqcraft-accordion__trigger {
    border-left: 4px solid transparent;
}

.faqcraft-theme-corporate-clean .faqcraft-accordion__item.is-open .faqcraft-accordion__trigger {
    border-left-color: var(--fc-accent);
}