/* Generated by BC Custom Fonts & CSS on 2025-08-28T10:57:28+00:00 */

/* --- Custom CSS --- */
.the-post-tags a {background: #3a964b;color: white;}

	#faq {
  margin-top: 3rem;
  padding: 1rem;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  direction: rtl;
}

/* ===== FAQ Container ===== */
#faq details {
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 0.8rem 0;

  overflow: hidden;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* ===== Smooth Expand/Collapse Animation ===== */
#faq details[open] summary + * {
  animation: openDetails 0.35s ease-in-out;
}
@keyframes openDetails {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Summary (Clickable Title) ===== */
#faq details summary {
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  padding: 0.75rem 3rem 0.75rem 2.5rem;
  position: relative;
  border: none;
  outline: none;
  list-style: none;
}

/* ===== Custom Expand/Collapse Icon ===== */
#faq details summary::before {
 content: "◀";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: white;
  transition: transform 0.3s ease, color 0.3s ease;
}

#faq details[open] summary::before {
  content: "▼";
  color: white;
  transform: rotate(0deg) translateY(-50%);
}

/* ===== Answer Text Styling ===== */
#faq details p {
  padding: 0 1.2rem 1rem 1.2rem;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  
  transition: opacity 0.3s ease;
}

/* ===== Highlight on Open ===== */
#faq details[open] {
  background-color: #38934850;
  border-color: #38934850;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  #faq details summary {
    font-size: 1rem;
  }
  #faq details p {
    font-size: 0.9rem;
  }
}