/* SmartFAQ Pro v2.0 - Frontend Styles | Author: Waleed Ahmad */
:root { --sfaq-primary: #e74c3c; --sfaq-radius: 10px; --sfaq-transition: 0.28s ease; }
.smartfaq-section { margin: 44px 0 32px; font-family: inherit; }
.smartfaq-title { font-size: 1.55em; font-weight: 700; color: #1a1a1a; margin: 0 0 22px; padding-bottom: 12px; border-bottom: 3px solid var(--sfaq-primary); display: inline-block; }
.smartfaq-container { display: flex; flex-direction: column; gap: 10px; }
.sfaq-item { transition: box-shadow var(--sfaq-transition); }

/* ── ACCORDION BASE ── */
.sfaq-accordion-item { border-radius: var(--sfaq-radius); overflow: hidden; }
.sfaq-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; border: none; cursor: pointer; text-align: left; font-size: 15px; font-weight: 600; color: inherit; transition: background var(--sfaq-transition), color var(--sfaq-transition); }
.sfaq-trigger-text { flex: 1; }
.sfaq-panel { overflow: hidden; }
.sfaq-panel-inner { font-size: 14px; line-height: 1.75; color: #555; }

/* Icons */
.sfaq-icon-plus { width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; flex-shrink: 0; position: relative; transition: transform var(--sfaq-transition); }
.sfaq-icon-plus::before,.sfaq-icon-plus::after { content:''; position: absolute; background: currentColor; }
.sfaq-icon-plus::before { width:10px;height:2px;top:50%;left:50%;transform:translate(-50%,-50%); }
.sfaq-icon-plus::after { width:2px;height:10px;top:50%;left:50%;transform:translate(-50%,-50%);transition:opacity .2s; }
.sfaq-trigger[aria-expanded="true"] .sfaq-icon-plus::after { opacity: 0; }
.sfaq-icon-arrow { width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform var(--sfaq-transition);flex-shrink:0;margin-right:3px; }
.sfaq-trigger[aria-expanded="true"] .sfaq-icon-arrow { transform: rotate(-135deg); }
.sfaq-icon-circle { width:22px;height:22px;border-radius:50%;background:currentColor;flex-shrink:0;position:relative; }
.sfaq-icon-circle::before,.sfaq-icon-circle::after { content:'';position:absolute;background:#fff; }
.sfaq-icon-circle::before { width:10px;height:2px;top:50%;left:50%;transform:translate(-50%,-50%); }
.sfaq-icon-circle::after { width:2px;height:10px;top:50%;left:50%;transform:translate(-50%,-50%);transition:opacity .2s; }
.sfaq-trigger[aria-expanded="true"] .sfaq-icon-circle::after { opacity: 0; }

/* 1. Classic Accordion */
.sfaq-accordion-classic .sfaq-accordion-item { border: 1px solid #e0e0e0; }
.sfaq-accordion-classic .sfaq-trigger { background: #fff; padding: 17px 20px; }
.sfaq-accordion-classic .sfaq-trigger:hover, .sfaq-accordion-classic .sfaq-trigger[aria-expanded="true"] { background: var(--sfaq-primary); color: #fff; }
.sfaq-accordion-classic .sfaq-panel-inner { padding: 16px 20px; background: #fafafa; border-top: 1px solid #eee; }

/* 2. Minimal Accordion */
.sfaq-accordion-minimal .sfaq-accordion-item { border-bottom: 1px solid #e5e5e5; border-radius: 0; }
.sfaq-accordion-minimal .sfaq-trigger { background: transparent; padding: 16px 4px; color: #222; }
.sfaq-accordion-minimal .sfaq-trigger[aria-expanded="true"] .sfaq-trigger-text { color: var(--sfaq-primary); }
.sfaq-accordion-minimal .sfaq-panel-inner { padding: 0 4px 16px; color: #666; }

/* 3. Filled Accordion */
.sfaq-accordion-filled .sfaq-accordion-item { border-radius: 8px; overflow: hidden; margin-bottom: 2px; }
.sfaq-accordion-filled .sfaq-trigger { background: var(--sfaq-primary); color: #fff; padding: 16px 20px; opacity: 0.85; }
.sfaq-accordion-filled .sfaq-trigger:hover, .sfaq-accordion-filled .sfaq-trigger[aria-expanded="true"] { opacity: 1; }
.sfaq-accordion-filled .sfaq-panel-inner { padding: 16px 20px; background: #fff; border: 1px solid #eee; border-top: none; }

/* 4. Rounded Accordion */
.sfaq-accordion-rounded .sfaq-accordion-item { border-radius: 50px; border: 2px solid var(--sfaq-primary); overflow: visible; margin-bottom: 8px; }
.sfaq-accordion-rounded .sfaq-accordion-item.sfaq-open { border-radius: 20px; }
.sfaq-accordion-rounded .sfaq-trigger { background: #fff; padding: 14px 24px; border-radius: 50px; color: var(--sfaq-primary); }
.sfaq-accordion-rounded .sfaq-trigger[aria-expanded="true"] { border-radius: 20px 20px 0 0; background: var(--sfaq-primary); color: #fff; }
.sfaq-accordion-rounded .sfaq-panel-inner { padding: 14px 24px; background: #fff; }

/* 5. Shadow Accordion */
.sfaq-accordion-shadow .sfaq-accordion-item { border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); background: #fff; }
.sfaq-accordion-shadow .sfaq-accordion-item:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.13); }
.sfaq-accordion-shadow .sfaq-trigger { background: #fff; padding: 18px 22px; border-radius: 12px; }
.sfaq-accordion-shadow .sfaq-trigger[aria-expanded="true"] { background: var(--sfaq-primary); color: #fff; border-radius: 12px 12px 0 0; }
.sfaq-accordion-shadow .sfaq-panel-inner { padding: 16px 22px; }

/* 6. Gradient Accordion */
.sfaq-accordion-gradient .sfaq-accordion-item { border-radius: 10px; overflow: hidden; }
.sfaq-accordion-gradient .sfaq-trigger { background: linear-gradient(135deg, var(--sfaq-primary), color-mix(in srgb, var(--sfaq-primary) 60%, #000)); color: #fff; padding: 16px 20px; opacity: 0.82; }
.sfaq-accordion-gradient .sfaq-trigger:hover, .sfaq-accordion-gradient .sfaq-trigger[aria-expanded="true"] { opacity: 1; }
.sfaq-accordion-gradient .sfaq-panel-inner { padding: 16px 20px; background: #fafafa; }

/* 7. Simple Clean */
.sfaq-simple-clean { border-bottom: 1px solid #ebebeb; padding: 18px 0; }
.sfaq-simple-clean:last-child { border-bottom: none; }
.sfaq-simple-clean .sfaq-sq { font-weight: 700; color: #111; margin-bottom: 8px; font-size: 15px; }
.sfaq-simple-clean .sfaq-sa { color: #666; font-size: 14px; line-height: 1.7; padding-left: 20px; }

/* 8. Simple with Icon */
.sfaq-simple-icon { padding: 14px 0; border-bottom: 1px solid #f0f0f0; display: flex; flex-direction: column; gap: 8px; }
.sfaq-simple-icon .sfaq-qbadge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: var(--sfaq-primary); color: #fff; border-radius: 50%; font-size: 12px; font-weight: 800; margin-right: 10px; flex-shrink: 0; }
.sfaq-simple-icon .sfaq-abadge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: #eee; color: #666; border-radius: 50%; font-size: 12px; font-weight: 800; margin-right: 10px; flex-shrink: 0; }
.sfaq-simple-icon .sfaq-sq { display: flex; align-items: flex-start; font-weight: 700; color: #111; font-size: 15px; }
.sfaq-simple-icon .sfaq-sa { display: flex; align-items: flex-start; color: #666; font-size: 14px; line-height: 1.7; }

/* 9. Card Flat */
.sfaq-card-flat { border: 1px solid #e0e0e0; border-radius: 8px; padding: 18px 20px; background: #fff; }
.sfaq-card-flat .sfaq-cq { font-weight: 700; font-size: 15px; color: #111; margin-bottom: 10px; }
.sfaq-card-flat .sfaq-ca { font-size: 14px; color: #666; line-height: 1.7; }

/* 10. Elevated Cards */
.sfaq-card-elevated { border-radius: 12px; padding: 20px 22px; background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,0.09); transition: transform .25s, box-shadow .25s; }
.sfaq-card-elevated:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.14); }
.sfaq-card-elevated .sfaq-cq { font-weight: 700; color: #111; margin-bottom: 10px; font-size: 15px; }
.sfaq-card-elevated .sfaq-ca { color: #666; font-size: 14px; line-height: 1.75; }

/* 11. Numbered Cards */
.sfaq-card-numbered { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 18px; }
.sfaq-num-badge { min-width: 44px; height: 44px; background: var(--sfaq-primary); color: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; flex-shrink: 0; }
.sfaq-card-body .sfaq-cq { font-weight: 700; color: #111; margin-bottom: 8px; font-size: 15px; }
.sfaq-card-body .sfaq-ca { color: #666; font-size: 14px; line-height: 1.7; }

/* 12. Colored Side Cards */
.sfaq-card-colored { border-left: 4px solid var(--sfaq-primary); border-radius: 0 10px 10px 0; background: #fff; padding: 16px 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.sfaq-card-colored .sfaq-cq { font-weight: 700; color: var(--sfaq-primary); margin-bottom: 8px; font-size: 15px; }
.sfaq-card-colored .sfaq-ca { color: #555; font-size: 14px; line-height: 1.7; }

/* 13. Split Panel */
.sfaq-card-split { display: flex; border-radius: 10px; overflow: hidden; border: 1px solid #e5e5e5; }
.sfaq-split-q { flex: 0 0 38%; background: var(--sfaq-primary); color: #fff; padding: 18px; font-weight: 700; font-size: 14px; display: flex; align-items: center; }
.sfaq-split-a { flex: 1; padding: 18px; background: #fff; color: #555; font-size: 14px; line-height: 1.7; }

/* 14. Card Toggle (flip) */
.sfaq-card-toggle { position: relative; border-radius: 12px; overflow: hidden; cursor: pointer; min-height: 80px; background: #fff; border: 2px solid var(--sfaq-primary); }
.sfaq-toggle-front { padding: 22px 20px; font-weight: 700; font-size: 15px; color: #111; transition: opacity .25s; }
.sfaq-toggle-back { position: absolute; inset: 0; background: var(--sfaq-primary); color: #fff; padding: 22px 20px; font-size: 14px; line-height: 1.7; opacity: 0; transition: opacity .3s; display: flex; align-items: center; }
.sfaq-card-toggle.sfaq-flipped .sfaq-toggle-front { opacity: 0; }
.sfaq-card-toggle.sfaq-flipped .sfaq-toggle-back { opacity: 1; }

/* 15. Grid Layout */
.sfaq-grid-masonry { width: 100%; }
.smartfaq-container:has(.sfaq-grid-item) { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.sfaq-grid-item { border: 1px solid #e0e0e0; border-radius: 10px; padding: 18px; background: #fff; }
.sfaq-grid-item .sfaq-cq { font-weight: 700; color: #111; margin-bottom: 10px; font-size: 14px; }
.sfaq-grid-item .sfaq-ca { color: #666; font-size: 13px; line-height: 1.65; }

/* 16. Timeline */
.smartfaq-container:has(.sfaq-timeline-item) { gap: 0; }
.sfaq-timeline-item { display: flex; gap: 20px; padding-bottom: 24px; position: relative; }
.sfaq-timeline-item::before { content:''; position:absolute; left:20px; top:40px; bottom:0; width:2px; background: #eee; }
.sfaq-timeline-item:last-child::before { display: none; }
.sfaq-tl-node { width: 40px; height: 40px; border-radius: 50%; background: var(--sfaq-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0; z-index: 1; }
.sfaq-tl-content .sfaq-cq { font-weight: 700; color: #111; margin-bottom: 6px; font-size: 15px; }
.sfaq-tl-content .sfaq-ca { color: #666; font-size: 14px; line-height: 1.7; }

/* 17. Stepper */
.smartfaq-container:has(.sfaq-stepper-item) { gap: 0; }
.sfaq-stepper-item { display: flex; align-items: flex-start; gap: 0; margin-bottom: 20px; }
.sfaq-step-num { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--sfaq-primary); color: var(--sfaq-primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0; background: #fff; }
.sfaq-step-line { width: 24px; border-top: 2px dashed #ddd; margin-top: 17px; flex-shrink: 0; }
.sfaq-step-content { flex: 1; padding: 8px 14px; border-radius: 8px; border: 1px solid #eee; background: #fff; }
.sfaq-step-content .sfaq-cq { font-weight: 700; color: #111; margin-bottom: 6px; font-size: 15px; }
.sfaq-step-content .sfaq-ca { color: #666; font-size: 14px; line-height: 1.7; }

/* 18. Dark Boxed */
.sfaq-dark-item { background: #1e1e2e; border-radius: 12px; padding: 20px 22px; border: 1px solid #333; }
.sfaq-dark-item .sfaq-cq { font-weight: 700; color: #f0f0f0; margin-bottom: 10px; font-size: 15px; }
.sfaq-dark-item .sfaq-ca { color: #aaa; font-size: 14px; line-height: 1.7; }

/* 19. Bubble Style */
.sfaq-bubble-pair { display: flex; flex-direction: column; gap: 8px; }
.sfaq-bubble { padding: 14px 18px; border-radius: 18px; max-width: 88%; font-size: 14px; line-height: 1.65; }
.sfaq-bubble-q { background: var(--sfaq-primary); color: #fff; border-bottom-left-radius: 4px; align-self: flex-start; font-weight: 600; }
.sfaq-bubble-a { background: #f0f0f0; color: #444; border-bottom-right-radius: 4px; align-self: flex-end; }

/* 20. Highlighted Rows */
.sfaq-highlight-row { padding: 16px 20px; border-radius: 8px; transition: background .2s; }
.sfaq-row-even { background: #f8f9fa; }
.sfaq-row-odd { background: #fff; border: 1px solid #f0f0f0; }
.sfaq-highlight-row:hover { background: color-mix(in srgb, var(--sfaq-primary) 8%, #fff); }
.sfaq-highlight-row .sfaq-cq { font-weight: 700; color: var(--sfaq-primary); margin-bottom: 8px; font-size: 15px; }
.sfaq-highlight-row .sfaq-ca { color: #555; font-size: 14px; line-height: 1.7; }

/* Responsive */
@media (max-width: 640px) {
  .smartfaq-title { font-size: 1.25em; }
  .sfaq-card-split { flex-direction: column; }
  .sfaq-split-q { flex: none; }
  .smartfaq-container:has(.sfaq-grid-item) { grid-template-columns: 1fr; }
}