/* ============================================================
   Truly Permanent Beauty - home page FAQ, full width accordion.
   Font-family kahin set nahi ki - site ke apne fonts chalte hain.
   ============================================================ */

.tpb-faq { background: #fff; }

.tpb-faq__list {
  max-width: 980px;
  margin: 0 auto;
}

.tpb-faq__item {
  border: 1px solid #f0e2e5;
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.tpb-faq__item:hover { border-color: #e4c8ce; }

/* ---------- question row ---------- */
.tpb-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  margin: 0;
  border: 0;
  background: #fdf8f9;
  cursor: pointer;
  transition: background .18s ease;
}
.tpb-faq__q:hover { background: #fbeff2; }

.tpb-faq__q h3 {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.45;
  color: #2f2528;
  flex: 1 1 auto;
}

/* plus / minus */
.tpb-faq__icon {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f4dde2;
}
.tpb-faq__icon::before,
.tpb-faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #a5626e;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .22s ease, opacity .22s ease;
}
.tpb-faq__icon::before { width: 10px; height: 2px; }
.tpb-faq__icon::after  { width: 2px;  height: 10px; }

.tpb-faq__q[aria-expanded="true"] { background: #fbeff2; }
.tpb-faq__q[aria-expanded="true"] .tpb-faq__icon { background: #b8737f; }
.tpb-faq__q[aria-expanded="true"] .tpb-faq__icon::before { background: #fff; }
.tpb-faq__q[aria-expanded="true"] .tpb-faq__icon::after  { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

/* ---------- answer ---------- */
.tpb-faq__a { padding: 4px 20px 20px; }
.tpb-faq__a p {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: #55494d;
}
.tpb-faq__a a {
  color: #a5626e;
  text-decoration: none;
  border-bottom: 1px solid #eed7dc;
}
.tpb-faq__a a:hover { color: #8f5260; border-bottom-color: #b8737f; }

/* ---------- responsive ---------- */
@media (max-width: 767px) {
  .tpb-faq__q { padding: 14px 16px; gap: 12px; }
  .tpb-faq__q h3 { font-size: 15px; }
  .tpb-faq__a { padding: 4px 16px 17px; }
  .tpb-faq__a p { font-size: 14.5px; line-height: 1.72; }
}

@media (prefers-reduced-motion: reduce) {
  .tpb-faq__item, .tpb-faq__q, .tpb-faq__icon::before, .tpb-faq__icon::after {
    transition: none !important;
  }
}