/* ==================== بدنه سایت ==================== */
body {
  font-family: sans-serif;
  margin:0; padding:0;
  background:#f5f5f5;
  color:#222;
  transition: background 0.5s ease, color 0.5s ease;
}

body[data-theme="dark"] {
  background:#111;
  color:#eee;
}

/* ==================== هدر ==================== */
.header {
  display:flex;
  justify-content: space-between;
  align-items:center;             
  padding:15px 20px;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
  position:sticky;
  top:0;
  z-index:1000;
  transition: background 0.5s ease;
}

body[data-theme="dark"] .header {
  background:#222;
}

.site-title {
  margin:0;
  font-size:28px; /* بزرگ‌تر برای موبایل */
  font-weight:bold;
}

.header-controls {
  display:flex;
  align-items:center;
  gap:12px;
}

/* ==================== دکمه تماس با پشتیبان ==================== */
.support-btn {
  display:inline-block;
  padding:10px 20px; /* بزرگ‌تر */
  background: #28a745;
  color:#fff;
  border-radius:8px;
  font-size:16px; /* بزرگ‌تر */
  font-weight:600;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  transition: all 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.support-btn:hover {
  background:#218838;
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
  transform: translateY(-2px) scale(1.03);
}

body[data-theme="dark"] .support-btn {
  background:#1e7e34;
  color:#fff;
}

body[data-theme="dark"] .support-btn:hover {
  background:#155724;
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
  transform: translateY(-2px) scale(1.03);
}

/* ==================== دسته‌بندی‌ها ==================== */
.categories {
  display:flex;
  flex-wrap:wrap;
  padding:12px 20px;
  background:#eee;
  transition: background 0.5s ease;
}

body[data-theme="dark"] .categories {
  background:#333;
}

.category {
  background:#fff;
  margin:6px;
  padding:10px 18px; /* بزرگ‌تر برای لمس راحت */
  border-radius:12px;
  cursor:pointer;
  transition: 0.3s, background 0.5s ease, color 0.5s ease;
  color:#222;
  font-size:16px; /* خواناتر */
}

.category:hover { background:#ddd; }
.category.active {
  background:#007bff;
  color:#fff;
}

body[data-theme="dark"] .category:not(.active) {
  background:#444;
  color:#fff;
}

/* روی موبایل دسته‌ها اسکرول افقی */
@media(max-width:768px) {
  .categories {
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .category {
    flex:0 0 auto;
    margin-right:12px;
  }
}

/* ==================== کارت‌ها ==================== */
.ads-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
  gap:20px;
  padding:20px;
}

.card {
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  padding:18px; /* بزرگ‌تر */
  display:flex;
  flex-direction:column;
  align-items:center;
  transition: transform 0.3s, box-shadow 0.3s, background 0.5s ease, color 0.5s ease;
}

.card img {
  width:100%;
  height:180px; /* بزرگ‌تر */
  object-fit:cover;
  border-radius:12px;
}

.card h3 {
  margin:12px 0 6px;
  font-size:18px; /* بزرگ‌تر */
}

.card p {
  margin:4px 0;
  font-size:15px;
  color:#555;
}

.btn {
  margin-top:12px;
  text-decoration:none;
  padding:10px 18px; /* بزرگ‌تر */
  background:#007bff;
  color:#fff;
  border-radius:8px;
  font-size:15px; /* بزرگ‌تر */
  transition:0.3s, background 0.5s ease;
}

.btn:hover { background:#0056b3; }

.options {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:12px;
}

.option {
  border:1px solid #ccc;
  border-radius:8px;
  padding:5px 10px; /* بزرگ‌تر */
  margin:4px;
  font-size:13px; /* بزرگ‌تر */
  background:#f0f0f0;
}

body[data-theme="dark"] .card {
  background:#1c1c1c;
}

body[data-theme="dark"] .card h3,
body[data-theme="dark"] .card p {
  color:#eee;
}

body[data-theme="dark"] .option {
  background:#333;
  border-color:#555;
  color:#eee;
}

body[data-theme="dark"] .btn {
  background:#0056b3;
}

/* ==================== کارت‌ها موبایل ==================== */
@media(max-width:768px) {
  .ads-grid {
    grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
    gap:18px;
    padding:15px;
  }
  .card img { height:150px; }
  .card h3 { font-size:17px; }
  .card p { font-size:14px; }
  .btn { font-size:14px; padding:8px 15px; }
  .option { font-size:12px; padding:4px 8px; }
}

@media(max-width:480px) {
  .ads-grid {
    grid-template-columns: 1fr;
    gap:15px;
    padding:12px;
  }
  .card img { height:140px; }
  .card h3 { font-size:16px; }
  .card p { font-size:14px; }
  .btn { font-size:14px; padding:8px 15px; }
  .option { font-size:12px; padding:4px 8px; }

  .header { flex-direction: column; align-items: flex-start; padding:12px; }
  .header-controls { margin-top:10px; flex-wrap:wrap; gap:8px; }
  .site-title { font-size:24px; margin-bottom:5px; }
}