/* =========================================================
   دليل الطائف — style.css (منظّف وخالٍ من التكرار)
   ========================================================= */

/* ---------- 1) متغيرات عامة + خط افتراضي ---------- */
:root{
  --font-sans: "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, "Noto Kufi Arabic", Arial, sans-serif;

  /* ألوان وخصائص */
  --app-bg:#ffffff;
  --app-fg:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --brand:#198754;
  --accent:#0d6efd;
  --chip-bg:#f3f4f6;
  --chip-fg:#111827;
  --card-bg:#ffffff;
  --finished:#9ca3af;
  --nav-bg:#fffffff2;
  --shadow:0 6px 18px rgba(0,0,0,.08);
  --radius:.75rem;
  --safe-bottom:env(safe-area-inset-bottom, 0);

  /* سلم أحجام */
  --fs-xs:   clamp(0.82rem, 0.20vw + 0.78rem, 0.90rem);
  --fs-sm:   clamp(0.90rem, 0.25vw + 0.84rem, 0.97rem);
  --fs-base: clamp(0.96rem, 0.35vw + 0.88rem, 1.02rem);
  --fs-h3:   clamp(1.02rem, 0.45vw + 0.92rem, 1.12rem);
  --fs-h2:   clamp(1.08rem, 0.60vw + 0.95rem, 1.22rem);
  --fs-h1:   clamp(1.12rem, 0.90vw + 0.96rem, 1.30rem);
  --fs-card-title: clamp(0.98rem, 0.35vw + 0.90rem, 1.06rem);
}

/* ---------- 2) أساسيات وTYPO ---------- */
html{ scroll-behavior:smooth; }
html, body{ font-family: var(--font-sans) !important; }
body{
  background:var(--app-bg);
  color:var(--app-fg);
  line-height:1.6;
  font-size:var(--fs-base);
  padding-bottom: calc(72px + var(--safe-bottom));
}
h1,h2,h3{ line-height:1.35; margin-bottom:.6rem; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
.container{ max-width:1140px; }
:focus{ outline:2px dashed var(--accent); outline-offset:2px; }

/* تثبيت الخط على عناصر Bootstrap الشائعة */
h1,h2,h3,h4,h5,h6,
button,input,select,textarea,
.navbar,.btn,.card,.badge,.form-control{
  font-family: var(--font-sans) !important;
}

/* ---------- 3) الهيدر ---------- */
.app-header{
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:1030;
  padding:.6rem 1rem; margin-bottom:.75rem;
}
.app-header h1{ font-size:var(--fs-h1); font-weight:700; }

/* ---------- 4) شريط أقسام الدليل ---------- */
.cat-strip{
  display:flex; gap:.75rem; overflow-x:auto; padding:.25rem .25rem .5rem;
  scroll-snap-type:x mandatory;
}
.cat-strip::-webkit-scrollbar{ height:.4rem; }
.cat-strip::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:999px; }
.cat-chip{
  flex:0 0 auto; scroll-snap-align:start;
  display:flex; align-items:center; gap:.55rem;
  background:var(--chip-bg); color:var(--chip-fg);
  padding:.5rem .7rem; border-radius:999px; border:1px solid var(--border);
  transition:transform .2s ease, box-shadow .2s ease;
  will-change:transform;
}
.cat-chip:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.cat-avatar{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; border:1px solid var(--border);
}
.cat-avatar i{ font-size:1rem; line-height:1; }

/* ---------- 5) عناوين الأقسام ---------- */
section h2,
#categories-heading,#events-heading,#latest-listings-heading{
  font-size:var(--fs-h2); font-weight:700; margin-bottom:.6rem;
}

