/* Smart FAQ – Accordion v3.1 | RTL | Elementor */

/* ── Dynamic CSS variables ────────────────── */
:root {
  --sfaq-accent:         #2563eb;
  --sfaq-q-bg:           #ffffff;
  --sfaq-q-bg-open:      #eff6ff;
  --sfaq-q-text:         #1e293b;
  --sfaq-q-text-open:    #2563eb;
  --sfaq-a-bg:           #f8fafc;
  --sfaq-a-text:         #475569;
  --sfaq-border-color:   #e2e8f0;
  --sfaq-border-width:   1px;
  --sfaq-border-radius:  10px;
  --sfaq-icon-color:     #2563eb;
  --sfaq-font-size:      16px;
  --sfaq-font-family:    inherit;
  --sfaq-q-padding:      16px;
  --sfaq-a-padding:      16px;
  --sfaq-gap:            8px;
  --sfaq-title-size:     24px;
  --sfaq-title-color:    #1e293b;
  --sfaq-transition:     0.25s ease;
  --sfaq-shadow:         0 2px 8px rgba(0,0,0,0.06);
  --sfaq-shadow-open:    0 4px 20px rgba(0,0,0,0.09);
}

/* ── Wrapper ─────────────────────────────── */
.smart-faq-wrap {
  font-family:  var(--sfaq-font-family);
  font-size:    var(--sfaq-font-size);
  max-width:    860px;
  margin:       2.5rem auto;
  padding:      0 1rem;
  box-sizing:   border-box;
  color:        var(--sfaq-q-text);
}

/* ── Title ───────────────────────────────── */
.smart-faq-title {
  font-size:   var(--sfaq-title-size);
  color:       var(--sfaq-title-color);
  font-weight: 700;
  margin:      0 0 1.25rem;
  line-height: 1.3;
}

/* ── Search ──────────────────────────────── */
.smart-faq-search-wrap { margin-bottom: 1rem; }

.smart-faq-search {
  width:        100%;
  padding:      0.6rem 1rem;
  border:       var(--sfaq-border-width) solid var(--sfaq-border-color);
  border-radius:var(--sfaq-border-radius);
  font-size:    var(--sfaq-font-size);
  font-family:  var(--sfaq-font-family);
  color:        var(--sfaq-q-text);
  background:   var(--sfaq-q-bg);
  outline:      none;
  box-sizing:   border-box;
  transition:   border-color var(--sfaq-transition);
}

.smart-faq-search:focus {
  border-color: var(--sfaq-accent);
}

/* ── List ────────────────────────────────── */
.smart-faq-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--sfaq-gap);
}

/* ── Item ────────────────────────────────── */
.smart-faq-item {
  border-style:  solid;
  border-width:  var(--sfaq-border-width);
  border-color:  var(--sfaq-border-color);
  border-radius: var(--sfaq-border-radius);
  overflow:      hidden;
  background:    var(--sfaq-q-bg);
  box-shadow:    var(--sfaq-shadow);
  transition:    box-shadow var(--sfaq-transition);
}

.smart-faq-item.is-open {
  box-shadow: var(--sfaq-shadow-open);
}

/* ── Question button ─────────────────────── */
.smart-faq-question {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  padding:         var(--sfaq-q-padding);
  background:      var(--sfaq-q-bg);
  border:          none;
  cursor:          pointer;
  font-size:       var(--sfaq-font-size);
  font-family:     var(--sfaq-font-family);
  font-weight:     600;
  color:           var(--sfaq-q-text);
  text-align:      inherit;
  gap:             1rem;
  line-height:     1.4;
  transition:      background var(--sfaq-transition), color var(--sfaq-transition);
  -webkit-tap-highlight-color: transparent;
}

/* Hover only on CLOSED items */
.smart-faq-item:not(.is-open) .smart-faq-question:hover {
  background: color-mix(in srgb, var(--sfaq-accent) 8%, var(--sfaq-q-bg));
}

/* Kill any browser :focus/:active/:visited color bleed */
.smart-faq-question:focus        { outline: 2px solid var(--sfaq-accent); outline-offset: -2px; }
.smart-faq-question:focus:not(:focus-visible) { outline: none; }
.smart-faq-question:active       { background: inherit; color: inherit; }
.smart-faq-question:visited      { background: inherit; color: inherit; }

