/* ══════════════════════════════════════════════════════
   Barez — واجهة الحجز للعميل (stay)
   تُحمَّل بعد /css/client.css وتعتمد على متغيراته حصراً.
   ملاحظة: المتغير --gold في client.css هو الكحلي #1a3d8f وليس ذهباً.
══════════════════════════════════════════════════════ */

/* تدرجات مشتقة من التوكنات، معرَّفة مرة واحدة في الأعلى */
:root {
  --stay-green-bg: rgba(26,115,64,.09);
  --stay-green-bd: rgba(26,115,64,.22);
  --stay-red-bg:   rgba(192,57,43,.08);
  --stay-red-bd:   rgba(192,57,43,.22);
  --stay-navy-bg:  rgba(26,61,143,.06);
  --stay-line:     rgba(26,61,143,.10);
  --stay-sm:       0 1px 2px rgba(0,0,0,.05);
  --stay-md:       0 2px 10px rgba(0,0,0,.07);
}
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  :root {
    --stay-green-bg: color-mix(in srgb, var(--green) 9%,  transparent);
    --stay-green-bd: color-mix(in srgb, var(--green) 22%, transparent);
    --stay-red-bg:   color-mix(in srgb, var(--red)   8%,  transparent);
    --stay-red-bd:   color-mix(in srgb, var(--red)   22%, transparent);
    --stay-navy-bg:  color-mix(in srgb, var(--gold)  6%,  transparent);
    --stay-line:     color-mix(in srgb, var(--gold) 10%,  transparent);
  }
}

/* ── أساسيات ── */
.stay-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.stay-page { background: var(--light); }
.stay-main { padding: 22px 0 56px; }
.stay-sec { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 16px; }
.stay-sec-h { font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 12px; }
.stay-sec-h small { display: block; font-size: 12px; font-weight: 600; color: var(--text3); margin-top: 3px; }
.stay-muted { color: var(--text3); font-size: 12px; font-weight: 600; }
.stay-hidden { display: none !important; }

.stay-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 10px;
  padding: 12px 22px; font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, transform .15s;
}
.stay-btn--pri { background: var(--gold); color: var(--white); }
.stay-btn--pri:hover { background: var(--gold-light); }
.stay-btn--ghost { background: var(--white); color: var(--gold); border-color: var(--gold); }
.stay-btn--ghost:hover { background: var(--gold-muted); }
.stay-btn--quiet { background: var(--light2); color: var(--text2); border-color: var(--border); }
.stay-btn--quiet:hover { background: var(--border); }
.stay-btn--block { width: 100%; }
.stay-btn--sm { padding: 8px 16px; font-size: 13px; border-radius: 8px; }
.stay-btn[disabled] { opacity: .45; cursor: not-allowed; }
.stay-arrow { font-size: 15px; line-height: 1; }

.stay-alert { border-radius: 12px; padding: 12px 16px; font-size: 13.5px; font-weight: 600; margin-bottom: 14px; }
.stay-alert--err  { background: var(--stay-red-bg);   border: 1px solid var(--stay-red-bd);   color: var(--red); }
.stay-alert--ok   { background: var(--stay-green-bg); border: 1px solid var(--stay-green-bd); color: var(--green); }
.stay-alert--info { background: var(--stay-navy-bg);  border: 1px solid var(--stay-line);     color: var(--gold-dark); }

/* ══════════════════════════════════
   شريط البحث
══════════════════════════════════ */
.stay-sb { background: var(--gold-dark); padding: 16px 0; }
.stay-sb--sticky { position: sticky; top: 0; z-index: 60; box-shadow: var(--stay-md); }
.stay-sb-form {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr auto; gap: 8px;
  background: var(--white); border: 3px solid var(--gold-light);
  border-radius: 12px; padding: 8px;
}
.stay-sb-f { display: flex; flex-direction: column; gap: 3px; background: var(--light); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; min-width: 0; }
.stay-sb-f > label { font-size: 11px; font-weight: 700; color: var(--text3); }
.stay-sb-f > input,
.stay-sb-f > select {
  width: 100%; border: 0; background: transparent; outline: none;
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--text);
  padding: 0; min-width: 0;
}
.stay-sb-f:focus-within { border-color: var(--gold); background: var(--white); }
.stay-sb-go { background: var(--gold); color: var(--white); border: 0; border-radius: 8px; padding: 0 30px; font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.stay-sb-go:hover { background: var(--gold-light); }
.stay-sb-hint { color: rgba(255,255,255,.6); font-size: 12px; font-weight: 600; margin-top: 8px; }

/* ══════════════════════════════════
   شاشة البحث
══════════════════════════════════ */
.stay-hero { background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%); padding: 54px 0 34px; color: var(--white); }
.stay-hero h1 { font-size: 32px; font-weight: 900; line-height: 1.4; margin-bottom: 8px; }
.stay-hero p { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.75); max-width: 620px; }
.stay-hero .stay-sb { background: transparent; padding: 26px 0 0; }

