/* =========================================================
   relistyle.css — Reset خفيف + نمط موحّد RTL لدليل الطائف
   - أحجام عناوين متوازنة (حل مشكلة تضخم العناوين)
   - شريط علوي ثابت، بطاقات، شبكة، ترقيم صفحات، شريط سفلي
   ========================================================= */

/* Reset */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; }

/* متغيرات */
:root{
  --bg:#fff;
  --fg:#1f2328;
  --muted:#6b7280;
  --border:#e5e7eb;
  --card:#fff;
  --accent:#0d6efd;   /* primary */
  --accent-2:#198754; /* success */
  --radius:12px;
  --shadow:0 6px 16px rgba(0,0,0,.06);
  --shadow-soft:0 2px 8px rgba(0,0,0,.05);
}
html[dir="rtl"]{ direction: rtl; }
body{
  background:var(--bg);
  color:var(--fg);
  font-family:"Cairo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
  line-height:1.55;
}

/* طباعة: عناوين متوازنة */
h1,h2,h3,h4,h5,h6{ margin:0 0 .5rem 0; font-weight:700; line-height:1.25; }
h1{ font-size:clamp(1.35rem, 1.0rem + 1.1vw, 1.85rem); }
h2{ font-size:clamp(1.2rem,  .95rem + .8vw,  1.55rem); }
h3{ font-size:clamp(1.05rem, .9rem + .5vw,  1.3rem); }
h4{ font-size:1.05rem; }
h5{ font-size:1rem; }
h6{ font-size:.95rem; }
p{ margin:0 0 .75rem 0; }
.small{ font-size:.875rem; }

/* رأس التطبيق */
.app-header{
  background:#fff; border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:1030;
}
.app-header .brand{ font-size:1.2rem; font-weight:800; }

/* شريط الخيارات */
.filter-bar{
  background:#fafafa; border-bottom:1px solid var(--border);
  position:sticky; top:56px; z-index:1020;
}
.filter-bar .btn{ transition:.2s ease; }
.filter-bar .btn.active{ pointer-events:none; }

/* رأس صفحة الفئة */
.category-header{
  padding:18px 0 8px; border-bottom:1px dashed var(--border);
}
.category-header h1{
  font-size:clamp(1.15rem, 1.0rem + .7vw, 1.5rem);
  font-weight:800;
}

/* شبكة العناصر (الأنشطة) */
.listing-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
}
.listing-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-soft); overflow:hidden;
}
.list-card-link{ display:block; }
.list-card-img-container{ position:relative; }
.card .card-img-top{ width:100%; height:160px; object-fit:cover; background:#f1f5f9; }
.card .card-body{ padding:12px 14px; }
.card .card-title{ font-size:1rem; font-weight:700; margin-bottom:.35rem; }
.card .card-text{ color:var(--muted); }

/* شارات على الصور */
.rating-badge,.distance-badge,.visit-count-badge{
  position:absolute; z-index:2;
  background:rgba(0,0,0,.6); color:#fff;
  font-size:.75rem; padding:.15rem .45rem;
  border-radius:8px; display:inline-flex; gap:6px; align-items:center;
}
.rating-badge{ top:8px; inset-inline-end:8px; }
.distance-badge{ bottom:8px; inset-inline-end:8px; }
.visit-count-badge{ top:8px; inset-inline-start:8px; }

/* عرض القائمة */
#listView .list-item-img-wrapper{ position:relative; overflow:hidden; height:180px; }
#listView .list-item-img{ height:100%; object-fit:cover; }

/* ترقيم الصفحات */
.pagination{ gap:.25rem; }
.pagination .page-item .page-link{
  border-radius:10px; border:1px solid var(--border); color:var(--fg);
}
.pagination .page-item.active .page-link{
  background:var(--accent); color:#fff; border-color:var(--accent);
}

/* شريط سفلي على نمط التطبيقات */
.app-nav{
  position:sticky; bottom:0; z-index:1020;
  background:#fff; border-top:1px solid var(--border);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.app-nav a{
  text-align:center; padding:10px 6px; color:var(--fg);
  font-size:.85rem; display:grid; place-items:center; gap:4px;
}
.app-nav a i{ font-size:1rem; }
.app-nav a.active,.app-nav a:hover{ color:var(--accent); }

/* وسائط */
@media (min-width:992px){
  .app-header{ top:0; }
  .filter-bar{ top:64px; }
}