/* Override theme/WP button styles that cause color bleed */
.smart-faq-wrap .smart-faq-question,
.smart-faq-wrap .smart-faq-question:link,
.smart-faq-wrap .smart-faq-question:visited,
.smart-faq-wrap .smart-faq-question:hover,
.smart-faq-wrap .smart-faq-question:active {
  box-shadow:      none;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Closed item — explicit base state */
.smart-faq-item:not(.is-open) > .smart-faq-question {
  background: var(--sfaq-q-bg)   !important;
  color:      var(--sfaq-q-text) !important;
}
.smart-faq-item:not(.is-open) .smart-faq-question:hover {
  background: color-mix(in srgb, var(--sfaq-accent) 8%, var(--sfaq-q-bg)) !important;
}

/* Open state */
.smart-faq-item.is-open > .smart-faq-question {
  background: var(--sfaq-q-bg-open);
  color:      var(--sfaq-q-text-open);
}
.smart-faq-item.is-open > .smart-faq-question:hover {
  background: var(--sfaq-q-bg-open);
  color:      var(--sfaq-q-text-open);
}

.smart-faq-q-text { flex: 1; }

/* ── Icon ────────────────────────────────── */
.smart-faq-icon {
  flex-shrink: 0;
  width:       22px;
  height:      22px;
  color:       var(--sfaq-icon-color);
  transition:  transform var(--sfaq-transition);
  display:     flex;
  align-items: center;
}

.smart-faq-icon svg {
  width:   100%;
  height:  100%;
  display: block;
  stroke:  currentColor;
}

.smart-faq-item.is-open .smart-faq-icon {
  transform: rotate(180deg);
}

/* ── Answer body ─────────────────────────── */
.smart-faq-body {
  overflow:    hidden;
  max-height:  0;
  transition:  max-height 0.3s ease;
}

.smart-faq-body[hidden] {
  display:    block !important;
  visibility: hidden;
  max-height: 0;
}

.smart-faq-item.is-open .smart-faq-body {
  max-height:  1500px;
  visibility:  visible;
}

.smart-faq-body-inner {
  border-top-style: solid;
  border-top-width: var(--sfaq-border-width);
  border-top-color: var(--sfaq-border-color);
  background:       var(--sfaq-a-bg);
}

.smart-faq-body-inner-pad {
  padding:     var(--sfaq-a-padding);
  color:       var(--sfaq-a-text);
  font-size:   var(--sfaq-font-size);
  line-height: 1.8;
}

.smart-faq-body-inner-pad p:first-child { margin-top:    0; }
.smart-faq-body-inner-pad p:last-child  { margin-bottom: 0; }
.smart-faq-body-inner-pad a             { color: var(--sfaq-accent); }

/* ── No results ──────────────────────────── */
.smart-faq-no-results {
  text-align:  center;
  color:       var(--sfaq-a-text);
  padding:     2rem;
  font-style:  italic;
}

/* ── RTL ─────────────────────────────────── */
[dir="rtl"] .smart-faq-question,
.rtl        .smart-faq-question,
html[lang^="he"] .smart-faq-question,
html[lang^="ar"] .smart-faq-question {
  flex-direction: row-reverse;
}

/* ── Mobile ──────────────────────────────── */
@media (max-width: 600px) {
  .smart-faq-title { font-size: max(1.2rem, var(--sfaq-title-size)); }
}

/* ── Elementor ───────────────────────────── */
.elementor-section-full_width .smart-faq-wrap,
.elementor-widget-wrap        .smart-faq-wrap,
.e-con                        .smart-faq-wrap,
.e-con-inner                  .smart-faq-wrap {
  max-width: 100%;
  padding:   0;
}

/* ── FAQ Hub ─────────────────────────────────── */
.smart-faq-hub {
  max-width:   900px;
  margin:      2rem auto;
  padding:     0 1rem;
  box-sizing:  border-box;
}

.smart-faq-hub-main-title {
  font-size:   var(--sfaq-title-size);
  color:       var(--sfaq-title-color);
  font-weight: 700;
  margin:      0 0 1.5rem;
}

.smart-faq-hub-search-wrap {
  margin-bottom: 1.5rem;
}

/* Each group — spacing between groups when header is shown */
.smart-faq-hub-group {
  margin-bottom: 2.5rem;
}

/* Override smart-faq-wrap margin inside hub
   3-class selector + !important on layout props only */
.smart-faq-hub .smart-faq-hub-group .smart-faq-wrap {
  margin:    0 !important;
  padding:   0 !important;
  max-width: 100% !important;
}

/* When no header — groups sit flush, gap between them = item gap from design settings */
.smart-faq-hub-group.no-header {
  margin-bottom: 0;
}

/* Gap between consecutive no-header groups = same as item gap */
.smart-faq-hub-group.no-header + .smart-faq-hub-group.no-header {
  margin-top: var(--sfaq-gap);
}

.smart-faq-hub-group-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   .75rem;
  padding-bottom:  .6rem;
  border-bottom:   2px solid var(--sfaq-border-color);
  gap:             1rem;
}

.smart-faq-hub-group-title {
  font-size:   1.15rem;
  font-weight: 700;
  color:       var(--sfaq-q-text);
  margin:      0;
}

.smart-faq-hub-group-title a {
  color:           var(--sfaq-accent);
  text-decoration: none;
}
.smart-faq-hub-group-title a:hover { text-decoration: underline; }

.smart-faq-hub-count {
  font-size:     12px;
  color:         var(--sfaq-a-text);
  background:    var(--sfaq-a-bg);
  border:        1px solid var(--sfaq-border-color);
  border-radius: 20px;
  padding:       3px 10px;
  white-space:   nowrap;
  flex-shrink:   0;
}

.smart-faq-hub-empty {
  text-align:  center;
  color:       var(--sfaq-a-text);
  padding:     3rem 1rem;
  font-style:  italic;
}

/* Elementor */
.elementor .smart-faq-hub,
.e-con      .smart-faq-hub {
  max-width: 100%;
  padding:   0;
}