.stay-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stay-tile { display: block; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.stay-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.stay-tile-img { height: 132px; background: var(--light2) center/cover no-repeat; }
.stay-tile-body { padding: 12px 14px 14px; }
.stay-tile-name { font-size: 15px; font-weight: 800; color: var(--text); }
.stay-tile-city { font-size: 12px; font-weight: 600; color: var(--text3); margin-top: 2px; }
.stay-tile-from { font-size: 12.5px; font-weight: 700; color: var(--gold); margin-top: 8px; }

.stay-helps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stay-help { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.stay-help b { display: block; font-size: 14.5px; font-weight: 800; margin-bottom: 4px; }
.stay-help span { font-size: 13px; color: var(--text2); font-weight: 600; line-height: 1.85; }

/* ══════════════════════════════════
   صفحة النتائج
══════════════════════════════════ */
.stay-res { display: grid; grid-template-columns: 262px 1fr; gap: 18px; align-items: start; }
.stay-rail { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 12px; }
.stay-rail-box { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.stay-rail-h { font-size: 13.5px; font-weight: 800; color: var(--text); margin-bottom: 10px; }
.stay-rail-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; font-weight: 600; color: var(--text2); cursor: pointer; }
.stay-rail-row input { accent-color: var(--gold); width: 15px; height: 15px; }
.stay-rail-row .c { margin-inline-start: auto; color: var(--text3); font-size: 12px; }
.stay-rail-box .stay-fg { margin-bottom: 10px; }
.stay-rail-box .stay-fg:last-of-type { margin-bottom: 12px; }

.stay-res-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.stay-found { font-size: 18px; font-weight: 900; color: var(--text); }
.stay-found small { display: block; font-size: 12.5px; font-weight: 600; color: var(--text3); margin-top: 2px; }
.stay-sortwrap { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.stay-sortwrap label { font-size: 12.5px; font-weight: 700; color: var(--text3); }
.stay-sortwrap select { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text); }

.stay-cards { display: flex; flex-direction: column; gap: 14px; }
.stay-card { display: grid; grid-template-columns: 236px 1fr 214px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: box-shadow .15s; }
.stay-card:hover { box-shadow: var(--shadow); }
.stay-card-media { position: relative; background: var(--light2) center/cover no-repeat; min-height: 214px; }

/* بديل البطاقة بلا صورة. الهدف ان تقرا مقصودة لا معطوبة: ثلاثة مبان من اربعة
   بلا اي وسائط، فالفراغ هو الحالة الغالبة لا الاستثناء. */
.stay-card-media--empty {
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.014) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, var(--light2) 0%, var(--light) 60%, var(--light2) 100%);
}
.stay-card-ph {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  color: var(--text3); text-align: center; padding: 0 16px; opacity: .75;
}
.stay-card-ph svg { opacity: .5; }
.stay-card-ph span { font-size: .92rem; font-weight: 600; color: var(--text2); }
.stay-card-ph small { font-size: .76rem; color: var(--text3); }
.stay-heart {
  position: absolute; top: 10px; left: 10px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid var(--border); border-radius: 50%;
  cursor: pointer; color: var(--text3); padding: 0; transition: color .15s, transform .15s;
}
.stay-heart:hover { transform: scale(1.08); color: var(--red); }
.stay-heart.on { color: var(--red); }
.stay-heart.on svg { fill: currentColor; }
.stay-card-body { padding: 15px 17px; min-width: 0; }
.stay-card-name { font-size: 18px; font-weight: 800; color: var(--gold); text-decoration: none; }
.stay-card-name:hover { text-decoration: underline; }
.stay-card-geo { font-size: 12.5px; font-weight: 700; color: var(--gold-light); margin-top: 3px; }
.stay-card-geo span { color: var(--text3); font-weight: 600; }
.stay-pill { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; }
.stay-pill b { background: var(--gold); color: var(--white); border-radius: 8px 8px 8px 0; padding: 4px 8px; font-size: 13px; font-weight: 800; }
.stay-pill i { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--text2); }
.stay-card-type { margin-top: 11px; font-size: 14.5px; font-weight: 800; color: var(--text); }
.stay-card-beds { font-size: 13px; font-weight: 600; color: var(--text2); margin-top: 2px; }
.stay-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.stay-badge { font-size: 12px; font-weight: 700; border-radius: 6px; padding: 3px 9px; }
.stay-badge--green { background: var(--stay-green-bg); border: 1px solid var(--stay-green-bd); color: var(--green); }
.stay-badge--navy  { background: var(--stay-navy-bg);  border: 1px solid var(--stay-line);     color: var(--gold); }
.stay-scarce { margin-top: 8px; font-size: 13px; font-weight: 800; color: var(--red); }
.stay-needs { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--gold-dark); background: var(--stay-navy-bg); border: 1px solid var(--stay-line); border-radius: 8px; padding: 6px 10px; display: inline-block; }