/* ---------- 6) الفعاليات ---------- */
.event-scroll{
  display:grid;
  grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
  gap:1rem;
}
@media (max-width:640px){
  .event-scroll{ display:flex; overflow-x:auto; padding-bottom:.25rem; scroll-snap-type:x mandatory; }
  .event-scroll > .card{ flex:0 0 85%; scroll-snap-align:start; }
}
.event-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card-bg);
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.03);
  transition:transform .25s ease, box-shadow .25s ease, opacity .3s ease;
}
.event-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.event-card img{ aspect-ratio:16/9; object-fit:cover; background:#f8fafc; }
.event-card .card-title{ font-size:var(--fs-card-title); font-weight:700; margin-bottom:.4rem; }
.event-card .card-text.small{ font-size:var(--fs-sm); line-height:1.6; }
.event-card-finished{ opacity:.75; }
.event-card-finished img{ filter:grayscale(.25) brightness(.95); }
.event-card .badge{ vertical-align:middle; }
.badge{ font-size:var(--fs-xs); }

/* ---------- 7) الطقس ---------- */
.weather-widget{
  display:flex; align-items:center; gap:.9rem;
  padding:.75rem 1rem; border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg,#fff,#f9fafb);
  box-shadow:0 2px 10px rgba(0,0,0,.02);
  max-width:420px;
}
.weather-icon img{ width:48px; height:48px; }
.weather-details{ display:flex; flex-direction:column; }
.weather-temp{ font-weight:700; font-size:var(--fs-h3); }
.weather-desc{ font-size:var(--fs-sm); color:var(--muted); }
.weather-city{ margin-inline-start:auto; color:var(--muted); }

/* ---------- 8) أضيف حديثاً ---------- */
.latest-box{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem; background:#fff;
}
.latest-box .badge{
  font-weight:500; border:1px solid var(--border);
  transition:transform .2s, box-shadow .2s;
}
.latest-box .badge:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }

/* ---------- 9) شريط سفلي (Bottom App Bar) ---------- */
.app-nav{
  position:fixed; inset-inline:0; bottom:0;
  background:var(--nav-bg); backdrop-filter:saturate(180%) blur(10px);
  border-top:1px solid var(--border);
  display:grid; grid-template-columns:repeat(4,1fr);
  z-index:1040; padding-bottom:var(--safe-bottom);
}
.app-nav a{
  text-align:center; padding:.55rem .25rem; color:#374151;
  display:flex; flex-direction:column; gap:.25rem;
  align-items:center; justify-content:center;
  font-size:var(--fs-xs);
}
.app-nav a i{ font-size:1.05rem; }
.app-nav a.active, .app-nav a:hover{ color:var(--accent); text-decoration:none; }

/* ---------- 10) وردة الترحيب ---------- */
.rose-greeter{
  position:fixed; right:1rem; bottom:calc(84px + var(--safe-bottom));
  width:52px; height:52px; z-index:1035; opacity:0; transform:translateY(10px);
  pointer-events:none;
}
.rose-greeter svg{ width:100%; height:100%; }
.rose-greeter.fly{ animation:roseFly .9s ease-out forwards; }
.rose-greeter.perched{ opacity:1; transform:none; }
@keyframes roseFly{
  from{ opacity:0; transform:translateY(16px) scale(.95); }
  to  { opacity:1; transform:translateY(0)   scale(1); }
}

