.ar-faq-plugin {
display: grid;
grid-template-columns: 320px minmax(0, 1fr);
gap: clamp(48px, 6vw, 82px);
align-items: start;
}
.ar-faq-plugin__sidebar {
position: sticky;
top: 120px;
display: grid;
gap: 0;
padding: 14px;
background: var(--ar-white, #fff);
border: 1px solid rgba(0,0,0,.06);
box-shadow: 0 24px 60px rgba(0,0,0,.05);
}
.ar-faq-plugin__sidebar button {
width: 100%;
display: flex;
align-items: center;
gap: 14px;
padding: 18px 16px;
border: 0;
border-bottom: 1px solid rgba(0,0,0,.07);
background: transparent;
color: var(--ar-muted, #6f6f6f);
text-align: left;
font-family: inherit;
font-size: 16px;
font-weight: 400;
line-height: 1.3;
cursor: pointer;
transition: color .25s ease, background .25s ease;
}
.ar-faq-plugin__sidebar button:last-child {
border-bottom: 0;
}
.ar-faq-plugin__sidebar button span {
color: var(--ar-orange, #f2542d);
font-size: 12px;
font-weight: 500;
letter-spacing: .08em;
}
.ar-faq-plugin__sidebar button:hover,
.ar-faq-plugin__sidebar button.is-active {
color: var(--ar-dark, #0b0b0b);
background: #fff0ea;
}
.ar-faq-plugin__list {
display: grid;
gap: 14px;
}
.ar-faq-plugin__item {
background: var(--ar-white, #fff);
border: 1px solid rgba(0,0,0,.07);
box-shadow: 0 18px 45px rgba(0,0,0,.04);
transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.ar-faq-plugin__item:not([hidden]):hover {
transform: translateY(-2px);
box-shadow: 0 24px 60px rgba(0,0,0,.06);
}
.ar-faq-plugin__item[open] {
border-color: rgba(242,84,45,.30);
box-shadow: 0 24px 60px rgba(0,0,0,.06);
}
.ar-faq-plugin__item summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 26px 30px;
color: var(--ar-dark, #0b0b0b);
font-family: inherit;
font-size: 18px;
font-weight: 500;
line-height: 1.35;
}
.ar-faq-plugin__item summary::-webkit-details-marker {
display: none;
}
.ar-faq-plugin__item summary::after {
content: "+";
flex: 0 0 auto;
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 999px;
background: #fff0ea;
color: var(--ar-orange, #f2542d);
font-size: 24px;
font-weight: 400;
line-height: 1;
}
.ar-faq-plugin__item[open] summary::after {
content: "–";
}
.ar-faq-plugin__answer {
max-width: 820px;
padding: 0 30px 28px;
}
.ar-faq-plugin__answer p {
margin: 0;
color: var(--ar-muted, #6f6f6f);
font-size: 16px;
line-height: 1.75;
}
.ar-faq-plugin__empty {
margin: 0;
padding: 28px;
background: var(--ar-white, #fff);
color: var(--ar-muted, #6f6f6f);
border: 1px solid rgba(0,0,0,.07);
font-size: 16px;
} @media (max-width: 1024px) {
.ar-faq-plugin {
grid-template-columns: 1fr;
}
.ar-faq-plugin__sidebar {
position: relative;
top: auto;
grid-template-columns: repeat(2, 1fr);
}
.ar-faq-plugin__sidebar button:nth-child(odd) {
border-right: 1px solid rgba(0,0,0,.07);
}
}
@media (max-width: 680px) {
.ar-faq-plugin {
gap: 28px;
}
.ar-faq-plugin__sidebar {
grid-template-columns: 1fr;
padding: 12px;
}
.ar-faq-plugin__sidebar button {
font-size: 16px;
}
.ar-faq-plugin__sidebar button:nth-child(odd) {
border-right: 0;
}
.ar-faq-plugin__item summary {
padding: 22px 22px;
font-size: 17px;
}
.ar-faq-plugin__answer {
padding: 0 22px 24px;
}
.ar-faq-plugin__answer p {
font-size: 16px;
}
}