.stay-card-price { border-inline-start: 1px solid var(--border); padding: 15px 17px; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; text-align: left; }
.stay-price-meta { font-size: 12.5px; font-weight: 600; color: var(--text2); }
.stay-price-big { font-size: 24px; font-weight: 900; color: var(--text); margin-top: 2px; line-height: 1.3; }
.stay-price-tax { font-size: 12px; font-weight: 600; color: var(--text3); margin-top: 1px; }
.stay-card-price .stay-btn { margin-top: 12px; width: 100%; }
.stay-nodates { font-size: 13px; font-weight: 700; color: var(--text2); text-align: center; line-height: 1.8; }

.stay-empty { background: var(--white); border: 1px dashed var(--border); border-radius: var(--radius); padding: 46px 24px; text-align: center; }
.stay-empty b { display: block; font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.stay-empty p { font-size: 13.5px; color: var(--text2); font-weight: 600; margin-bottom: 16px; line-height: 1.85; }

/* ══════════════════════════════════
   صفحة المبنى
══════════════════════════════════ */
.stay-ph { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 14px; }
.stay-ph-top { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.stay-ph-title { font-size: 26px; font-weight: 900; color: var(--text); line-height: 1.35; }
.stay-ph-addr { font-size: 13px; font-weight: 600; color: var(--text2); margin-top: 5px; }
.stay-ph-addr a { color: var(--gold); font-weight: 700; text-decoration: none; margin-inline-start: 8px; }
.stay-ph-addr a:hover { text-decoration: underline; }
/* شارات الترويسة: المسافة إلى الحرم والترخيص السياحي. المسافة أول ما يقارن به
   نزيل المدينة وكانت مدفونة في جملة النبذة، والترخيص كان محجوباً كلياً. */
.stay-ph-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.stay-ph-badge {
  font-size: 12px; font-weight: 700; border-radius: 20px; padding: 3px 11px;
  background: var(--light2); border: 1px solid var(--border); color: var(--text2);
}
.stay-ph-badge--key { background: var(--stay-green-bg); border-color: var(--stay-green-bd); color: var(--green); }
.stay-score { margin-inline-start: auto; display: flex; align-items: center; gap: 9px; }
.stay-score b { background: var(--gold); color: var(--white); border-radius: 10px 10px 10px 0; padding: 7px 11px; font-size: 16px; font-weight: 900; }
.stay-score span { font-size: 12.5px; font-weight: 700; color: var(--text2); }

.stay-gal { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 128px 128px; gap: 6px; margin-top: 16px; border-radius: 12px; overflow: hidden; }
.stay-gal-t { background: var(--light2) center/cover no-repeat; position: relative; display: block; }
.stay-gal-t:first-child { grid-row: span 2; }
.stay-gal-more { position: absolute; inset: 0; background: rgba(10,10,10,.55); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; }

.stay-subnav { position: sticky; top: 0; z-index: 55; background: var(--white); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 14px; display: flex; align-items: center; gap: 4px; padding: 6px 10px; overflow-x: auto; }
.stay-subnav a { font-size: 13px; font-weight: 700; color: var(--text2); text-decoration: none; padding: 9px 13px; border-radius: 8px; white-space: nowrap; }
.stay-subnav a:hover { background: var(--light2); color: var(--gold); }
.stay-subnav .stay-subnav-cta { margin-inline-start: auto; background: var(--gold); color: var(--white); padding: 10px 22px; }
.stay-subnav .stay-subnav-cta:hover { background: var(--gold-light); color: var(--white); }

.stay-hl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.stay-hl-item { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; }
.stay-hl-item b { display: block; font-size: 13.5px; font-weight: 800; color: var(--text); }
.stay-hl-item span { font-size: 12px; font-weight: 600; color: var(--text3); }

.stay-amen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stay-amen-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text2); background: var(--light); border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; }
.stay-amen-item svg { color: var(--green); flex-shrink: 0; }

.stay-about { font-size: 14.5px; line-height: 1.95; color: var(--text2); white-space: pre-line; }

/* ── جدول الوحدات ── */
.stay-rooms-wrap { overflow-x: auto; }
.stay-rooms { width: 100%; border-collapse: separate; border-spacing: 0; }
.stay-rooms th {
  background: var(--gold); color: var(--white);
  font-size: 13px; font-weight: 800; text-align: right;
  padding: 12px 14px; border: 1px solid var(--gold);
}
.stay-rooms th:first-child { border-radius: 0 10px 0 0; }
.stay-rooms th:last-child  { border-radius: 10px 0 0 0; }
.stay-rooms td { border: 1px solid var(--border); padding: 14px; vertical-align: top; background: var(--white); }
.stay-rooms tr.is-out td { background: var(--light); }

.stay-col-room  { width: 33%; }
.stay-col-price { width: 17%; }
.stay-col-plan  { width: 24%; }
.stay-col-qty   { width: 12%; }
.stay-col-go    { width: 14%; }

