/* ============================================================
   Umrah Page
   ============================================================ */

.guides-section { padding: 60px 0; background: var(--bg-gray); }
.guides-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
@media (max-width: 1024px) { .guides-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .guides-grid { grid-template-columns: repeat(2, 1fr); } }

.guide-card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 20px 12px;
  background: #fff; border-radius: var(--radius-lg);
  border: 1.5px solid var(--border); gap: 10px;
  transition: box-shadow .2s, transform .2s; cursor: pointer;
}
.guide-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.guide-avatar { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid #e5e7eb; }
.guide-name  { font-size: 14px; font-weight: 700; color: var(--text); }
.guide-meta  { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); }
.guide-rating { color: #f59e0b; font-size: 11px; }

#backToTop {
  position: fixed; bottom: 28px; left: 28px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 90;
}

@media (max-width: 768px) {
  .guides-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .guide-avatar { width: 68px; height: 68px; }
  .guide-card  { padding: 14px 8px; gap: 7px; }
  .guide-name  { font-size: 13px; }

  .pg-filter-inner { flex-direction: column; }
  .pg-filter-row { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pg-filter-row::-webkit-scrollbar { display: none; }
  .cta-action .btn-primary { width: 100%; justify-content: center; }
}

@media (max-width: 600px) { .guides-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

@media (max-width: 480px) {
  .guide-avatar { width: 56px; height: 56px; }
  .guide-card { padding: 12px 6px; }
  .guide-name { font-size: 12px; }
}

@media (max-width: 375px) {
  .guides-grid { gap: 8px; }
  .guide-avatar { width: 50px; height: 50px; }
}