/* =========================================================================
   faq — Figma 1053:2155 "FAQ" (chat style) · mobile 964:1408
   closed: white pill (blue border) + "+" circle on its RIGHT
   open:   black pill + "×" circle on its LEFT, answer bubble from Eyal below.
   ========================================================================= */
.faq{padding:0 0 100px;background:var(--white)}
.faq__title{max-width:986px;margin:0 auto 60px;line-height:1.05}
.faq__list{max-width:740px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.faq__q{display:flex;flex-direction:row-reverse;align-items:center;gap:10px;width:100%;text-align:right}
.faq__text{flex:1;min-height:56px;display:flex;align-items:center;padding:12px 26px 16px;border:1px solid rgba(23,109,222,.5);border-radius:28px;background:var(--white);font-size:20px;line-height:28px}
.faq__icon{position:relative;flex:none;width:56px;height:56px;border:1px solid #000;border-radius:50%;background:var(--white)}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:1.6px;margin:-.8px 0 0 -8px;border-radius:2px;background:#000;transition:transform .2s}
.faq__icon::after{transform:rotate(90deg)}
.faq__q:hover .faq__text{border-color:var(--blue);background:rgba(23,109,222,.04)}
.faq__q:hover .faq__icon{background:#000}
.faq__q:hover .faq__icon::before,.faq__q:hover .faq__icon::after{background:#fff}
/* open */
.faq__item.is-open .faq__q{flex-direction:row}
.faq__item.is-open .faq__text{border-color:#000;background:#000;color:var(--white)}
.faq__item.is-open .faq__icon{background:#000}
.faq__item.is-open .faq__icon::before{background:#fff;transform:rotate(45deg)}
.faq__item.is-open .faq__icon::after{background:#fff;transform:rotate(-45deg)}
.faq__a{display:flex;align-items:flex-end;gap:16px;padding:20px 8px 10px 0}
.faq__bubble{flex:1;padding:22px 28px;border-radius:24px;background:var(--bubble);font-size:19px;line-height:30px}
.faq__avatar{flex:none;width:60px;height:60px;border-radius:50%}
.faq__a[hidden]{display:none}
/* typing caret while the answer writes itself (same rule as bonim-bayt) */
.faq__bubble.is-typing::after{content:"";display:inline-block;width:2px;height:1em;margin-inline-start:2px;vertical-align:-2px;background:var(--blue);animation:faq-caret .7s steps(1) infinite}
@keyframes faq-caret{50%{opacity:0}}

@media (max-width:800px){
  .faq{padding-bottom:64px}
  .faq__title{margin-bottom:32px}
  .faq__list{gap:12px}
  .faq__text{padding:10px 20px 12px;border-radius:10px;font-size:17px;line-height:24px}
  .faq__icon{width:46px;height:46px}
  .faq__a{gap:10px;padding:14px 0 6px}
  .faq__bubble{padding:16px 20px;font-size:16px;line-height:25px;border-radius:20px}
  .faq__avatar{width:48px;height:48px}
}