/* JBK FAQs — modern design */
body {
  background: var(--background);
  color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--secondary);
}

a {
  color: var(--primary);
}
a:hover, a:focus, a:active {
  color: var(--accent);
}

.btn, .button, button, input[type="submit"], input[type="button"] {
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--accent);
}
.btn:hover, .button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
  background: var(--secondary);
  color: var(--accent);
}

.jbk-faqs{ background: var(--background); color: var(--text); --card:#ffffff; --border:#eef2f2; --shadow: 0 10px 20px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04); }
.jbk-faqs .container{ max-width:1200px; margin-inline:auto; padding:72px 20px; }

/* Reveal */
.jbk-faqs .reveal{ opacity:0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.jbk-faqs section.in-view .reveal{ opacity:1; transform:none; transition-delay: calc(var(--i, 0) * 90ms); }

/* Hero */
.jbk-faqs .hero{ padding: 96px 0 40px; background: radial-gradient(1200px 400px at 20% -10%, rgba(214,179,106,0.18) 0%, rgba(255,255,255,0) 60%), linear-gradient(180deg, #ffffff 0%, #F5F3EF 100%); position:relative; overflow:hidden; }
.jbk-faqs .hero::after{ content:""; position:absolute; inset:auto -20% -30% -20%; height:220px; background: radial-gradient(60% 140% at 50% 0%, rgba(167,139,81,.10), rgba(167,139,81,0)); }
.jbk-faqs .eyebrow{ display:inline-block; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color: var(--primary); background: linear-gradient(90deg, rgba(167,139,81,.12), rgba(214,179,106,.12)); padding:8px 12px; border-radius:999px; margin-bottom:12px; }
.jbk-faqs .hero h1{ font-size: clamp(2rem, 3vw + 1rem, 3.1rem); line-height:1.1; margin:0 0 10px; }
.jbk-faqs .hero .lead{ color:#374151; font-size: clamp(1rem, .6vw + .9rem, 1.15rem); margin:0; }
.jbk-faqs .hero-card{ background: var(--card); border:1px solid var(--border); border-radius:16px; padding:14px 16px; margin-top:16px; display:flex; align-items:center; gap:12px; box-shadow: var(--shadow); }
.jbk-faqs .icon-circle.small{ width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--primary), var(--secondary)); color:#fff; box-shadow: 0 8px 20px rgba(167,139,81,.25); }
.jbk-faqs .hero-note{ margin:0; color:#4b5563; }

/* Tools: Search + Filters */
.jbk-faqs .faq-tools{ padding: 8px 0 8px; }
.jbk-faqs .search-bar{ position:relative; display:flex; align-items:center; background:#fff; border:1px solid #e9f3f2; border-radius:14px; padding:10px 12px; box-shadow: 0 6px 14px rgba(0,0,0,.06); max-width:700px; }
.jbk-faqs .search-bar i{ color:#6b7280; margin-inline:8px; }
.jbk-faqs .search-bar input{ flex:1; border:none; outline:none; font-size:1rem; background:transparent; color: var(--text); }
.jbk-faqs .search-bar input::placeholder{ color:#9aa3af; }

.jbk-faqs .filters{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.jbk-faqs .chips{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; }
.jbk-faqs .chip{ background:#fff; border:1px solid #e9e2d2; color: var(--primary); padding:8px 12px; border-radius:999px; font-weight:600; font-size:.9rem; box-shadow: 0 2px 6px rgba(0,0,0,.04); cursor:pointer; }
.jbk-faqs .chip[aria-pressed="true"], .jbk-faqs .chip.active{ background: linear-gradient(135deg, var(--primary), var(--secondary)); color:#fff !important; border-color: transparent; box-shadow: 0 10px 22px rgba(167,139,81,.25); }
.jbk-faqs .results-info{ color:#6b7280; font-size:.95rem; }

/* Fix: keep chip colors consistent on focus (override global button focus) */
.jbk-faqs .filters .chip:focus{ outline:none; background:#fff !important; color: var(--primary) !important; border-color:#e9e2d2 !important; box-shadow:0 0 0 3px rgba(167,139,81,.15); }
.jbk-faqs .filters .chip[aria-pressed="true"]:focus,
.jbk-faqs .filters .chip.active:focus{ background: linear-gradient(135deg, var(--primary), var(--secondary)) !important; color:#fff !important; border-color:transparent !important; box-shadow:0 0 0 3px rgba(167,139,81,.25); }

/* Accordion */
.jbk-faqs .faq-list{ padding: 10px 0 64px; }
.jbk-faqs .accordion{ display:grid; gap:14px; }
.jbk-faqs .faq-item{ background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow: var(--shadow); overflow:hidden; }

/* Ensure FAQ question layout keeps category visible */
.jbk-faqs .faq-question{
  display:flex;
  justify-content: space-between; /* restore spacing */
  flex-wrap: nowrap; /* prevent wrap */
  width:100%;
  text-align:start;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  font-weight:700;
  background:none;
  border:none;
  cursor:pointer;
  color: var(--text);
}
.jbk-faqs .faq-question .q-text{
  flex: 1 1 auto;
  min-width: 0; /* allow text to wrap instead of pushing chips off */
  overflow-wrap: anywhere;
}
.jbk-faqs .faq-question .q-meta{
  flex: 0 0 auto;
  white-space: nowrap;
  order: 2; /* before caret */
  margin-inline-start: 12px;
}

/* Pill style for per-question category label */
.jbk-faqs .faq-question .q-meta{
  background:#F5F3EF;
  border:1px solid #e9e2d2;
  color: var(--primary);
  padding:5px 10px;
  border-radius:999px;
  font-weight:600;
  font-size:.85rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}

.jbk-faqs .faq-question::after{
  order: 3;
  margin-inline-start: 10px;
}

/* Small screens: if wrapping, place category below but keep it visible */
@media (max-width: 640px){
  .jbk-faqs .faq-question{ flex-wrap: wrap; }
  .jbk-faqs .faq-question .q-meta{ order: 3; width: auto; display: inline-flex; align-self: flex-start; margin-top: 8px; margin-inline-start: 0; }
}

.jbk-faqs .faq-answer{ padding:0 20px; color:#374151; line-height:1.65; height:0; overflow:hidden; transition: height .25s ease; border-top:1px solid #f1f5f9; }
.jbk-faqs .faq-answer p{ margin:14px 0 18px; }

.jbk-faqs .no-results{ margin-top:8px; color:#6b7280; }

/* CTA */
.jbk-faqs .cta{ text-align:center; margin-top: 0; padding-bottom: 64px; }
.jbk-faqs .btn.btn-primary{ display:inline-flex; align-items:center; gap:10px; background: linear-gradient(135deg, var(--primary), var(--secondary)); color:#fff; font-weight:700; padding:12px 18px; border-radius:999px; text-decoration:none; box-shadow: 0 10px 22px rgba(167,139,81,.3); transition: transform .2s ease, box-shadow .2s ease; }
.jbk-faqs .btn.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(167,139,81,.35); }

/* Responsive */
@media (max-width: 1024px){
  .jbk-faqs .filters{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 680px){
  .jbk-faqs .container{ padding:56px 16px; }
  .jbk-faqs .hero{ padding: 72px 0 28px; }
}

/* RTL tweaks */
body.is-ar .jbk-faqs{ direction: rtl; }
body.is-ar .jbk-faqs .faq-question::after{ transform: scaleX(-1); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .jbk-faqs .reveal{ opacity:1; transform:none; transition:none; }
  .jbk-faqs .faq-answer, .jbk-faqs .btn{ transition:none; }
}

.jbk-faqs .icon-circle,
.jbk-faqs .icon-circle.small {
  background: linear-gradient(135deg, #fff 0%, #f9f6ef 60%, #e9e2d2 100%) !important;
  color: var(--primary) !important;
  box-shadow: 0 4px 12px rgba(167,139,81,.10) !important;
  border: 1.5px solid #e9e2d2 !important;
}

.jbk-faqs .btn.btn-primary {
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%) !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(167,139,81,.13) !important;
  border-radius: 999px;
  border: none;
  transition: background .18s, box-shadow .18s;
}
.jbk-faqs .btn.btn-primary:hover {
  background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 100%) !important;
  color: var(--secondary) !important;
  box-shadow: 0 12px 32px rgba(214,179,106,0.18) !important;
}