.aj-faq {
--aj-faq-bg: #ffffff;
--aj-faq-border: rgba(0, 0, 0, 0.08);
--aj-faq-text: #1a1a1a;
--aj-faq-muted: #646b75;
--aj-faq-accent: #ff5a3c; --aj-faq-radius: 16px;
--aj-faq-shadow: 0 1px 10px 2px rgba(238, 87, 57, 0.15);
padding: 80px 10px;
}
.aj-faq__inner {
max-width: 900px;
margin: 0 auto;
}
.aj-faq__title {
font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
margin: 0 0 0.5rem 0;
color: var(--aj-faq-text);
text-align: center;
}
.aj-faq__description {
margin: 0 0 1.5rem 0;
color: var(--aj-faq-muted);
line-height: 1.7;
text-align: center;
}
.aj-faq__list {
display: grid;
gap: 12px;
}
.aj-faq__item {
background: var(--aj-faq-bg);
border: 1px solid var(--aj-faq-border);
border-radius: var(--aj-faq-radius);
box-shadow: var(--aj-faq-shadow);
overflow: hidden;
}
.aj-faq__question {
margin: 0;
}
.aj-faq__toggle {
appearance: none;
-webkit-appearance: none;
width: 100%;
text-align: left;
padding: 16px 56px 16px 18px;
background: transparent;
border: 0;
cursor: pointer;
line-height: 1.4;
font-size: 1.05rem;
font-weight: 600;
color: var(--aj-faq-text);
position: relative;
}
.aj-faq__toggle:focus-visible {
outline: 2px solid var(--aj-faq-accent);
outline-offset: 2px;
border-radius: 8px;
}
.aj-faq__icon {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
display: inline-block;
}
.aj-faq__icon::before,
.aj-faq__icon::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
background: var(--aj-faq-accent);
transition: transform 0.2s ease;
} .aj-faq__icon::before {
width: 2px;
height: 18px;
transform: rotate(0deg);
}
.aj-faq__icon::after {
width: 18px;
height: 2px;
} .aj-faq__toggle[aria-expanded="true"] .aj-faq__icon::before {
transform: rotate(90deg);
background: #ff5a3c;
color: white;
} .aj-faq__answer {
border-top: 1px solid var(--aj-faq-border);
overflow: hidden;
height: 0; opacity: 0;
transition: height 0.28s ease, opacity 0.28s ease;
will-change: height, opacity;
} .aj-faq__answer[aria-hidden="false"] {
opacity: 1;
} .aj-faq__answer-content {
padding: 12px 18px 16px 18px;
color: var(--aj-faq-muted);
line-height: 1.75;
animation: ajFaqSlide 0.18s ease;
}
@keyframes ajFaqSlide {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .aj-faq__answer-content p {
margin: 0.5em 0;
}
.aj-faq__answer-content ul,
.aj-faq__answer-content ol {
margin: 0.5em 0 0.5em 1.25em;
}
.aj-faq__description p {
max-width: 566px;
margin: 0 auto;
} @media (prefers-reduced-motion: reduce) {
.aj-faq__answer {
transition: none !important;
}
.aj-faq__answer-content {
animation: none !important;
}
}