/* ⚠️ اتنقل من app/Views/site_layout.php (مراجعة ٥ أكتوبر ٢٠٢٦): كان بيتبعت جوّه كل صفحة
   ومابيتخزّنش في المتصفح. الرابط فيه ?v=وقت-التعديل فالتحديث بيوصل فوراً. */
/* ⚠️ الخط من سيرفرك مش من جوجل — نفس ملفات لوحة التحكم */
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;
  src:url(/brand/fonts/tajawal-arabic-400.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;
  src:url(/brand/fonts/tajawal-latin-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+2000-206F;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;
  src:url(/brand/fonts/tajawal-arabic-500.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;
  src:url(/brand/fonts/tajawal-latin-500.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+2000-206F;}
/* ⚠️ الوزنين ٧٠٠ و٨٠٠ **لازم** يتحمّلوا: العناوين كلها `font-weight:800`،
   ومن غير الملف المتصفح بيغلّط الخط بنفسه (fake bold) — وشكله بيبان
   مختلف عن الموقع القديم على طول. */
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;
  src:url(/brand/fonts/tajawal-arabic-700.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;
  src:url(/brand/fonts/tajawal-latin-700.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+2000-206F;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:800;font-display:swap;
  src:url(/brand/fonts/tajawal-arabic-800.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:800;font-display:swap;
  src:url(/brand/fonts/tajawal-latin-800.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+2000-206F;}

:root{
  --primary:#0b6ea8; --primary-dark:#08507c; --accent:#f4a940; --accent-dark:#d98d22;
  --ink:#1b2b34; --muted:#5f7381; --bg:#f6f8f9; --card:#ffffff; --line:#e3e9ec;
  --ok:#1d9e6f; --danger:#d05353; --radius:14px;
  --shadow:0 2px 10px rgba(27,43,52,.08); --shadow-lg:0 10px 30px rgba(27,43,52,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
/* ⚠️ تأمين: القايمة الجانبية المقفولة واقفة بره الشاشة (`translateX(102%)`).
   كروم **مبيحسبهاش** في عرض الصفحة (قِسناها: `scrollWidth == clientWidth`
   على ٣٧٥ و٣٩٠)، بس المتصفحات مختلفة في الحكاية دي، وأي تمرير أفقي على
   الموبايل في صفحة عربي معناه إن الشريط العلوي والعناوين بيتقطعوا من على
   اليمين. `clip` مش `hidden` عن قصد: `hidden` بتعمل صندوق تمرير وبتكسر
   `position:sticky` بتاع الشريط العلوي. */
html{overflow-x:clip}
body{font-family:'Tajawal',"Segoe UI",Tahoma,Arial,sans-serif;background:var(--bg);
     color:var(--ink);line-height:1.6;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ===== الشريط العلوي ===== */
.topbar{background:var(--primary);color:#fff;position:sticky;top:0;z-index:50;box-shadow:var(--shadow)}
.topbar .in{max-width:1150px;margin:0 auto;padding:.65rem 1rem;display:flex;align-items:center;gap:.8rem}
/* ⚠️ اللوجو صورة مش نص — ده شكل إيليت اللي الناس عرفاه */
.logo{display:flex;align-items:center;gap:.5rem}
.logo img{height:34px;width:auto;display:block}
.tnav{margin-inline-start:auto;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
/* أزرار دايرية زي الموقع القديم مش لينكات جنب بعض */
.tnav a,.tnav button,.drop summary{color:#fff;font-size:.86rem;font-weight:700;
  padding:.32rem .8rem;border-radius:99px;white-space:nowrap;background:#ffffff1f;
  border:1px solid #ffffff33;transition:.15s}
.tnav a:hover,.tnav button:hover,.drop summary:hover{background:#ffffff33}
.tnav a.cta{background:var(--accent);color:#3d2a05;font-weight:800}
.tnav a.cta:hover{background:var(--accent-dark);color:#fff}

/* الشريط على الموبايل: اللوجو والمفضلة والدخول وبس — الباقي جوّه القايمة */
@media(max-width:860px){.hide-sm{display:none!important}}

/* ⚠️ علم الدولة SVG جوّه الصفحة — «🇪🇬» إيموجي مبيظهرش على ويندوز خالص،
   فاللي على لابتوب كان بيشوف حرفين «EG» بدل العلم */
.flag{border-radius:2px;box-shadow:0 0 0 .5px rgba(0,0,0,.18);flex:none;display:block}
.langsum{display:inline-flex;align-items:center;gap:.4rem}
.drop .menu a.lang{display:flex;align-items:center;gap:.5rem}
.drop .menu a .tick{margin-inline-start:auto;color:var(--primary);font-weight:800}

/* ---- القايمة الجانبية (☰) ----
   ⚠️ **من غير سطر جافاسكربت واحد**: خانة اختيار مخفية + `label` بيفتحها.
      الـCSP عندنا فيها `script-src-attr 'none'` يعني أي `onclick` في خصيصة
      مبيشتغلش أصلاً — والموقع القديم كان معتمد عليه. لو حد جرّب ينقل كود
      القديم زي ما هو، الزرار هيبقى شكل من غير ما يفتح.
   ⚠️ والخانة مش `display:none` عن قصد — كده تفضل تتفوكس بالكيبورد. */
/* ⚠️⚠️ `margin:0` **ضروري**: في آخر الملف فيه قاعدة `label{margin:.75rem 0 .3rem}`
   للاستمارات، وهي بتنطبق على أي `label` في الصفحة — يعني كانت بتزوّد ١٧px
   على زرار القايمة وتطوّل الشريط العلوي كله عن الموقع القديم. أي `label`
   جديد بره الاستمارات لازم يصفّر الـmargin بإيده. */
.burger{background:#ffffff1f;border:1px solid #ffffff33;color:#fff;border-radius:9px;
  width:38px;height:38px;font-size:1.2rem;cursor:pointer;flex:none;display:flex;
  align-items:center;justify-content:center;margin:0}
.burger:hover{background:#ffffff33}
.dtg{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dtg:focus-visible ~ .in .burger{outline:2px solid #fff;outline-offset:2px}
.drawer-ov{position:fixed;inset:0;background:rgba(10,30,45,.45);z-index:98;opacity:0;
  pointer-events:none;transition:opacity .22s;margin:0}
.drawer{position:fixed;top:0;bottom:0;width:min(330px,88vw);background:#fff;color:var(--ink);
  z-index:99;overflow-y:auto;box-shadow:0 0 30px rgba(0,0,0,.25);transition:transform .24s ease}
html[dir=rtl] .drawer{right:0;transform:translateX(102%)}
html[dir=ltr] .drawer{left:0;transform:translateX(-102%)}
.dtg:checked ~ .drawer{transform:none}
.dtg:checked ~ .drawer-ov{opacity:1;pointer-events:auto}
.drawer .dhead{background:var(--primary);color:#fff;padding:.8rem 1rem;display:flex;
  align-items:center;justify-content:space-between;position:sticky;top:0;z-index:2}
.drawer .dsec{padding:.55rem 1rem .2rem;color:var(--muted);font-size:.78rem;font-weight:800;
  letter-spacing:.4px;border-top:1px solid #eef2f4;margin-top:.35rem}
.drawer .ditem{display:flex;align-items:center;gap:.65rem;width:100%;text-align:start;
  padding:.62rem 1rem;font-size:.95rem;color:inherit}
.drawer .ditem:hover{background:#f2f7fa}
.drawer .ditem .ic{width:22px;text-align:center;flex:none}
.drawer .ditem .tick{margin-inline-start:auto;color:var(--primary);font-weight:800}
.drawer .ditem .val{margin-inline-start:auto;color:var(--muted);font-size:.82rem;white-space:nowrap}
.drawer .ditem .two{display:flex;flex-direction:column;gap:.1rem}
.drawer .ditem .two .m{color:var(--muted);font-size:.76rem}
.drawer .dcurs{display:flex;gap:.5rem;padding:.35rem 1rem .6rem}
.drawer .dcurs a{flex:1;border:1.5px solid #dfe6e9;border-radius:9px;padding:.45rem 0;
  font-weight:800;text-align:center;font-size:.9rem}
.drawer .dcurs a.on{border-color:var(--primary);color:var(--primary);background:#eaf4fa}
.drawer .dfoot{padding:1rem;color:var(--muted);font-size:.78rem}

/* ---- شرايط تصفية النوع — تحت البحث بالظبط زي الموقع القديم ---- */
.tpills{display:flex;gap:.5rem;overflow-x:auto;padding:.2rem .1rem .5rem;scrollbar-width:none}
.tpills::-webkit-scrollbar{display:none}
.tpill{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;background:var(--card);
  border:1px solid var(--line);border-radius:99px;padding:.5rem .95rem;font-weight:700;
  font-size:.9rem;color:var(--ink);white-space:nowrap;transition:.15s}
.tpill:hover{border-color:var(--primary)}
.tpill.on{background:var(--primary);border-color:var(--primary);color:#fff}
.tpill .n{font-size:.8rem;font-weight:600;opacity:.65}
/* ⚠️⚠️ لا يوجد شكل خاصّ للنوع الفارغ — **عن قصد**.
      كان معطَّلاً بإطار متقطّع ولون خافت، فكان الزائر يقرأه «معطوب» لا
      «فارغ» ويحاول الضغط فلا يحدث شيء. والآن كلها بنفس الشكل وكلها روابط
      عاملة، والعدد بجانب الاسم هو ما يميّز المتاح من الفارغ. وصفحة النتائج
      تشرح إن كانت فارغة ولا تصمت. */

/* قايمة منسدلة بالـHTML لوحده — من غير جافاسكربت عشان الـCSP */
.drop{position:relative}
.drop summary{list-style:none;cursor:pointer;color:#fff;font-size:.88rem;font-weight:600;
  padding:.4rem .7rem;border-radius:8px}
.drop summary::-webkit-details-marker{display:none}
.drop summary:hover{background:#ffffff26}
.drop .menu{position:absolute;inset-inline-end:0;top:calc(100% + .35rem);background:var(--card);
  border-radius:12px;box-shadow:var(--shadow-lg);padding:.3rem;min-width:190px;z-index:60}
.drop .menu a{display:block;color:var(--ink);font-size:.9rem;font-weight:600;
  padding:.5rem .6rem;border-radius:8px;white-space:nowrap}
.drop .menu a:hover{background:var(--bg)}
.drop .menu a.on{color:var(--primary-dark);font-weight:800}
/* ⚠️ قايمة «اتصل بنا» أعرض شوية عشان الإيميل مايتقطعش، وكل عنصر سطرين:
      الغرض فوق والإيميل تحته صغير — نفس شكل القايمة الجانبية. */
.drop .menu.wide{min-width:250px}
.drop .menu.wide a{display:flex;align-items:center;gap:.55rem}
.drop .menu.wide .ic{font-size:1rem;flex:0 0 auto}
.drop .menu.wide .two{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.drop .menu.wide .two .m{font-size:.76rem;color:#6b8496;font-weight:600;word-break:break-all}
.drop .menu.wide a.wa .two span:first-child{color:#0f7a44}

/* ===== الهيرو =====
   ⚠️⚠️ الأرقام دي **منقولة بالحرف من الموقع القديم** (`.hero` + قاعدة
   «خلفية الغروب البحري» في آخر الملف). الصورة `hero.jpg` هي اختيار أحمد
   وشريكه — **متبدّلهاش بصورة مدينة**، وطبقة اللون فوقها ٤٠٪/٤٦٪ مش أغمق
   (كانت ٧٢٪ عندنا فالصورة كانت مدفونة تحت الأزرق).
   والتدرّج التالت تحتها احتياطي: لو الصورة ما ترفعتش الهيرو يفضل أزرق
   محترم بدل مربع فاضي. */
.hero{position:relative;color:#fff;padding:3.2rem 1rem 5.2rem;text-align:center;overflow:hidden;
  background:linear-gradient(rgba(8,62,96,.40),rgba(8,62,96,.46)),
             url(/img/hero.jpg) center 35%/cover no-repeat,
             linear-gradient(135deg,var(--primary-dark),var(--primary))}
/* ⚠️ اللوجو الطولي (البجعة فوق الاسم) بـ١١٨px زي القديم — مش الأفقي بـ٧٤ */
.hero .lock{height:118px;width:auto;display:block;margin:0 auto .5rem;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:70px;
  background:radial-gradient(60% 120px at 50% 0,rgba(255,255,255,.10),transparent)}
.hero h1{font-size:clamp(1.6rem,4.5vw,2.6rem);font-weight:800;margin-bottom:.5rem}
.hero p{opacity:.92;font-size:1.05rem;max-width:640px;margin:0 auto}

/* ===== صندوق البحث =====
   ⚠️ الإطار الدهبي (٣px) **علامة مقصودة** في الموقع القديم: «هنا الحجز».
      كان ناقص عندنا خالص، والصندوق كان بيتلخبط مع أي كارت أبيض تاني. */
.searchbox{max-width:1000px;margin:0 auto;background:var(--card);border:3px solid var(--accent);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:1rem;display:grid;
  grid-template-columns:1.2fr 1.1fr 1fr 1fr .8fr auto;gap:.7rem;position:relative;z-index:5}
.searchbox label{display:block;font-size:.75rem;font-weight:700;color:var(--muted);
  margin:0 0 .25rem;text-transform:uppercase;letter-spacing:.4px}
.searchbox .field{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem}
/* ⚠️⚠️ `padding:0` **ضروري**: قاعدة الاستمارات في آخر الملف بتحطّ
   `padding:.65rem .75rem` وإطار على كل `input`/`select` في الصفحة، فخانات
   البحث كانت بتطلع أطول من القديم بـ٢٥px الواحدة (صندوق البحض كله ٥١px
   أطول). نفس فخ `label` بالظبط — أي عنصر استمارة جوّه شكل السوق لازم
   يصفّر الحشو بإيده. */
.searchbox .field select,.searchbox .field input{width:100%;border:none;background:transparent;
  outline:none;color:var(--ink);font:inherit;padding:0;border-radius:0}
/* ---- «يوم/شهر/سنة» مكان «mm/dd/yyyy» ----
   ⚠️ النص الإنجليزي ده من المتصفح نفسه، مش من ملف اللغة — مفيش خصيصة
      HTML بتغيّره. فبنغطّيه: النص بتاعنا فوق، وكتابة المتصفح بتختفي —
      وده **بس** في المتصفحات اللي فيها `::-webkit-datetime-edit`
      (كروم وإيدج وسفاري). فايرفوكس بيتجاهل الحكاية كلها ويفضل زي ما هو
      بدل ما يطلع النصين فوق بعض. */
.searchbox .field.date{position:relative}
/* ⚠️ الإزاحة ١.٩rem مش .٧: كروم بيحطّ أيقونة النتيجة (📅) في **بداية**
   الخانة في العربي، فالنص كان بيتغطّى وأول كلمة «يوم» تختفي. */
.searchbox .field.date .dhint{display:none;position:absolute;inset-inline-start:1.9rem;
  bottom:.5rem;color:var(--muted);font:inherit;pointer-events:none;white-space:nowrap}
@supports selector(::-webkit-datetime-edit){
  .searchbox .field.date.empty .dhint{display:block}
  .searchbox .field.date.empty input::-webkit-datetime-edit{opacity:0}
}
/* ⚠️ الزرار ابن مباشر للشبكة وبيتمدّد لطول السطر لوحده — زي القديم،
      من غير `display:flex` ولا `btn-block`. والمقاسات (padding 1rem و
      gap .7rem) زي القديم كمان، فمفيش تصغير على التابلت. */
@media(max-width:860px){.searchbox{grid-template-columns:1fr 1fr}
  .searchbox .go{grid-column:1/-1}}
.pulled{margin-top:-3.4rem;padding:0 1rem;position:relative;z-index:5}

/* ⚠️ شريط المعاينة — أعلى الصفحة وبلون تحذيري خفيف: هو حالة مؤقّتة لا
      جزء من تصميم الموقع، ولا بد أن يُقرأ كذلك. */
.pvbar{
  background:#FDF3E3;border-bottom:1px solid #EBCB92;color:#6B5A22;
  padding:.55rem 1rem;font-size:.85rem;text-align:center;
}
.pvbar a{color:#6B5A22;text-decoration:underline;margin-inline-start:.4rem;font-weight:700}

/* ==================== فقاعات محادثة الضيف ====================
   ⚠️ الاتجاه بـ`align-self` لا بـ`float`: الصفحة قد تكون RTL أو LTR،
      و`float` كان يقلب الجهتين مع اللغة. */
.gmsgs{display:flex;flex-direction:column;gap:.5rem;margin:.7rem 0;
       max-height:20rem;overflow-y:auto;padding:2px}
.gmrow{max-width:min(30rem,90%)}
.gmrow.me{align-self:flex-end}
.gmrow.them{align-self:flex-start}
.gmwho{font-size:.7rem;color:var(--muted);margin-bottom:.15rem}
.gmrow.me .gmwho{text-align:end}
.gmbody{padding:.5rem .75rem;border-radius:12px;line-height:1.7;font-size:.88rem;
        white-space:pre-wrap;word-break:break-word}
.gmrow.me   .gmbody{background:var(--primary);color:#fff;border-end-end-radius:4px}
.gmrow.them .gmbody{background:var(--bg);color:var(--ink);border-end-start-radius:4px}

/* ==================== بلونة الشات ====================
   ⚠️ فوق شريط الكوكيز (`z-index` أعلى) بس الاتنين مش بيتلاقوا: الشريط في
      النص تحت والبلونة في الرُكن.
   ⚠️ والبلونة مش بتغطّي زرار الحجز في الموبايل: الزرار في الشريط الجانبي
      اللي بينزل تحت المحتوى، والبلونة `fixed` في الرُكن المقابل للقايمة. */
/* ⚠️⚠️ **المقاسات صغيرة عن قصد.**
      كانت اللوحة ٤٦٪ من عرض الشاشة و٥٢٪ من طولها على شاشة ٨٠٠×٤٥٠ — فتغطّي
      صندوق البحث وكروت الوحدات، وهي **مساعِدة** لا الشاشة الرئيسية.
      وقاعدة الحجم: أضيق من عمود المحتوى، وأقصر من نصف الشاشة. */
.ai-fab{
  position:fixed;inset-inline-end:.9rem;bottom:.9rem;z-index:70;
  width:2.4rem;height:2.4rem;border-radius:50%;border:0;cursor:pointer;
  background:var(--primary);color:#fff;line-height:1;
  box-shadow:0 4px 16px rgba(0,0,0,.2);
}
.ai-fab:hover{background:var(--primary-dark)}

.ai-panel{
  position:fixed;inset-inline-end:.9rem;bottom:4rem;z-index:70;
  /* ⚠️ `19rem` مع سقف ٨٥٪ للموبايل: على الشاشة الضيّقة تبقى هوامش تُظهر
        أن تحتها صفحة، وبلا الهوامش تبدو كأنها استولت على الموقع. */
  width:min(16rem,calc(100vw - 1.6rem));
  /* ⚠️ ٤٠٪ من الطول سقفاً: الزائر لا بد أن يبقى شائفاً الوحدة التي يسأل
        عنها وهو يسأل — لوحة تأخذ نصف الشاشة تُخفي ما يتحدّث عنه. */
  max-height:min(15rem,40vh);
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 8px 28px rgba(0,0,0,.18);overflow:hidden;
}

/* ==================== ⚠️⚠️ السطر الذي كان ناقصاً ====================
   **`hidden` لا تعمل مع `display:flex`.**

   خاصية `hidden` في HTML تُخفي العنصر عبر `display:none` في ورقة أنماط
   المتصفّح — وأي قاعدة `display` نكتبها نحن **تغلبها**. فاللوحة كانت
   `display:flex` دائماً: ظاهرة من لحظة تحميل الصفحة، ولا تُقفل بزرّ ✕،
   وتغطّي المحتوى.

   وهذا بالظبط ما رآه أحمد: «الشات كبير ومش بيتقفل من الاكس وبيغطّي على
   حاجة» — ثلاث شكاوى، وسببها **سطر واحد ناقص**.

   والمحدِّد `[hidden]` مع الكلاس أقوى من الكلاس وحده، فلا حاجة إلى
   `!important`. */
.ai-panel[hidden]{display:none}
.ai-head{
  display:flex;align-items:center;justify-content:space-between;gap:.4rem;
  padding:.5rem .7rem;border-bottom:1px solid var(--line);background:var(--bg);
  font-size:.9rem;
}
.ai-x{background:none;border:0;cursor:pointer;font:inherit;color:var(--muted);padding:.1rem .3rem}
/* ⚠️ اللوجو في ترويسة الشات — البجعة بس، الاسم جنبها نص فالتكرار مش مطلوب */
.ai-head .ai-logo{display:block;height:17px;width:auto;flex:0 0 auto}
.ai-head b{flex:1}
/* ⚠️ البلونة: البجعة متمركزة والخلفية بيضا عشان الدهبي يبان — الأزرق على
      الأزرق كان بيخفيها. */
.ai-fab{background:#fff;display:grid;place-items:center;padding:0}
.ai-fab:hover{background:#fff}
.ai-fab img{display:block;height:21px;width:auto}
.ai-log{
  flex:1;overflow-y:auto;padding:.6rem;display:flex;flex-direction:column;gap:.4rem;
  font-size:.82rem;line-height:1.6;
}
.ai-msg{padding:.4rem .6rem;border-radius:10px;max-width:88%;white-space:pre-wrap;word-wrap:break-word}
.ai-bot{background:var(--bg);color:var(--ink);align-self:flex-start;border-end-start-radius:4px}
.ai-me{background:var(--primary);color:#fff;align-self:flex-end;border-end-end-radius:4px}
.ai-form{display:flex;gap:.35rem;padding:.5rem;border-top:1px solid var(--line)}
.ai-inp{flex:1;font:inherit;font-size:.82rem;border:1px solid var(--line);
        border-radius:8px;padding:.42rem .55rem;min-width:0}
.ai-go{
  background:var(--primary);color:#fff;border:0;cursor:pointer;font:inherit;
  font-size:.82rem;font-weight:700;border-radius:8px;padding:.42rem .7rem;flex:0 0 auto;
}
.ai-go:disabled{opacity:.55;cursor:default}
@media(max-width:520px){
  /* ⚠️ على الموبايل تأخذ العرض المتاح ناقص هوامش، ونصف الشاشة طولاً فقط:
        الزائر لا بد أن يرى الوحدة التي يسأل عنها وهو يسأل. */
  .ai-panel{inset-inline:.6rem;width:auto;bottom:3.4rem;max-height:40vh}
  .ai-fab{width:2.3rem;height:2.3rem}
  .ai-fab img{height:20px}
}

/* ==================== شريط الكوكيز ====================
   ⚠️ فوق كل حاجة (`z-index` عالي) بس **مش** بيغطّي زرار الحجز: بيقعد تحت
      خالص وبعرض محدود، والزرار في السايدبار على اليمين.
   ⚠️ و`padding-bottom` على البودي **لأ**: الشريط بيروح بأول دوسة، وإضافة
      مساحة دايمة تحت الصفحة عشان حاجة مؤقتة بتسيب فراغ للأبد. */
.ck-bar{
  position:fixed;inset-inline:1rem;bottom:1rem;z-index:60;
  max-width:44rem;margin-inline:auto;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.16);padding:.85rem 1.1rem;
}
.ck-txt{margin:0;font-size:.88rem;color:var(--muted);flex:1 1 16rem;line-height:1.6}
.ck-txt a{color:var(--primary);text-decoration:underline}
.ck-btn{
  background:var(--primary);color:#fff;border:0;cursor:pointer;font:inherit;
  font-weight:700;font-size:.88rem;border-radius:9px;padding:.5rem 1.3rem;flex:0 0 auto;
}
.ck-btn:hover{background:var(--primary-dark)}
@media(max-width:520px){.ck-bar{inset-inline:.6rem;bottom:.6rem}.ck-btn{width:100%}}

.btn{background:var(--accent);color:#3d2a05;font-weight:800;border-radius:10px;padding:.7rem 1.4rem;
  transition:.15s;display:inline-flex;align-items:center;justify-content:center;gap:.4rem}
.btn:hover{background:var(--accent-dark);color:#fff}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink);font-weight:600;
  border-radius:10px;padding:.55rem 1.1rem}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn-block{width:100%}

/* ===== الأقسام ===== */
.container{max-width:1150px;margin:0 auto;padding:0 1rem}
.section{margin:2.6rem 0}
.section h2{font-size:1.45rem;font-weight:800;margin-bottom:.3rem}
.section .sub{color:var(--muted);margin-bottom:1.2rem}

/* كروت الوجهات */
.cities{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.9rem}
.city-card{border-radius:var(--radius);overflow:hidden;position:relative;box-shadow:var(--shadow);
  transition:.18s;height:110px;display:block}
.city-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.city-card .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.city-card .name{position:absolute;inset:auto 0 0 0;padding:.5rem .8rem;color:#fff;font-weight:800;
  font-size:1.05rem;background:linear-gradient(transparent,rgba(0,0,0,.55));text-shadow:0 1px 3px rgba(0,0,0,.4)}
.city-card .n{font-size:.78rem;font-weight:600;opacity:.9;display:block}
/* علامة الوجهة اللي لسه مالهاش صورة */
.city-card .ph{position:absolute;inset:0;display:grid;place-items:center;font-size:2rem;opacity:.5}

/* كروت الوحدات */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:1.1rem}
.card{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  transition:.18s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card .thumb{height:170px;position:relative;background:#dfe7ea;background-size:cover;background-position:center}
/* أيقونة النوع مكان الصورة اللي لسه مترفعتش */
.card .thumb .ph{position:absolute;inset:0;display:grid;place-items:center;font-size:2.8rem;
  opacity:.55;filter:drop-shadow(0 1px 3px rgba(0,0,0,.25))}
.card .thumb .type-badge{position:absolute;top:.6rem;inset-inline-start:.6rem;background:rgba(255,255,255,.92);
  color:var(--primary-dark);font-size:.75rem;font-weight:800;padding:.15rem .6rem;border-radius:999px}
.card .body{padding:.85rem .95rem 1rem;flex:1;display:flex;flex-direction:column;gap:.3rem}
.card .name{font-weight:800;font-size:1.02rem}
.card .loc{color:var(--muted);font-size:.85rem}
.card .foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;padding-top:.5rem}
.price{font-weight:800;font-size:1.05rem;color:var(--ink)}
.price small{display:block;font-weight:500;color:var(--muted);font-size:.72rem}

/* شريط الضمانات — تحت البحث، زي الموقع القديم بالظبط:
   ⚠️ تلاتة جنب بعض على الكمبيوتر وواحد تحت التاني على الموبايل — مش
      `auto-fit` اللي كان بيطلّع اتنين وواحد تحتهم شكل أعرج. */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.3rem 0 .4rem}
@media(max-width:820px){.trust{grid-template-columns:1fr}}
.trust .t{display:flex;gap:.7rem;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:.85rem .9rem}
/* ⚠️ الأيقونة جوّه **دايرة ملوّنة** زي القديم — كانت إيموجي سايبة عندنا،
   والفرق باين على طول في أول حاجة تحت البحث. */
.trust .ico{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;
  place-items:center;font-size:1.15rem}
.trust b{display:block;margin-bottom:.15rem;font-size:.95rem}
.trust .d{color:var(--muted);font-size:.79rem;line-height:1.6;display:block}

/* شريط الخطوات */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem}
.step{background:var(--card);border-radius:var(--radius);padding:1.1rem;box-shadow:var(--shadow);
  display:flex;gap:.8rem;align-items:flex-start}
.step .ico{font-size:1.7rem}
.step b{display:block;margin-bottom:.15rem}
.step span{color:var(--muted);font-size:.88rem}

/* بانر المُلّاك */
.ownban{max-width:1000px;margin:2rem auto;border-radius:var(--radius);
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;
  padding:2rem 1.5rem;text-align:center}
/* ⚠️ ١.٥rem زي القديم — كان ١.٢٥ عندنا فالبانر كان باين أصغر */
.ownban h3{font-size:1.5rem;font-weight:800;margin-bottom:.5rem}
.ownban p{opacity:.92;font-size:.95rem;max-width:560px;margin:0 auto 1.1rem;line-height:1.8}
.ownban .btn{background:#fff;color:var(--primary-dark);font-weight:800;padding:.65rem 1.8rem}
.ownban .btn:hover{background:var(--bg);color:var(--primary-dark)}

/* ===== صفحة النتايج ===== */
.results-layout{display:grid;grid-template-columns:250px 1fr;gap:1.2rem;align-items:start;margin-top:1.4rem}
@media(max-width:820px){.results-layout{grid-template-columns:1fr}}
.filters{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem}
.filters h3{font-size:1rem;margin-bottom:.7rem}
.filters .fgroup{border-top:1px solid var(--line);padding:.7rem 0}
.filters .fgroup:first-of-type{border-top:none;padding-top:0}
.filters label{display:block;font-size:.75rem;font-weight:700;color:var(--muted);margin:0 0 .25rem}
.filters select,.filters input{width:100%;font:inherit;border:1px solid var(--line);border-radius:8px;
  padding:.45rem .6rem;background:#fff;color:var(--ink)}
.results-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.results-head .count{font-weight:700}
.crumb{color:var(--muted);font-size:.85rem;margin-top:1.2rem}
.crumb a{color:var(--primary)}
.empty{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:2.2rem 1.2rem;text-align:center;color:var(--muted)}
.pager{display:flex;gap:.5rem;justify-content:center;margin-top:1.4rem;flex-wrap:wrap}
.pager a,.pager span{padding:.45rem .85rem;border-radius:8px;background:var(--card);
  border:1px solid var(--line);font-weight:700;font-size:.9rem}
.pager span{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ===== صفحة الوحدة ===== */
.detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin:1.4rem 0 .8rem}
.detail-head h1{font-size:1.55rem;font-weight:800}
.gallery{display:grid;grid-template-columns:2fr 1fr;grid-auto-rows:150px;gap:.6rem;
  border-radius:var(--radius);overflow:hidden}
.gallery .g{position:relative;background:#dfe7ea;background-size:cover;background-position:center;
  border-radius:8px;overflow:hidden}
.gallery .g:first-child{grid-row:span 2}
@media(max-width:700px){.gallery{grid-template-columns:1fr;grid-auto-rows:200px}
  .gallery .g:first-child{grid-row:span 1}.gallery .g:nth-child(n+3){display:none}}
.detail-layout{display:grid;grid-template-columns:1.8fr 1fr;gap:1.3rem;align-items:start;margin-top:1.4rem}
.detail-layout > *{min-width:0}
@media(max-width:820px){.detail-layout{grid-template-columns:1fr}}
.panel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.2rem;
  min-width:0;margin-bottom:1.1rem}
.panel h3{margin-bottom:.6rem;font-size:1.08rem}
.panel .pre{white-space:pre-wrap;word-break:break-word;color:var(--ink)}
.amenities{display:flex;flex-wrap:wrap;gap:.5rem}
.amenity{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem;font-size:.88rem}
.book-panel .bigprice{font-size:1.7rem;font-weight:800}
.book-panel .bigprice small{font-size:.85rem;color:var(--muted);font-weight:500;display:block}
.book-panel .row{display:flex;justify-content:space-between;padding:.35rem 0;font-size:.93rem}
.book-panel .row .k{color:var(--muted)}

.note{background:#FFF8E8;border:1px solid #F0E0B8;border-radius:10px;padding:.7rem .9rem;
  font-size:.88rem;color:#6B5A22;margin-bottom:.9rem}
.note.ok{background:#E9F7F1;border-color:#B7E3D2;color:#155F45}
.note.bad{background:#FBEAE7;border-color:#E8B4AE;color:#7A2E22}

/* ===== شاشات حساب الضيف =====
   ⚠️ الشاشات دي كانت على قالب دليل الضيف البسيط، فكانت شكلها مختلف عن
   إيليت تماماً. نقلناها هنا عشان الضيف يحسّ إنه في نفس المكان — والكلاسات
   دي هي اللي كانت في القالب القديم. */
.wrap{max-width:640px;margin:0 auto;padding:1.2rem 1rem 2rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem 1.15rem;margin-bottom:.9rem;box-shadow:var(--shadow)}
.card h2{font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;
  font-weight:800;margin-bottom:.7rem}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;
  padding:.5rem 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0;padding-bottom:0}
.row .k{color:var(--muted);font-size:.85rem;flex-shrink:0}
.row .v{font-weight:700;text-align:end;word-break:break-word}
.chip{display:inline-block;background:var(--bg);border:1px solid var(--line);border-radius:99px;
  padding:.25rem .7rem;font-size:.82rem;white-space:nowrap}
.pre{white-space:pre-wrap;word-break:break-word}
.sub{color:var(--muted);font-size:.85rem}
ul{list-style:none}
ul li{padding:.45rem 0;border-bottom:1px solid var(--line);display:flex;gap:.6rem;align-items:flex-start}
ul li:last-child{border-bottom:0}
ul li .d{color:var(--primary);font-weight:800;flex-shrink:0}

/* استمارات */
label{display:block;font-size:.78rem;color:var(--muted);font-weight:700;margin:.75rem 0 .3rem}
input[type=text],input[type=tel],input[type=email],input[type=password],input[type=number],
input[type=date],select,textarea{
  width:100%;font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:.65rem .75rem;-webkit-appearance:none;appearance:none}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:1px;
  border-color:var(--primary)}
button.btn{border:0;width:100%;cursor:pointer;font:inherit}

/* ==================== شاشات الدخول والتسجيل ====================
   ⚠️ الشاشات دي كانت واخدة نص الشاشة: عمود ٦٤٠ بكسل لخانتين، وهيرو
      بصورة كبيرة، وزرار بعرض الكارت كله. أحمد قال «كبير جدا مش محتاج».
   ⚠️ الأرقام مقصودة: ٤٠٠ بكسل هو العرض اللي بيخلّي الاستمارة تبان
      استمارة مش بانر، وهو نفس مدى بوكينج في الموبايل. */
.wrap.auth{max-width:400px;padding-top:.9rem}
.wrap.auth .card{padding:1.1rem 1.15rem}
.wrap.auth label{font-size:.74rem;margin:.6rem 0 .25rem}
.wrap.auth input{padding:.52rem .65rem;font-size:.92rem}
.wrap.auth .btn{padding:.58rem 1rem;font-size:.95rem;margin-top:.9rem}
.wrap.auth .card + .card{margin-top:.55rem;padding:.75rem 1.1rem}
.wrap.auth .sub{font-size:.8rem}

/* الهيرو بيتصغّر في الشاشات دي — مش محتاجين صورة كبيرة لخانتين */
/* ⚠️ صورة الهيرو تتشال في شاشات الدخول — تدرّج نضيف بس. صورة شاطئ
      كبيرة فوق خانتين مالهاش أي لازمة وبتاخد نص الشاشة. */
.hero.auth{padding:1.1rem 1rem .95rem;
  background:linear-gradient(135deg,var(--primary-dark),var(--primary))}
.hero.auth h1{font-size:1.15rem;margin-bottom:.15rem}
.hero.auth .sub{font-size:.82rem}
.hero.auth::after{display:none}

/* تبويبات حساب الضيف */
.gnav{display:flex;gap:.4rem;margin-top:.8rem;flex-wrap:wrap}
.gnav a{flex:1 1 auto;text-align:center;text-decoration:none;color:#fff;font-size:.82rem;
  font-weight:700;padding:.5rem .7rem;border-radius:8px;background:#ffffff26;white-space:nowrap}
.gnav a.on{background:#fff;color:var(--primary-dark)}
.hero .hi{font-size:.88rem;opacity:.9;margin-bottom:.4rem}
.hero.small{padding:1.6rem 1rem 1.4rem;text-align:start}
.hero.small h1{font-size:1.35rem}
/* ⚠️ `.sub` العامة لونها رمادي (`--muted`) معمول لخلفية بيضا. جوّه الهيرو
 *    بتقع فوق صورة السما الفاتحة فمابتتقراش خالص. لازم فاتح هنا. */
.hero .sub{color:#eaf3f8;font-size:.95rem;opacity:.95;
  text-shadow:0 1px 3px rgba(0,0,0,.45)}
.mid{max-width:520px;margin:4rem auto;padding:0 1rem;text-align:center;color:var(--muted)}
.mid h2{color:var(--ink);font-size:1.2rem;margin-bottom:.5rem}

/* ===== التذييل =====
   ⚠️ اللون `--ink` (#1b2b34) زي القديم — كان أزرق مخضّر عندنا (#08303f)
      وده كان أوضح فرق بين الصفحتين لما وقفناهم جنب بعض. */
/* ⚠️⚠️ **`footer.foot` مش `.foot` لوحدها.** كلاس `foot` مستعمل في حاجتين:
   التذييل ده، **وسطر السعر جوّه كارت الوحدة** (`.card .foot` — الاسم جاي
   من الموقع القديم). ولما القاعدة كانت `.foot` بس، خلفية التذييل الغامقة
   كانت بتنزل على خانة السعر في كل كارت وتبقى مربع أسود مكان السعر.
   أي قاعدة تذييل جديدة لازم تبدأ بـ`footer.` */
footer.foot{background:var(--ink);color:#b9c6cd;margin-top:3.5rem;padding:2rem 1rem;font-size:.88rem}
footer.foot .in{max-width:1150px;margin:0 auto;text-align:center}
footer.foot a{color:#fff;font-weight:600}
footer.foot .flogo{margin:0 auto .6rem;display:block}
footer.foot .ftag{color:#9fbccb;font-size:.86rem;margin-bottom:1.4rem}
/* التواصل جوّه عمود المساعدة: سطر للاسم وتحته العنوان بخط أصغر */
.fcols a .sub{display:block;font-size:.76rem;color:rgba(255,255,255,.45);
              font-weight:500;letter-spacing:.1px;margin-top:.05rem}
.fcols a.wa{color:#7fe6a8}
.fcols a.wa:hover{color:#a8f5c6}
.fcols a.wa .sub{color:#7fe6a880}
.fcols a.wa .waico,.ditem.wa .waico,.drop .menu.wide a.wa .waico{color:#25D366}
.waico{vertical-align:-2px;margin-inline-end:.25rem}

/* ⚠️ عمود واحد على كل المقاسات — «تحت بعضيها» زي ما اتطلب بالظبط، مش
      شريط عريض بيتلفّ. */
.flinks{display:flex;gap:1.1rem;flex-wrap:wrap;justify-content:center;margin-bottom:1rem}
.fcopy{color:#7fa0b2;font-size:.8rem}
/* ---- أعمدة التذييل الأربعة — زي الموقع القديم بالحرف ----
   ⚠️ الضيف لازم يلاقي اللي بيدوّر عليه من غير ما يفتح القايمة. */
.fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;max-width:960px;
  margin:0 auto 1.6rem;text-align:start}
.fcols h4{font-size:.95rem;color:#fff;margin-bottom:.55rem}
.fcols a{display:block;color:rgba(255,255,255,.78);font-size:.85rem;margin-bottom:.4rem;font-weight:500}
.fcols a:hover{color:#fff}
@media(max-width:820px){.fcols{grid-template-columns:1fr 1fr;gap:1rem}}