/* صورة نوع الغرفة داخل صف الجدول. كان الصف نصّاً خالصاً: الصور كلها في معرض
   المبنى المشترك بين كل الأنواع، فلا شيء يميّز نوعاً عن نوع عند الاختيار.
   عرضٌ ثابت لا يزاحم عمود السعر، وارتفاع يتبع نسبة 4:3 لصور الشقق. */
.stay-room-thumb {
  width: 132px; aspect-ratio: 4 / 3; border-radius: 9px;
  background-size: cover; background-position: center;
  background-color: var(--light2); border: 1px solid var(--border);
  margin-bottom: 9px; max-width: 100%;
}
.stay-room-name { font-size: 15.5px; font-weight: 800; color: var(--gold); text-decoration: none; }
.stay-room-name:hover { text-decoration: underline; }
.stay-chip { display: inline-block; font-size: 11.5px; font-weight: 800; border-radius: 6px; padding: 2px 8px; margin-inline-start: 7px; vertical-align: middle; }
.stay-chip--red { background: var(--stay-red-bg); border: 1px solid var(--stay-red-bd); color: var(--red); }
.stay-chip--quiet { background: var(--light2); border: 1px solid var(--border); color: var(--text3); }
.stay-room-meta { font-size: 13px; font-weight: 600; color: var(--text2); margin-top: 7px; line-height: 1.9; }
.stay-room-meta b { font-weight: 800; color: var(--text); }
/* وصف نوع الغرفة داخل تفاصيل الصف. أخف من سطور البيانات المجاورة لأنه نص متصل
   لا قائمة أرقام، فيُقرأ فقرةً ولا يزاحم «تتسع لـ» و«المساحة» على العين. */
.stay-room-desc { display: block; font-weight: 500; color: var(--text2); line-height: 1.85; margin-bottom: 4px; }
.stay-fac { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.stay-fac i { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--green); background: var(--stay-green-bg); border: 1px solid var(--stay-green-bd); border-radius: 6px; padding: 2px 8px; }

/* سطر الخصم في خلية السعر. أخضر لأنه ربحٌ للعميل لا تحذير، وأصغر من الإجمالي
   حتى لا يزاحم الرقم الذي يقرؤه العميل أولاً. */
.stay-price-off { display: block; font-size: 12px; font-weight: 800; color: var(--green); margin-top: 2px; }
.stay-cell-price b { display: block; font-size: 20px; font-weight: 900; color: var(--text); line-height: 1.4; }
.stay-cell-price span { display: block; font-size: 12px; font-weight: 600; color: var(--text3); margin-top: 2px; }
.stay-cell-price .t { color: var(--text2); }

.stay-plan-line { display: flex; align-items: flex-start; gap: 7px; font-size: 12.8px; font-weight: 700; color: var(--text2); margin-bottom: 7px; line-height: 1.7; }
.stay-plan-line svg { flex-shrink: 0; margin-top: 4px; }
.stay-plan-line--green { color: var(--green); }
.stay-plan-line--muted { color: var(--text3); font-weight: 600; }

.stay-qty { width: 100%; background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 10px; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--text); outline: none; }
.stay-qty:focus { border-color: var(--gold); }
.stay-qty[disabled] { background: var(--light2); color: var(--text3); }

.stay-go { display: none; }
.stay-go.on { display: block; }
.stay-go-sum { font-size: 12.5px; font-weight: 800; color: var(--text); margin-bottom: 8px; text-align: center; }
.stay-go-note { font-size: 11.5px; font-weight: 700; color: var(--green); margin-top: 7px; text-align: center; line-height: 1.6; }
.stay-go-hint { font-size: 12px; font-weight: 700; color: var(--text3); text-align: center; line-height: 1.7; }

/* هياكل انتظار بمقاسات المحتوى النهائي حتى لا تقفز الصفحة أثناء الجلب */
.stay-skel { background: var(--light2); border-radius: 6px; animation: stayPulse 1.1s ease-in-out infinite; }
@keyframes stayPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.stay-sk-price { height: 26px; width: 78%; }
.stay-sk-line  { height: 13px; width: 62%; margin-top: 8px; }
.stay-sk-wide  { height: 13px; width: 88%; margin-top: 8px; }
.stay-sk-btn   { height: 40px; width: 100%; border-radius: 8px; }
.stay-rooms .stay-sk { display: none; }
.stay-rooms.is-loading .stay-sk { display: block; }
.stay-rooms.is-loading .stay-live { visibility: hidden; height: 0; overflow: hidden; }