/* ---------- 11) بتلات متساقطة ---------- */
.petal{
  position:fixed; top:-5vh; left:0;
  width:var(--size,12px); height:var(--size,12px);
  background:radial-gradient(circle at 30% 30%, #f5a5bc, #d9537a 65%);
  border-radius:60% 40% 60% 40%;
  opacity:.9; pointer-events:none;
  transform:translateX(var(--startX, 0));
  animation:petalFall var(--dur, 10s) linear var(--delay, 0s) forwards;
  z-index:10;
}
@keyframes petalFall{
  0%   { transform:translateX(calc(var(--startX)))                 translateY(-10vh) rotate(0deg); }
  50%  { transform:translateX(calc(var(--startX) + var(--sway)))   translateY(55vh)  rotate(180deg); }
  100% { transform:translateX(calc(var(--startX) + var(--sway)*2)) translateY(105vh) rotate(360deg); opacity:.2; }
}

/* ---------- 12) بطاقات القوائم ---------- */
.listing-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }
.listing-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.listing-card .card-img-top{ aspect-ratio:16/10; object-fit:cover; background:#f8fafc; }

/* ---------- 13) مساعدات ---------- */
.text-muted{ color:var(--muted)!important; }
.shadow-sm{ box-shadow:0 2px 10px rgba(0,0,0,.04)!important; }
.card{ border-radius:var(--radius); }
.small{ font-size:var(--fs-xs); }

/* ---------- 14) تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* ---------- 15) وضع داكن ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --app-bg:#0b0f14;
    --app-fg:#e5e7eb;
    --muted:#9ca3af;
    --border:#1f2937;
    --card-bg:#0f1620;
    --chip-bg:#111827;
    --chip-fg:#e5e7eb;
    --nav-bg:#0b0f14f2;
    --shadow:0 6px 18px rgba(0,0,0,.45);
  }
  .cat-avatar{ background:#0b0f14; border-color:var(--border); }
  .event-card img{ background:#0b0f14; }
  .latest-box{ background:#0f1620; }
  .weather-widget{ background:linear-gradient(180deg,#0f1620,#0b0f14); }
  .app-header{ background:#0b0f14; }
  .app-nav a{ color:#cbd5e1; }
}

/* ---------- 16) تصحيحات RTL ---------- */
.badge .ms-1{ margin-inline-start:.25rem!important; }
.me-1{ margin-inline-end:.25rem!important; }

/* ---------- 17) CTA Snapchat ---------- */
.cta-snap{ direction:rtl; }
.cta-snap-card{
  --snap-shadow: rgba(0,0,0,.08);
  --snap-border: rgba(0,0,0,.08);
  --snap-grad-1: rgba(255,255,255,.7);
  --snap-grad-2: rgba(255,255,255,.25);
  display:flex; align-items:center; gap:.85rem;
  padding:.75rem 1rem; border-radius:14px;
  background:linear-gradient(180deg,var(--snap-grad-1),var(--snap-grad-2)), var(--bs-body-bg,#fff);
  border:1px solid var(--snap-border);
  box-shadow:0 6px 18px var(--snap-shadow);
  text-decoration:none; color:inherit;
  position:relative; overflow:hidden;
  will-change:transform;
  transform-style:preserve-3d;
  transition:box-shadow .25s ease, border-color .25s ease, transform .2s ease;
}
.cta-snap-card:hover{ box-shadow:0 10px 28px rgba(0,0,0,.12); }
.cta-snap-icon{
  width:46px; height:46px; min-width:46px;
  border-radius:12px; display:grid; place-items:center;
  background:radial-gradient(60% 60% at 50% 40%, #FFFC00 0%, #F4EA00 100%);
  box-shadow:0 8px 16px rgba(255,235,59,.35), inset 0 0 0 1px rgba(0,0,0,.06);
  transform:translateZ(24px);
  animation:snapFloat 4s ease-in-out infinite;
}
.cta-snap-svg{ filter:drop-shadow(0 1px 0 rgba(0,0,0,.05)); }
.cta-snap-text strong{ display:block; font-weight:700; font-size:.98rem; line-height:1.2; }
.cta-snap-text small{ display:block; font-size:.78rem; color:#6c757d; margin-top:2px; }
.cta-snap-action{ margin-inline-start:auto; transform:translateZ(30px); }
.cta-snap-btn{
  display:inline-block; background:#000; color:#fff;
  padding:.38rem .8rem; border-radius:999px; font-size:.8rem;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
  transition:transform .2s ease;
}
.cta-snap-card:hover .cta-snap-btn{ transform:translateZ(30px) translateY(-1px); }
@keyframes snapFloat{
  0%,100%{ transform:translateZ(24px) translateY(0)   rotateZ(0deg); }
  50%    { transform:translateZ(24px) translateY(-3px) rotateZ(-2deg); }
}

/* لمساحات أصغر */
@media (max-width:480px){
  .cta-snap-card{ padding:.65rem .8rem; border-radius:12px; }
  .cta-snap-icon{ width:42px; height:42px; min-width:42px; }
  .cta-snap-text strong{ font-size:.94rem; }
  .cta-snap-text small{ font-size:.75rem; }
}

/* تقليل الحركة لـ CTA */
@media (prefers-reduced-motion: reduce){
  .cta-snap-icon{ animation:none; }
  .cta-snap-card, .cta-snap-btn{ transition:none; }
}
/* ---------- شريط "أضيف حديثاً" اليدوي ---------- */
.latest-strip{
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  padding:.25rem .25rem .5rem;
  scroll-snap-type:x mandatory;
}
.latest-strip::-webkit-scrollbar{ height:.4rem; }
.latest-strip::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:999px; }

.latest-chip{
  flex:0 0 auto;
  scroll-snap-align:start;
  display:inline-flex;
  align-items:center;
  background:var(--chip-bg);
  color:var(--chip-fg);
  border:1px solid var(--border);
  border-radius:999px;
  padding:.45rem .7rem;
  font-size:var(--fs-sm);
  white-space:nowrap;
  transition:transform .2s ease, box-shadow .2s ease;
  text-decoration:none;
}
.latest-chip:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
  text-decoration:none;
}
/* --- Hero SEO --- */
.hero-seo{
  background:linear-gradient(180deg,#fff,#f9fafb);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem;
  margin-bottom:.75rem;
}
.hero-title{ font-size:var(--fs-h2); font-weight:700; margin-bottom:.35rem; }
.hero-text{ color:var(--muted); font-size:var(--fs-sm); }
.hero-text a{ text-decoration:underline; }