.sf-faq__container {
max-width: 800px;
margin: 0 auto;
}
.sf-faq__subtitle {
text-align: center;
font-size: 15px;
color: var(--muted-foreground);
margin: -8px auto 24px;
max-width: 500px;
line-height: 1.6;
}
.sf-faq details {
margin-bottom: 8px;
border: 1px solid var(--border);
border-radius: var(--image-radius, 10px);
overflow: hidden;
transition: border-color var(--transition-fast);
}
.sf-faq details:hover { border-color: var(--primary); }
.sf-faq details[open] { border-color: var(--primary); }
.sf-faq summary {
padding: 18px 24px;
font-weight: 600;
cursor: pointer;
background: var(--surface);
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
transition: background var(--transition-fast);
}
.sf-faq summary:hover { background: var(--card); }
.sf-faq summary::-webkit-details-marker { display: none; }
.sf-faq summary::after {
content: '+';
font-size: 20px;
font-weight: 300;
color: var(--muted-foreground);
transition: transform var(--transition-fast);
}
.sf-faq details[open] summary::after { content: '−'; transform: rotate(180deg); }
.sf-faq .sf-faq__answer {
padding: 20px 24px;
line-height: 1.8;
color: var(--muted-foreground);
border-top: 1px solid var(--border);
}
.sf-faq__bottom {
text-align: center;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--border);
}
.sf-faq__bottom-text {
font-size: 15px;
color: var(--muted-foreground);
margin-bottom: 16px;
}
.sf-faq--smooth details[open] .sf-faq__answer {
animation: faq-open 0.3s ease;
}
@keyframes faq-open {
from { opacity: 0; max-height: 0; transform: translateY(-8px); }
to { opacity: 1; max-height: 500px; transform: translateY(0); }
}
.sf-faq--hover-highlight summary {
transition: color 0.2s ease, padding-left 0.2s ease;
}
.sf-faq--hover-highlight summary:hover {
color: var(--primary);
padding-left: 4px;
}
.sf-faq--active-glow details[open] summary {
color: var(--primary);
text-shadow: 0 0 8px rgba(var(--primary-rgb), 0.2);
}
.sf-faq--glass .sf-faq__item {
background: rgba(255,255,255,0.03);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--image-radius, 12px);
margin-bottom: 8px;
}
.sf-faq--accent-border .sf-faq__item {
border-left: 3px solid transparent;
transition: border-color 0.3s ease;
}
.sf-faq--accent-border details[open] {
border-left-color: var(--primary);
}
.sf-faq--numbered .sf-faq__item {
counter-increment: faq-counter;
}
.sf-faq--numbered summary::before {
content: counter(faq-counter, decimal-leading-zero);
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(var(--primary-rgb), 0.1);
color: var(--primary);
font-size: 12px;
font-weight: 700;
margin-right: 12px;
flex-shrink: 0;
}
.sf-faq--stagger .sf-faq__item {
opacity: 0;
animation: faq-item-in 0.4s ease forwards;
}
.sf-faq--stagger .sf-faq__item:nth-child(1) { animation-delay: 0s; }
.sf-faq--stagger .sf-faq__item:nth-child(2) { animation-delay: 0.08s; }
.sf-faq--stagger .sf-faq__item:nth-child(3) { animation-delay: 0.16s; }
.sf-faq--stagger .sf-faq__item:nth-child(4) { animation-delay: 0.24s; }
.sf-faq--stagger .sf-faq__item:nth-child(5) { animation-delay: 0.32s; }
.sf-faq--stagger .sf-faq__item:nth-child(6) { animation-delay: 0.4s; }
@keyframes faq-item-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.sf-faq--smooth details[open] .sf-faq__answer { animation: none; }
.sf-faq--stagger .sf-faq__item { animation: none; opacity: 1; }
}