/* ══════════════════════════════════
   إتمام الحجز
══════════════════════════════════ */
.stay-steps { display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; overflow-x: auto; }
.stay-step { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text3); white-space: nowrap; }
.stay-step em { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: var(--light2); color: var(--text3); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.stay-step.done { color: var(--green); }
.stay-step.done em { background: var(--stay-green-bg); color: var(--green); }
.stay-step.now { color: var(--gold); }
.stay-step.now em { background: var(--gold); color: var(--white); }
.stay-step-sep { color: var(--border); font-weight: 800; }

.stay-co { display: grid; grid-template-columns: 1fr 330px; gap: 18px; align-items: start; }
.stay-co-side { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 12px; }

.stay-sum { background: var(--white); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.stay-sum-prop { display: flex; gap: 11px; padding: 14px; border-bottom: 1px solid var(--border); }
.stay-sum-img { width: 76px; height: 62px; border-radius: 8px; background: var(--light2) center/cover no-repeat; flex-shrink: 0; }
.stay-sum-prop b { display: block; font-size: 14.5px; font-weight: 800; color: var(--text); }
.stay-sum-prop span { display: block; font-size: 12px; font-weight: 600; color: var(--text3); margin-top: 2px; line-height: 1.6; }
.stay-sum-box { padding: 14px; border-bottom: 1px solid var(--border); }
.stay-sum-box:last-child { border-bottom: 0; }
.stay-sum-h { font-size: 13.5px; font-weight: 800; color: var(--text); margin-bottom: 9px; }
.stay-sum-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text2); padding: 4px 0; }
.stay-sum-row b { font-weight: 800; color: var(--text); }
.stay-sum-row--tot { border-top: 1px solid var(--border); margin-top: 7px; padding-top: 10px; font-size: 15px; }
.stay-sum-row--tot b { font-size: 19px; font-weight: 900; }
.stay-sum-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stay-sum-date { background: var(--light); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; }
.stay-sum-date span { display: block; font-size: 11px; font-weight: 700; color: var(--text3); }
.stay-sum-date b { display: block; font-size: 13.5px; font-weight: 800; color: var(--text); margin-top: 2px; }
.stay-sum-date i { display: block; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--text2); margin-top: 2px; }
.stay-cancelbox { background: var(--stay-green-bg); border: 1px solid var(--stay-green-bd); border-radius: 12px; padding: 14px; }
.stay-cancelbox b { display: block; font-size: 13.5px; font-weight: 800; color: var(--green); margin-bottom: 5px; }
.stay-cancelbox p { font-size: 12.5px; font-weight: 600; color: var(--text2); line-height: 1.85; }

