@import url('https://fonts.googleapis.com/css2?family=vazirmatn:wght@400;600&display=swap');

:root {
  --body-color: #E4E9F7;
  --sidebar-color: #FFF;
  --primary-color: #ff3e66;
  --primary-color-light: #d1d1d1;
  --toggle-color: #DDD;
  --text-color: #383838;
  --transition: 0.3s;
}

/* Dark mode */
body.dark {
  --body-color: #18191a;
  --sidebar-color: #242526;
  --primary-color: #3a3b3c;
  --primary-color-light: #3a3b3c;
  --toggle-color: #fff;
  --text-color: #eaeaea;
}

body {
  min-height: 100vh;
  background: var(--body-color);
  color: var(--text-color);
  font-family: 'vazirmatn', sans-serif;
  transition: var(--transition);
}

.sidebar {
  position: fixed;
  left: 0; top: 0;
  width: 250px;
  height: 100%;
  background: var(--sidebar-color);
  padding: 10px 14px;
  transition: var(--transition);
  z-index: 100;
}

.sidebar.close {
  width: 60px;
}
.sidebar ul.menu {
  margin-top: 40px;
  list-style: none;
  padding: 0;
}
.sidebar ul.menu li {
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.sidebar .icon, .sidebar .text {
  transition: var(--transition);
}
.sidebar.close .text {
  opacity: 0;
}
.sidebar .toggle {
  cursor: pointer; font-size: 24px;
}

.bottom-content {
  position: absolute;
  bottom: 2rem; left: 0;
  width: 100%;
}

.toggle-switch {
  cursor: pointer;
}
.mode-text {
  padding-left: 16px;
}

.home {
  margin-left: 250px;
  background: var(--body-color);
  padding: 24px;
  min-height: 100vh;
  transition: var(--transition);
}
.sidebar.close ~ .home {
  margin-left: 70px;
}

@media (max-width: 700px) {
  .sidebar { width: 60px; }
  .home { margin-left: 60px; }
}

/* FAQ styles */
.faq-section { max-width: 700px; margin: 2rem auto; }
.faq { border-bottom: 1px solid #ccc; cursor: pointer; }
.faq-question { font-weight: 600; padding: 1rem; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: var(--primary-color-light); padding: 0 1rem;}
.faq.active .faq-answer { max-height: 200px; padding: 1rem; }