/* Frontend styling for WP FAQ Manager */
.faq-wrapper { max-width:900px; margin:0 auto; font-family:system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }
.faq-wrapper h2 { font-size:22px; margin-top:24px; color:#ffffff; }
.faq-wrapper details { border:1px solid #e6e6e6; border-radius:6px; margin-bottom:10px; overflow:hidden; }
.faq-wrapper summary { list-style:none; cursor:pointer; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; font-weight:600; }
.faq-wrapper summary::-webkit-details-marker { display:none; }
.faq-wrapper .faq-answer { padding:12px 16px; background:#fff; color:#444; }
.faq-wrapper .faq-toggle { font-weight:700; color:#ffffff; margin-left:12px; }

/* Respect data attributes from shortcode rendering */
.faq-wrapper details[data-border] { border-color: attr(data-border color, #e6e6e6); }
.faq-wrapper details[data-spacing] summary, .faq-wrapper details[data-spacing] .faq-answer { padding: calc(attr(data-spacing number) * 1px); }

/* Icon set handling: use the .faq-toggle text by default; we can also replace with arrows using pseudo-elements */
.faq-wrapper details[data-icon="caret"] summary .faq-toggle::before { content: '\25B8'; display:inline-block; transform:rotate(0deg); margin-right:8px; transition:transform .15s ease; }
.faq-wrapper details[data-icon="caret"][open] summary .faq-toggle::before { transform:rotate(90deg); }
.faq-wrapper details[data-icon="chevron"] summary .faq-toggle::before { content: '\203A'; display:inline-block; transform:rotate(0deg); margin-right:8px; transition:transform .15s ease; }
.faq-wrapper details[data-icon="chevron"][open] summary .faq-toggle::before { transform:rotate(90deg); }
.faq-wrapper details[data-icon="plus_minus"] summary .faq-toggle::before { content: attr(data-toggle '+' ); display:inline-block; margin-right:8px; }
.faq-wrapper details[data-icon="plus"] summary .faq-toggle::before { content: '+'; display:inline-block; margin-right:8px; }

/* Colors applied inline via style attrs are preferred; fallback styles */
.faq-wrapper summary { background: #2c3138; color: #ffffff; }
.faq-wrapper .faq-answer { background: #ffffff; color: #2c3138; }