.stay-form { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.stay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stay-full { grid-column: 1 / -1; }
.stay-fg label { display: block; font-size: 12px; font-weight: 700; color: var(--text2); margin-bottom: 6px; }
.stay-fg label em { font-style: normal; color: var(--red); }
.stay-fg input, .stay-fg select, .stay-fg textarea {
  width: 100%; background: var(--light); border: 1px solid var(--border); border-radius: 9px;
  padding: 11px 13px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text);
  outline: none; transition: border-color .15s, background .15s;
}
.stay-fg input:focus, .stay-fg select:focus, .stay-fg textarea:focus { border-color: var(--gold); background: var(--white); }
.stay-fg textarea { resize: vertical; min-height: 92px; line-height: 1.85; }
.stay-fg small { display: block; font-size: 11.5px; font-weight: 600; color: var(--text3); margin-top: 5px; }
.stay-phone { display: flex; direction: ltr; }
.stay-phone .stay-prefix {
  display: flex; align-items: center; padding: 0 13px; background: var(--light2);
  border: 1px solid var(--border); border-radius: 9px 0 0 9px; border-inline-end: 0;
  font-size: 14px; font-weight: 800; color: var(--text2);
}
.stay-phone input { border-radius: 0 9px 9px 0; text-align: left; }
.stay-legend { font-size: 14.5px; font-weight: 800; color: var(--text); margin: 22px 0 12px; padding-top: 18px; border-top: 1px solid var(--border); }
.stay-legend--first { margin-top: 0; padding-top: 0; border-top: 0; }
.stay-legend small { display: block; font-size: 12px; font-weight: 600; color: var(--text3); margin-top: 3px; line-height: 1.8; }
.stay-rules { background: var(--light); border: 1px solid var(--border); border-radius: 12px; padding: 15px 17px; }
.stay-rules ul { list-style: none; }
.stay-rules li { position: relative; padding-inline-start: 18px; font-size: 13px; font-weight: 600; color: var(--text2); line-height: 2.05; }
.stay-rules li::before { content: ''; position: absolute; inset-inline-start: 0; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.stay-agree { font-size: 12.5px; font-weight: 700; color: var(--text2); margin-top: 12px; line-height: 1.9; }

/* ══════════════════════════════════
   التأكيد وإدارة الحجز
══════════════════════════════════ */
.stay-conf { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.stay-conf-top { background: var(--stay-green-bg); border-bottom: 1px solid var(--stay-green-bd); padding: 26px 24px; text-align: center; }
.stay-conf-top b { display: block; font-size: 21px; font-weight: 900; color: var(--green); margin-bottom: 6px; }
.stay-conf-top p { font-size: 13.5px; font-weight: 600; color: var(--text2); line-height: 1.85; }
.stay-conf-top--wait { background: var(--stay-navy-bg); border-bottom-color: var(--stay-line); }
.stay-conf-top--wait b { color: var(--gold-dark); }
.stay-conf-ref { display: inline-block; background: var(--white); border: 2px dashed var(--gold); border-radius: 12px; padding: 10px 26px; margin-top: 14px; font-size: 22px; font-weight: 900; color: var(--text); letter-spacing: 1px; }
.stay-conf-body { padding: 22px 24px; }
.stay-kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stay-kv-item { background: var(--light); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; }
.stay-kv-item span { display: block; font-size: 11.5px; font-weight: 700; color: var(--text3); }
.stay-kv-item b { display: block; font-size: 14px; font-weight: 800; color: var(--text); margin-top: 3px; line-height: 1.6; }
.stay-conf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.stay-lookup { max-width: 470px; margin: 0 auto; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; }
.stay-lookup h1 { font-size: 21px; font-weight: 900; color: var(--text); margin-bottom: 5px; }
.stay-lookup > p { font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 18px; line-height: 1.85; }

@media print {
  .client-sidebar, .csb-overlay, .csb-ham, .site-footer-new, .stay-conf-actions, .stay-subnav { display: none !important; }
  .stay-page { background: var(--white); }
  .csb-content::before { display: none; }
}

/* ══════════════════════════════════
   السلم المتجاوب: 1024 ثم 900 ثم 768 ثم 600
══════════════════════════════════ */
@media (max-width: 1024px) {
  .stay-sb-form { grid-template-columns: 1fr 1fr; }
  .stay-sb-go { grid-column: 1 / -1; padding: 13px 30px; }
  .stay-res { grid-template-columns: 220px 1fr; }
  .stay-card { grid-template-columns: 200px 1fr 190px; }
  .stay-tiles { grid-template-columns: repeat(2, 1fr); }
  .stay-hl { grid-template-columns: repeat(2, 1fr); }
  .stay-amen { grid-template-columns: repeat(2, 1fr); }
  .stay-co { grid-template-columns: 1fr 296px; }
}

@media (max-width: 900px) {
  .stay-hero { padding: 60px 0 30px; }
  .stay-res { grid-template-columns: 1fr; }
  .stay-rail { position: static; }
  .stay-co { grid-template-columns: 1fr; }
  .stay-co-side { position: static; order: -1; }

  /* جدول الوحدات يصير بطاقات مكدسة: خمسة أعمدة لا تُقرأ على شاشة 390 بكسل */
  .stay-rooms-wrap { overflow-x: visible; }
  .stay-rooms, .stay-rooms tbody, .stay-rooms tr, .stay-rooms td { display: block; width: 100%; }
  .stay-rooms thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stay-rooms tr {
    border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
    margin-bottom: 14px; background: var(--white); box-shadow: var(--stay-sm);
  }
  .stay-rooms td { border: 0; border-top: 1px solid var(--border); padding: 13px 15px; }
  .stay-rooms td:first-child { border-top: 0; }
  .stay-rooms td[data-label]::before {
    content: attr(data-label);
    display: block; font-size: 11px; font-weight: 800; color: var(--text3); margin-bottom: 6px;
  }
  .stay-cell-room::before { display: none; }
  .stay-cell-price { background: var(--light); }
  .stay-cell-price b { display: inline-block; }
  .stay-cell-price span { display: inline-block; margin: 0 8px 0 0; }
  .stay-cell-qty, .stay-cell-go { background: var(--light); }
  .stay-col-room, .stay-col-price, .stay-col-plan, .stay-col-qty, .stay-col-go { width: auto; }
}

@media (max-width: 768px) {
  .stay-wrap { padding: 0 14px; }
  .stay-hero h1 { font-size: 25px; }
  .stay-card { grid-template-columns: 1fr; }
  .stay-card-media { min-height: 186px; }
  .stay-card-price { border-inline-start: 0; border-top: 1px solid var(--border); align-items: stretch; text-align: right; }
  .stay-gal { grid-template-columns: 1fr 1fr; grid-template-rows: 118px 118px; }
  .stay-gal-t:first-child { grid-row: span 1; grid-column: span 2; }
  .stay-gal-t:nth-child(n+4) { display: none; }
  .stay-kv { grid-template-columns: 1fr 1fr; }
  .stay-helps { grid-template-columns: 1fr; }
  .stay-sec { padding: 18px 16px; }
  .stay-ph { padding: 17px 16px; }
  .stay-form { padding: 18px 16px; }
}

@media (max-width: 600px) {
  .stay-sb-form { grid-template-columns: 1fr; }
  .stay-tiles { grid-template-columns: 1fr; }
  .stay-hl { grid-template-columns: 1fr; }
  .stay-amen { grid-template-columns: 1fr; }
  .stay-grid { grid-template-columns: 1fr; }
  .stay-kv { grid-template-columns: 1fr; }
  .stay-sum-dates { grid-template-columns: 1fr; }
  .stay-ph-title { font-size: 21px; }
  .stay-score { margin-inline-start: 0; }
  .stay-found { font-size: 16px; }
  .stay-sortwrap { margin-inline-start: 0; width: 100%; }
  .stay-sortwrap select { flex: 1; }
  .stay-conf-ref { font-size: 18px; padding: 9px 18px; }
  .stay-conf-actions .stay-btn { width: 100%; }
}


/* ── تقييمات النزلاء ─────────────────────────────────────── */
.stay-rev-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.stay-rev-score{background:var(--gold);color:#fff;font-weight:900;font-size:18px;border-radius:12px;padding:8px 14px;}
.stay-rev-band{font-weight:800;font-size:15px;}
.stay-rev-count{color:var(--text3);font-size:13px;}
.stay-rev-subs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 22px;margin-bottom:20px;}
.stay-rev-sub{display:flex;align-items:center;gap:10px;font-size:13px;}
.stay-rev-sub > span:first-child{flex:0 0 96px;color:var(--text2);}
.stay-rev-bar{flex:1;height:6px;border-radius:99px;background:var(--light);overflow:hidden;}
.stay-rev-bar > i{display:block;height:100%;background:var(--gold);border-radius:99px;}
.stay-rev-sub > b{flex:0 0 30px;text-align:left;font-weight:800;}
.stay-rev-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;}
.stay-rev-card{border:1px solid var(--border);border-radius:14px;padding:14px 16px;background:#fff;}
.stay-rev-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px;}
.stay-rev-card-h > span{background:var(--light);color:var(--gold);font-weight:800;font-size:13px;border-radius:8px;padding:3px 9px;}
.stay-rev-meta{font-size:11px;color:var(--text3);margin-bottom:8px;}
.stay-rev-card p{font-size:13px;line-height:1.9;color:var(--text2);margin:0;}


/* حقل الجوال بمقدمة الدولة، ولوحة مفاتيح رقمية على الجوال */
.stay-phone{display:flex;align-items:stretch;gap:0;border:1px solid var(--border);border-radius:12px;background:var(--light);overflow:hidden;}
.stay-phone:focus-within{border-color:var(--gold);background:#fff;}
.stay-phone-cc{display:flex;align-items:center;padding:0 12px;font-size:13px;font-weight:700;color:var(--text3);border-inline-end:1px solid var(--border);direction:ltr;}
.stay-phone input{flex:1;border:none!important;background:transparent!important;min-height:48px;direction:ltr;text-align:right;}
.stay-phone input:focus{outline:none;}


/* رسالة نجاح ورسالة خطأ في صفحة التأكيد */
.stay-okbox{background:#e9f6ee;border:1px solid #b7dfc5;color:#14603a;border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.9;font-weight:600;}
.stay-errbox{background:#fdecea;border:1px solid #f5c2bd;color:#8e2a20;border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.9;margin-bottom:14px;}


/* ════════════════════════════════════════════════════
   لوحة التصفية المطوية على الجوال

   على الحاسب لا شيء يتغير: الزر ومربع الاختيار مخفيان تماما واللوحة
   مفتوحة دائما، فالشكل هناك هو نفسه بكسلا بكسل.

   تحت تسعمئة بكسل تُطوى اللوحة خلف زر «تصفية النتائج»، فتبدأ بطاقات
   الشقق مباشرة تحت شريط البحث بدل أربعة وعشرين خيارا يسبقها. حقول
   التاريخ تبقى ظاهرة في الشريط لأنها هي التي تحدد السعر، وعدد عوامل
   التصفية المفعلة يظهر على الزر نفسه فلا تختفي حالة مفلترة عن العميل.

   التحكم كله بلا جافاسكربت: المربع مخفي بصريا على الجوال لكنه يظل
   قابلا للتركيز، والمسافة تفتح اللوحة وتغلقها.
════════════════════════════════════════════════════ */

/* على الحاسب يختفي المربع نهائيا فلا يدخل ترتيب الانتقال بلوحة المفاتيح،
   إذ لا وظيفة له هناك واللوحة مفتوحة أصلا. */
.stay-rail-cb { display: none; }
.stay-rail-toggle { display: none; }
.stay-rail-panel { display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 900px) {
  .stay-rail-cb {
    display: block;
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; white-space: nowrap;
    clip: rect(0 0 0 0); clip-path: inset(50%);
  }
  .stay-rail-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--white); border: 1px solid var(--border); border-radius: 12px;
    padding: 13px 16px; box-shadow: var(--stay-sm);
    font-size: 14px; font-weight: 800; color: var(--text);
    cursor: pointer; -webkit-user-select: none; user-select: none;
  }
  .stay-rail-toggle-t { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
  .stay-rail-toggle-t > svg { color: var(--gold); flex: none; }
  .stay-rail-count {
    font-style: normal; font-size: 12px; font-weight: 800; line-height: 1;
    background: var(--gold); color: var(--white); border-radius: 99px;
    padding: 5px 8px; min-width: 22px; text-align: center; flex: none;
  }
  /* حدود فيزيائية لا منطقية: السهم يشير للأسفل ثم للأعلى، وهو لا يتبع اتجاه الكتابة */
  .stay-rail-toggle-x {
    flex: none; width: 9px; height: 9px; margin-bottom: 3px;
    border-right: 2px solid var(--text3); border-bottom: 2px solid var(--text3);
    transform: rotate(45deg); transition: transform .18s ease;
  }
  .stay-rail-cb:checked ~ .stay-rail-toggle .stay-rail-toggle-x {
    transform: rotate(-135deg); margin-bottom: -3px;
  }
  .stay-rail-cb:focus-visible ~ .stay-rail-toggle {
    outline: 2px solid var(--gold); outline-offset: 2px;
  }
  /* قائمة أنواع الشقق تبلغ أربعة وعشرين خيارا، فنحدها بارتفاع يمرر داخل
     نفسه حتى يبقى زر «طبق التصفية» قريبا من الإبهام. */
  .stay-rail-types { max-height: 252px; overflow-y: auto; overscroll-behavior: contain; padding-inline-end: 4px; }
  /* الطي بـ display لا بارتفاع مقصوص، حتى تخرج مربعات نوع الشقة من ترتيب
     الانتقال بلوحة المفاتيح ومن قياس الصفحة معا لا أن تُخفى بصريا فقط. */
  .stay-rail-panel { display: none; }
  .stay-rail-cb:checked ~ .stay-rail-panel { display: flex; animation: stay-rail-open .18s ease both; }
}

@keyframes stay-rail-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stay-rail-toggle-x { transition: none; }
  .stay-rail-cb:checked ~ .stay-rail-panel { animation: none; }
}

/* ══ تفاصيل نوع الوحدة الممتدة ══
   الكتلة المطوية كانت سطرين (طوابق وفائض مرافق)، وصارت ما يقرؤه النزيل قبل أن
   يقرّر: معرضٌ بالفئات، وترتيب نوم مرسوم، ومرافق مجمّعة، ووصف بثلاثة قطاعات. */

/* شريط المعرض: يمرّر أفقياً داخل نفسه فلا يدفع الجدول للتمدّد */
.stay-gal-strip {
  display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 4px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.stay-gal-item { margin: 0; flex: 0 0 auto; width: 150px; scroll-snap-align: start; }
.stay-gal-img {
  width: 150px; aspect-ratio: 4 / 3; border-radius: 9px;
  background-size: cover; background-position: center;
  background-color: var(--light2); border: 1px solid var(--border);
}
.stay-gal-item figcaption {
  font-size: 11px; font-weight: 700; color: var(--text3);
  margin-top: 5px; text-align: center;
}

.stay-detail-blk { margin-top: 14px; }
.stay-detail-h {
  font-size: 13px; font-weight: 800; color: var(--text);
  margin-bottom: 7px; letter-spacing: -.01em;
}
.stay-detail-p { font-size: 13px; font-weight: 500; color: var(--text2); line-height: 1.9; margin: 0; }

/* ترتيب النوم: بطاقة لكل غرفة — «غرفتان» رقمٌ، وسريرٌ ماستر وسريران مفردان صورة */
.stay-beds { display: flex; flex-wrap: wrap; gap: 8px; }
.stay-bed-card {
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px;
  background: var(--light2); min-width: 130px;
}
.stay-bed-ico { display: block; font-size: 17px; line-height: 1.2; margin-bottom: 3px; }
.stay-bed-card b { display: block; font-size: 13px; font-weight: 800; color: var(--text); }
.stay-bed-card span { display: block; font-size: 12px; font-weight: 600; color: var(--text3); margin-top: 2px; }

/* المرافق مجمّعة: عشرون مرفقاً في سطر واحد لا تُقرأ، ومقسّمةً تُمسح بالعين */
.stay-amen-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; }
.stay-amen-group-h {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 800; color: var(--text); margin-bottom: 5px;
}
.stay-amen-group-h span { font-size: 15px; }
.stay-amen-group ul { list-style: none; margin: 0; padding: 0; }
.stay-amen-group li {
  font-size: 12.5px; font-weight: 600; color: var(--text2);
  line-height: 1.85; padding-inline-start: 14px; position: relative;
}
.stay-amen-group li::before {
  content: '·'; position: absolute; inset-inline-start: 4px;
  color: var(--green); font-weight: 900;
}

/* الخريطة المدمجة */
.stay-map {
  border-radius: 12px; overflow: hidden; border: 1px solid var(--border);
  background: var(--light2); line-height: 0;
}
.stay-map iframe { width: 100%; height: 340px; border: 0; display: block; }
.stay-map-out {
  display: inline-block; margin-top: 9px; font-size: 13px; font-weight: 700;
  color: var(--gold); text-decoration: none;
}
.stay-map-out:hover { text-decoration: underline; }

/* شارة الميزة التنافسية — أهدأ من شارة المسافة، فالمسافة تحسم والميزة تُطمئن */
.stay-ph-badge--feat { background: var(--stay-green-bg); border-color: var(--stay-green-bd); color: var(--green); }

@media (max-width: 640px) {
  .stay-gal-item, .stay-gal-img { width: 128px; }
  .stay-map iframe { height: 260px; }
}