/* =========================================
   SAVLIFE FAQ PAGE STYLES — css/faq.css
========================================= */

/* TABS */
.faq-tabs{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:40px;
}

.faq-tab{
  padding:12px 26px;
  border-radius:50px;
  border:2px solid rgba(11,124,255,0.15);
  background:#fff;
  font-weight:700;
  font-size:15px;
  color:var(--text);
  cursor:pointer;
  transition:0.3s;
  font-family:'Inter',sans-serif;
}

.faq-tab:hover{
  border-color:var(--blue);
  color:var(--blue);
}

.faq-tab.active{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
  box-shadow:0 8px 20px rgba(11,124,255,0.25);
}

/* CATEGORY PANELS */
.faq-category{
  display:none;
}

.faq-category.active{
  display:block;
  animation:fadeSlideIn 0.3s ease;
}

@keyframes fadeSlideIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

/* FAQ LIST (reusing global style.css .faq-list/.faq-item) */
.faq-list{
  max-width:800px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.faq-item{
  background:#fff;
  border-radius:14px;
  border:1px solid rgba(11,124,255,0.1);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:0.3s;
}

.faq-item:hover{
  border-color:rgba(11,124,255,0.2);
  box-shadow:0 10px 30px rgba(11,124,255,0.08);
}

.faq-question{
  padding:20px 24px;
  font-weight:700;
  font-size:16px;
  color:var(--dark);
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:0.3s;
  user-select:none;
  gap:16px;
}

.faq-question:hover{
  background:#f8fbff;
  color:var(--blue);
}

.faq-icon{
  transition:0.3s;
  color:var(--blue);
  flex-shrink:0;
}

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

.faq-item.open .faq-question{
  color:var(--blue);
  background:#f0f7ff;
}

.faq-answer{
  display:none;
  padding:0 24px 20px;
  color:var(--text);
  font-size:15px;
  line-height:1.8;
  border-top:1px solid #f1f5f9;
}

.faq-answer a{
  color:var(--blue);
  font-weight:600;
  text-decoration:underline;
}

.faq-item.open .faq-answer{
  display:block;
  animation:fadeSlideIn 0.25s ease;
}

/* STILL HAVE QUESTIONS CTA */
.faq-cta{
  background:linear-gradient(135deg,#eaf4ff,#f0f7ff);
  border-radius:24px;
  padding:48px 40px;
  text-align:center;
  margin-top:50px;
  border:1px solid rgba(11,124,255,0.1);
}

.faq-cta-icon{
  font-size:48px;
  margin-bottom:14px;
}

.faq-cta h3{
  font-size:26px;
  margin-bottom:10px;
  color:var(--dark);
}

.faq-cta p{
  color:var(--text);
  font-size:16px;
}

@media(max-width:768px){
  .faq-tabs{ flex-direction:column; align-items:center; }
  .faq-tab{ width:100%; max-width:320px; text-align:center; }
  .faq-question{ font-size:14px; padding:16px 18px; }
  .faq-cta{ padding:30px 20px; }
}