.vg-faq{--vg-faq-gap:8px;display:flex;flex-direction:column;gap:var(--vg-faq-gap)}
.vg-faq-item{overflow:hidden;border:1px solid transparent;background:transparent}
.vg-faq-question{appearance:none;width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0;border:0;background:transparent;color:inherit;text-align:left;font:inherit;font-weight:700;line-height:1.35;cursor:pointer;padding:16px 0;transition:background-color .2s ease,color .2s ease}
.vg-faq-question-text{min-width:0}
.vg-faq-icon{flex:0 0 auto;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;transition:transform .24s ease,background-color .2s ease,color .2s ease}
.vg-faq-icon svg{width:16px;height:16px;display:block}
.vg-faq-icon-v{transform-origin:center;transition:transform .2s ease,opacity .2s ease}
.vg-faq-item.is-open .vg-faq-icon-plus .vg-faq-icon-v{transform:rotate(90deg);opacity:0}
.vg-faq-item.is-open .vg-faq-icon-chevron{transform:rotate(180deg)}
.vg-faq-item.is-open .vg-faq-icon-arrow{transform:rotate(90deg)}
.vg-faq-answer{height:0;overflow:hidden}
/* Progressive fallback: an initially-open item stays readable even if JS is delayed.
   Inline heights set by faq.js still take precedence during open/close animation. */
.vg-faq-item.is-open .vg-faq-answer{height:auto}
.vg-faq-answer-inner{padding:0 0 18px;line-height:1.65}
.vg-faq-answer-inner>:first-child{margin-top:0}.vg-faq-answer-inner>:last-child{margin-bottom:0}
.vg-faq-animation-none .vg-faq-answer{height:auto;display:none}.vg-faq-animation-none .vg-faq-item.is-open .vg-faq-answer{display:block}
.vg-faq-animation-fade .vg-faq-answer-inner{opacity:0;transition:opacity .22s ease}.vg-faq-animation-fade .is-open .vg-faq-answer-inner{opacity:1}
.vg-faq-animation-soft-scale .vg-faq-answer-inner{opacity:0;transform:translateY(-5px) scale(.985);transform-origin:top;transition:opacity .24s ease,transform .24s ease}.vg-faq-animation-soft-scale .is-open .vg-faq-answer-inner{opacity:1;transform:none}
.vg-faq-template-dividers .vg-faq-item{border:0;border-bottom:1px solid #dfe3e6;border-radius:0!important}
.vg-faq-template-cards .vg-faq-item{border-color:#e3e5e7;background:#fff;box-shadow:0 8px 28px rgba(15,23,42,.05)}
.vg-faq-template-cards .vg-faq-question,.vg-faq-template-cards .vg-faq-answer-inner{padding-left:20px;padding-right:20px}
.vg-faq-template-soft .vg-faq-item{border-color:#eef0f2;background:#f7f8f8}
.vg-faq-template-soft .vg-faq-question,.vg-faq-template-soft .vg-faq-answer-inner{padding-left:20px;padding-right:20px}
.vg-faq-template-dark .vg-faq-item{border-color:#24313a;background:#111a20;color:#f8fafc}
.vg-faq-template-dark .vg-faq-question,.vg-faq-template-dark .vg-faq-answer-inner{padding-left:20px;padding-right:20px}
.vg-faq-template-dark .vg-faq-answer-inner{color:#d6dde2}
.vg-faq-question:focus-visible{outline:2px solid currentColor;outline-offset:-3px}
@media(max-width:767px){.vg-faq-question{gap:12px}.vg-faq-icon{width:26px;height:26px}}

/* Elementor can occasionally leave a custom widget wrapper marked as
   `elementor-invisible` even when no entrance animation is configured.
   In that state the FAQ is fully rendered but visibility:hidden on frontend.
   Only bypass the stale class when the wrapper has no saved animation setting. */
.elementor-widget-vangal-faq.elementor-invisible:not([data-settings*="_animation"]):not([data-settings*="animation"]){visibility:visible!important;opacity:1!important}