/* Fancy accordion shell – visual only, behavior stays in accordion.js */
.fancy-accordion {
    --surface:#0e1324;
    --item:#0b1120;
    --item-active:#111827;
    --muted:#9ca3af;
    --accent:#6E7BFF;
    --ring:rgba(110,123,255,.4);
    margin:2.5rem 0 3rem;
    border-radius:18px;
    background:
        radial-gradient(900px 400px at 0% 0%, rgba(110,123,255,.18), transparent 55%),
        radial-gradient(800px 500px at 100% 0%, rgba(56,189,248,.18), transparent 55%),
        var(--surface);
    box-shadow:0 22px 55px rgba(15,23,42,.85), inset 0 1px 0 rgba(255,255,255,.04);
    border:1px solid rgba(148,163,184,.35);
    color:#e5e7eb;
}

.fancy-accordion-inner {
    padding:1.1rem 1.25rem 1.3rem;
    display:flex;
    flex-direction:column;
    gap:.65rem;
}

.fancy-accordion .accordion-item {
    border-radius:14px;
    background:rgba(15,23,42,.7);
    border:1px solid rgba(148,163,184,.35);
    overflow:hidden;
}

/* Trigger / title */
.fancy-accordion .accordion-title {
    width:100%;
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    padding:.8rem 1rem;
    background:transparent;
    border:none;
    color:inherit;
    text-align:left;
    cursor:pointer;
    position:relative;
}

.fancy-accordion .accordion-title:focus-visible {
    outline:none;
    box-shadow:0 0 0 3px var(--ring);
    border-radius:inherit;
}

/* Icon pill */
.fancy-acc-icon-pill {
    flex-shrink:0;
    width:40px;
    height:40px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(15,23,42,.9);
    box-shadow:0 0 0 1px rgba(148,163,184,.4);
    color:#c7d2fe;
}

/* Text stack */
.fancy-acc-text {
    flex:1;
    min-width:0;
}

.fancy-acc-kicker {
    display:block;
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--muted);
    margin-bottom:.1rem;
}

.fancy-acc-heading {
    display:block;
    font-size:1rem;
    font-weight:600;
    color:#f9fafb;
}

.fancy-acc-meta {
    display:block;
    margin-top:.1rem;
    font-size:.85rem;
    color:var(--muted);
}

/* Chevron */
.fancy-acc-chevron {
    flex-shrink:0;
    margin-right:2.5rem;
    color:var(--muted);
    transition:transform .2s ease, color .2s ease;
}

.fancy-accordion .accordion-title[aria-expanded="true"] .fancy-acc-chevron {
    transform:rotate(-180deg);
    color:#e5e7eb;
}

/* Panel body – handle max-height animation here since we don't use slot-layout */
.fancy-accordion .accordion-content.fancy-acc-panel {
    overflow: hidden;
    max-height: 0;
    padding: 0 .95rem;
    font-size: .9rem;
    color: #e5e7eb;
    border-top: 0 solid rgba(148,163,184,.35);
    background: linear-gradient(180deg, var(--item-active), rgba(3,7,18,1));
    transition: max-height 0.4s ease, padding 0.4s ease, border-top-width 0.1s ease;
}

.fancy-accordion .accordion-content.fancy-acc-panel.open {
    max-height: 1000px;
    padding: 0 .95rem 1rem .95rem;
    border-top-width: 1px;
}

.fancy-acc-panel p {
    margin:.7rem 0 .7rem;
    padding-bottom:20px;
}

.fancy-acc-panel ul {
    padding-left:1.1rem;
    margin:.4rem 0 .4rem;
}

/* Cards inside the panel */
.fancy-acc-card {
    border-radius:10px;
    padding:.75rem .8rem;
    background:rgba(15,23,42,.9);
    border:1px solid rgba(148,163,184,.5);
    box-shadow:0 10px 26px rgba(15,23,42,.7);
    margin-bottom: 1.5rem;
}

.fancy-acc-card h5 {
    margin:0 0 .2rem;
    font-size:.95rem;
    color:#ffffff;
}

.fancy-acc-card p {
    margin:0;
    font-size:.84rem;
    color:var(--muted);
}

/* Small-screen tweaks */
@media (max-width: 640px) {
    .fancy-accordion-inner {
        padding:0.9rem 0.85rem 1.1rem;
    }

    .fancy-accordion .accordion-title {
        padding:.7rem .85rem;
    }

    .fancy-acc-heading {
        font-size:.95rem;
    }
}
/* Active accordion title state */
.fancy-accordion .accordion-title[aria-expanded="true"] {
    background: linear-gradient(180deg, rgba(110,123,255,.26), rgba(15,23,42,.9));
    border-color: rgba(110,123,255,.65);
    box-shadow:
        0 0 0 1px rgba(148,163,184,.35),
        0 16px 40px rgba(15,23,42,.85);
}

/* Optional: slightly lift the whole row when active */
.fancy-accordion .accordion-title[aria-expanded="true"] .fancy-acc-heading {
    color: #ffffff;
}

.fancy-accordion .accordion-title[aria-expanded="true"] .fancy-acc-kicker {
    color: #c7d2fe;
}