/* apps/offer/static/my_offer/css/offer_detail.css */

/* ألوان/مقاييس مطابقة تماماً لـ product_detail.css (نفس :root المستخدم في
   صفحة تفاصيل المنتج) — أسماء المتغيرات محفوظة (--od-*) لتفادي إعادة كتابة
   كل استخدام في هذا الملف، لكن القيم مطابقة حرفياً لنظيرتها في المنتج. */
/* [FIX-MODAL-VARS-SCOPE]: هذه المتغيرات كانت مُعرَّفة على .offer-detail-page
   بدل :root — تعمل بشكل صحيح لأي عنصر داخل <main class="offer-detail-page">
   (المعرض، السعر، البطاقات...)، لكن النوافذ المنبثقة (login-modal،
   booking-modal، report-offer-modal، ...) كلها *أشقاء* لـ .offer-detail-page
   في الـ DOM (مُعرَّفة بعد </main> مباشرة في offer_detail.html)، لا أبناء
   لها — فلا تصلها هذه المتغيرات إطلاقاً عبر التوريث. أي var(--od-*) داخل
   أي نافذة منبثقة كان يُحسَب كقيمة غير صالحة (invalid at computed-value
   time)، فتسقط الخاصية بصمت (خلفية شفافة، لا حدود، ألوان بيضاء فوق أبيض) —
   هذا هو السبب الحقيقي وراء ظهور أزرار النوافذ المنبثقة بلا أي تنسيق.
   product_detail.css (الملف الشقيق الذي يعمل بشكل صحيح) يُعرِّف متغيراته
   على :root تحديداً لهذا السبب — نفس الإصلاح هنا. */
:root {
  --od-primary: #2563eb;
  --od-primary-dark: #1d4ed8;
  --od-primary-light: rgba(37, 99, 235, .08);
  --od-danger: #dc2626;
  --od-danger-light: rgba(220, 38, 38, .08);
  --od-success: #059669;
  --od-success-light: rgba(5, 150, 105, .08);
  --od-warning: #d97706;
  --od-warning-light: rgba(217, 119, 6, .1);
  --od-border: #e2e8f0;
  --od-border-strong: #cbd5e1;
  --od-bg-soft: #f8fafc;
  --od-surface-2: #f1f5f9;
  --od-ink: #0f172a;
  --od-ink-muted: #475569;
  --od-shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --od-shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --od-shadow: 0 2px 8px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
  --od-shadow-lg: 0 10px 30px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.06);
  --od-radius-lg: .75rem;
  --od-radius-xl: 1rem;
  --od-radius-2xl: 1.25rem;
  --od-transition: 200ms cubic-bezier(.4, 0, .2, 1);
}
.offer-detail-page {
  background: #f0f2f7;
  padding: 20px 0 60px;
}

.offer-detail-page .container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 16px;
}

.offer-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

@media (max-width: 900px) {
  .offer-detail-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ── § 1 gallery — نفس نمط product_detail.css بالحرف: عمود (صورة فوق +
   شريط مصغّرات أفقي قابل للسحب تحت)، بلا قص للصورة (object-fit: contain)،
   ظل واضح، sticky على الشاشات الكبيرة ─────────────────────── */
.gallery-section {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-width: 0;
  width: 100%;
}
@media (min-width: 1024px) {
  .gallery-section { position: sticky; top: 2rem; }
}

.main-image-container {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: var(--od-radius-2xl);
  overflow: hidden;
  background: var(--od-bg-soft);
  border: 1px solid var(--od-border);
  box-shadow: 0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
}
@media (min-width: 1024px) {
  .main-image-container { aspect-ratio: 4 / 3; }
}
.main-image {
  width: 100%; height: 100%;
  object-fit: contain; /* عرض الصورة كاملة دون قص — نفس [FIX-IMG] في المنتج */
  display: block;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.main-image-container:hover .main-image { transform: scale(1.04); }

.zoom-btn {
  position: absolute; top: .75rem; left: 3rem;
  width: 2.5rem; height: 2.5rem; border-radius: var(--od-radius-lg);
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,.08); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--od-ink); box-shadow: var(--od-shadow-sm);
  transition: all var(--od-transition);
}
.zoom-btn:hover { background: #fff; transform: scale(1.08); box-shadow: var(--od-shadow); }

/* [FIX-VERIFIED-BADGE-OVERLAP]: كانتا شارتين منفصلتين، كل واحدة بإحداثيات
   top/right مطلقة خاصة بها — نفس top: .875rem لكلتيهما، فتتراكبان حرفياً
   فوق بعضهما متى ظهرتا معاً (خدمة مميزة وموثّقة في آن واحد). الحل حاوية واحدة
   مرتّبة (flex row — نفس صف card-badges-right في offer_card.html) تحمل
   موضعها المطلق الوحيد؛ الشارتان بداخلها عنصرا flex متجاوران أفقياً بمسافة
   ثابتة، لا أحدهما فوق الآخر — تعمل بشكل صحيح ظهرت شارة واحدة أو كلتاهما. */
.image-corner-badges {
  position: absolute; top: .875rem; right: .875rem; z-index: 5;
  display: flex; flex-direction: row; align-items: center; gap: .5rem;
}
.featured-badge-image {
  background: #f59e0b; color: #fff; font-size: .875rem; font-weight: 800;
  padding: .3rem .75rem; border-radius: var(--od-radius-lg);
  box-shadow: var(--od-shadow-sm);
}
.verified-corner-badge {
  color: var(--od-primary);
  background: rgba(255,255,255,.92); border-radius: 50%; padding: 3px;
  display: flex; box-shadow: var(--od-shadow-sm);
}
.save-offer-btn { z-index: 10; }

/* الشريط الأفقي القابل للسحب — نفس نمط thumbnails-track في المنتج */
.thumbnails-sidebar {
  width: 100%; max-width: 100%; overflow: hidden; padding: .25rem 0; position: relative; box-sizing: border-box;
  mask-image: linear-gradient(to left, transparent 0%, black 2rem, black calc(100% - 2rem), transparent 100%);
  -webkit-mask-image: linear-gradient(to left, transparent 0%, black 2rem, black calc(100% - 2rem), transparent 100%);
}
.thumbnails-track {
  display: flex; flex-direction: row; flex-wrap: nowrap; gap: .5rem;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch; scroll-behavior: smooth; cursor: grab; user-select: none;
  padding: .25rem .25rem .5rem;
}
.thumbnails-track::-webkit-scrollbar { display: none; }
.thumbnails-track:active { cursor: grabbing; }
.thumbnail {
  flex: 0 0 4rem; width: 4rem; height: 4rem; min-width: 4rem;
  border-radius: var(--od-radius-lg); overflow: hidden;
  border: 2px solid transparent; padding: 0; cursor: pointer; background: #fff;
  box-shadow: var(--od-shadow-xs);
  transition: border-color var(--od-transition), transform var(--od-transition), box-shadow var(--od-transition);
}
.thumbnail:hover { border-color: var(--od-border-strong); transform: translateY(-2px); box-shadow: var(--od-shadow-sm); }
.thumbnail.active { border-color: var(--od-primary); box-shadow: 0 0 0 3px var(--od-primary-light), var(--od-shadow-sm); }
.thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
@media (min-width: 1024px) {
  .thumbnail { flex: 0 0 5rem; width: 5rem; height: 5rem; min-width: 5rem; }
}

/* ── § 2 info column ─────────────────────────────────────── */
.offer-info-section { display: flex; flex-direction: column; gap: 18px; }

/* بطاقة بيضاء تجمع العنوان/الوصف/السعر/التاريخ-الموقع/التقييم/أزرار
   التواصل معاً — نفس نمط .product-header في product_detail.css بالحرف. */
.offer-header-block {
  background: #fff; border: 1px solid var(--od-border); border-radius: var(--od-radius-xl);
  padding: 1.5rem; box-shadow: var(--od-shadow-xs);
  display: flex; flex-direction: column; gap: 1rem;
}

.title-badges-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.offer-title { font-size: 1.5rem; font-weight: 800; color: var(--od-ink); margin: 0; line-height: 1.35; }
.offer-badges { display: flex; gap: 6px; }
.badge-icon.featured    { color: #f59e0b; }
.badge-icon.recommended { color: #ef4444; }

.offer-description { color: var(--od-ink-muted); font-size: .92rem; line-height: 1.6; margin: 0; cursor: pointer; }
.offer-description .desc-full { display: none; }

/* نفس نمط .price-section في product_detail.css: خلفية متدرجة + سعر ضخم */
.price-section {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: .875rem 1rem;
  background: linear-gradient(135deg, #eff6ff, #f0fdf4);
  border-radius: var(--od-radius-lg);
  border: 1px solid #dbeafe;
}
.current-price { font-size: 2rem; font-weight: 900; color: var(--od-primary); letter-spacing: -.5px; }
.price-unit { font-size: 1rem; color: var(--od-ink-muted); font-weight: 600; }
.pricing-note {
  display: flex; align-items: center; gap: 6px; margin: 0;
  font-size: .8rem; color: #b45309; background: #fffbeb;
  padding: 6px 10px; border-radius: 8px; width: fit-content;
}

.date-location-section { display: flex; flex-wrap: wrap; gap: .625rem; }
/* نفس نمط .info-item في product_detail.css: شارة/pill بخلفية + حدّ + hover */
.info-item {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .875rem;
  background: var(--od-bg-soft); border: 1px solid var(--od-border);
  border-radius: var(--od-radius-lg);
  font-size: .8125rem; color: var(--od-ink-muted);
  transition: all var(--od-transition); flex-shrink: 0; white-space: nowrap;
}
.info-item:hover { background: var(--od-surface-2); border-color: var(--od-primary); transform: translateY(-1px); box-shadow: var(--od-shadow-xs); }
.info-text { font-weight: 600; color: var(--od-ink); }
.detail-icon { flex-shrink: 0; color: var(--od-primary); }

.rating-report-row { display: flex; align-items: center; justify-content: space-between; }
.rating-section { display: flex; align-items: center; gap: 2px; }
.star { color: #d1d5db; font-size: 1.1rem; }
.star.filled { color: #f59e0b; }
.rating-count { color: var(--od-ink-muted); font-size: .82rem; margin-right: 6px; }
.report-offer-btn {
  display: flex; align-items: center; gap: 4px; background: none; border: none;
  color: var(--od-danger); font-size: .8rem; cursor: pointer; padding: 4px 8px;
}

/* نفس نمط .seller-contact-row في product_detail.css: شبكة ذكية —
   رسالة فقط=عمود واحد / هاتف+رسالة=عمودان / هاتف+واتساب+رسالة=عمودان ثم
   رسالة بعرض كامل */
.provider-contact-row {
  display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 4px;
}
.provider-contact-row.has-phone { grid-template-columns: 1fr 1fr; }
.provider-contact-row.has-phone.has-wa { grid-template-columns: 1fr 1fr; }
.provider-contact-row.has-phone.has-wa .msg-provider-btn { grid-column: 1 / -1; }

.provider-contact-row button {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px 10px; border-radius: 8px;
  font-size: .875rem; font-weight: 600; cursor: pointer;
  transition: background .2s, transform .1s; white-space: nowrap; overflow: hidden;
  border: none;
}
.provider-contact-row button:active { transform: scale(.97); }

/* زر الاتصال — أزرق ممتلئ */
.reveal-phone-btn { background: var(--od-primary); color: #fff; }
.reveal-phone-btn:hover { background: var(--od-primary-dark); }

/* زر واتساب — أخضر ممتلئ */
.whatsapp-btn { background: #25d366; color: #fff; }
.whatsapp-btn:hover { background: #1ebe5d; }

/* زر الرسالة — outline */
.msg-provider-btn { background: #fff; color: var(--od-primary); border: 1.5px solid var(--od-primary) !important; }
.msg-provider-btn:hover { background: #eff6ff; }

/* نفس نمط .availability-section في product_detail.css: بطاقة بخلفية بيضاء
   وحدّ وظل خفيف تحتضن شارة التوفر والشارات الإضافية */
.availability-status-section {
  display: flex; flex-wrap: wrap; align-items: center; gap: .625rem;
  padding: .875rem 1rem; background: #fff; border: 1px solid var(--od-border);
  border-radius: var(--od-radius-xl); box-shadow: var(--od-shadow-xs);
}
/* نفس نمط .availability-badge في product_detail.css: خلفية شبه-شفافة +
   حدّ خفيف بنفس اللون + رمز ::before */
.availability-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: .375rem .875rem; border-radius: var(--od-radius-lg);
  font-size: .8125rem; font-weight: 700;
}
.availability-badge.in-stock {
  background: var(--od-success-light); color: var(--od-success);
  border: 1px solid rgba(5, 150, 105, .2);
}
.availability-badge.in-stock::before { content: '✓'; font-weight: 900; }
.availability-badge.out-of-stock {
  background: var(--od-danger-light); color: var(--od-danger);
  border: 1px solid rgba(220, 38, 38, .2);
}
.availability-badge.out-of-stock::before { content: '✗'; }
.extra-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: .3rem .75rem; background: var(--od-bg-soft); border: 1px solid var(--od-border);
  border-radius: var(--od-radius-lg); font-size: .75rem; font-weight: 600; color: var(--od-ink-muted);
}
.extra-badge.featured-extra { background: #fef3c7; color: #92400e; border-color: #fde68a; padding: 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; }

/* ── provider / schedule cards — نفس نمط .seller-card في product_detail.css ── */
.provider-card, .schedule-card {
  border: 1px solid var(--od-border); border-radius: var(--od-radius-xl); padding: 1.25rem;
  background: #fff; box-shadow: var(--od-shadow-xs);
}

.provider-header { display: flex; align-items: center; gap: 12px; }
.provider-avatar-img, .user-initial-circle {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 2px 8px rgba(37, 99, 235, .3);
}
.provider-avatar-img { border: 2px solid #e9ecef; }
.user-initial-circle {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--od-primary), #3b82f6);
  color: #fff; font-weight: 800; font-size: 1.1rem;
}
.provider-name-row { display: flex; align-items: center; gap: 6px; }
.provider-link { font-weight: 700; color: var(--od-ink); text-decoration: none; font-size: 1rem; }
.provider-link:hover { color: var(--od-primary); }
.verified-badge {
  display: inline-flex; align-items: center; gap: 3px; background: #dbeafe; color: #1d4ed8;
  font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
}

.provider-stats {
  display: flex; justify-content: space-around; gap: 12px;
  border-top: 1px solid var(--od-border); padding-top: 14px; margin-top: 12px;
}
.stat { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; flex: 1; text-align: center; }
.stat-value { display: block; font-weight: 800; font-size: 1.15rem; color: var(--od-ink); line-height: 1.2; }
.stat-value.stat-accent { color: var(--od-primary); }
.stat-label { font-size: .72rem; color: var(--od-ink-muted); margin-top: 2px; font-weight: 500; }
.stat-clickable { cursor: pointer; border-radius: 8px; transition: background .18s ease, transform .15s ease; }
.stat-clickable:hover { background: var(--od-primary-light); transform: translateY(-2px); }
.stat-clickable:hover .stat-label, .stat-clickable:hover .stat-value { color: var(--od-primary); }

.provider-unverified-notice {
  display: flex; gap: 10px; background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 12px; padding: 14px; color: #92400e; font-size: .82rem;
}
.provider-unverified-notice .notice-icon { flex-shrink: 0; }
.provider-unverified-notice p { margin: 4px 0 0; }

.schedule-title { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--od-ink); margin-bottom: 10px; font-size: .92rem; }

.availability-week { display: flex; flex-direction: column; gap: 6px; }
.avail-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .85rem; padding: 6px 0; border-bottom: 1px dashed var(--od-border); flex-wrap: wrap; }
.avail-row:last-child { border-bottom: none; }
.avail-day { font-weight: 600; color: var(--od-ink); }
.avail-time { color: var(--od-ink-muted); }

/* [FEAT-AVAILABILITY-DISPLAY] (2026-08-09): يوم واحد قد يملك أكثر من فترة
   (استراحة بين موعد صباحي ومسائي) — كل فترة شارة مستقلة بدل نص متصل، أوضح
   بصرياً وأقرب لتصميم شرائح النموذج (offer.css .pro-chip) نفسه. */
.avail-time-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.avail-time-chip {
  font-size: .78rem; font-weight: 700; color: var(--od-primary);
  background: var(--od-primary-light); padding: 3px 10px; border-radius: 999px;
  white-space: nowrap;
  /* [FIX-BIDI-TIME-RANGE]: نفس إصلاح .slot-chip في offer_availability_widget.css
     — بلا هذا، "09:00–12:00" داخل سياق RTL يُعرَض معكوساً بصرياً كـ
     "12:00–09:00" رغم أن نص الـ DOM نفسه صحيح تماماً. مُثبَت حياً هنا أيضاً. */
  direction: ltr;
}
.avail-day-range { display: block; font-size: .72rem; font-weight: 500; color: var(--od-ink-muted); margin-top: 2px; }

/* [FEAT-AVAILABILITY-DISPLAY]: تواريخ محددة (بلا تكرار أسبوعي) — قسم فرعي
   مفصول بعنوان صغير وحدّ علوي، حتى لا تختلط بصرياً مع الجدول الأسبوعي
   المتكرر أعلاه رغم ظهورهما في نفس البطاقة. */
.avail-specific-block { margin-top: 10px; padding-top: 10px; border-top: 1.5px solid var(--od-border); }
.avail-specific-block-title { font-size: .78rem; font-weight: 700; color: var(--od-ink-muted); margin-bottom: 6px; }

/* [CLARITY-REWRITE]: كانت .rules-grid شبكة عمودين، كل عنصر مجرد تسمية تقنية
   مقتضبة (label) + رقم (value) بلا أي شرح — واضح للمطوّر، لكن مستخدم عادي
   يقرأ مثلاً "مهلة الإلغاء: 24 ساعة" بلا سياق (24 ساعة قبل ماذا؟ بعد ماذا؟).
   قائمة عمودية الآن: عنوان مطمئن بصياغة سؤال/جملة واضحة + قيمة بارزة، ثم
   جملة توضيح واحدة أسفلها بلغة بسيطة تشرح الأثر الفعلي على المستخدم. */
.rules-list { display: flex; flex-direction: column; gap: 12px; }
.rule-item { padding-bottom: 12px; border-bottom: 1px dashed var(--od-border); }
.rule-item:last-child { border-bottom: none; padding-bottom: 0; }
.rule-item-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rule-label { font-size: .85rem; font-weight: 700; color: var(--od-ink); }
.rule-value {
  font-weight: 800; font-size: .82rem; color: var(--od-primary); white-space: nowrap;
  background: var(--od-primary-light); padding: .2rem .625rem; border-radius: 999px;
}
.rule-explain { margin: .3rem 0 0; font-size: .78rem; line-height: 1.6; color: var(--od-ink-muted); }

.pricing-rules-table { display: flex; flex-direction: column; gap: 8px; }
.pr-row { display: flex; align-items: center; gap: 10px; font-size: .82rem; padding: 6px 0; border-bottom: 1px dashed var(--od-border); }
.pr-row:last-child { border-bottom: none; }
.pr-type { padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: .72rem; }
.pr-type-peak { background: #fee2e2; color: #b91c1c; }
.pr-type-discount { background: #dcfce7; color: #15803d; }
.pr-type-seasonal { background: #ede9fe; color: #6d28d9; }
.pr-type-base { background: #e5e7eb; color: #374151; }
.pr-price { font-weight: 800; color: var(--od-ink); }
.pr-conditions { color: var(--od-ink-muted); margin-right: auto; }

.payment-methods-row { display: flex; flex-wrap: wrap; gap: .5rem; }
/* نفس نمط .payment-option في product_detail.css: شارة خضراء "مقبول" */
.payment-option {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .4rem .875rem; background: var(--od-success-light);
  border: 1px solid rgba(5,150,105,.2); border-radius: var(--od-radius-lg);
  font-size: .8rem; font-weight: 700; color: var(--od-success);
  transition: all var(--od-transition); white-space: nowrap;
}
.payment-option:hover { background: rgba(5,150,105,.14); transform: translateY(-1px); box-shadow: var(--od-shadow-xs); }
.extra-badge.home-service-extra {
  display: inline-flex; align-items: center; gap: 4px;
  background: #dbeafe; color: #1d4ed8; padding: 5px 12px;
  border-radius: 999px; font-size: .8rem; font-weight: 700;
}

.attrs-section-title {
  display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--od-ink);
  margin-bottom: .875rem; padding-bottom: .625rem; border-bottom: 1px solid var(--od-border);
  font-size: .8rem; text-transform: uppercase; letter-spacing: .4px;
}
.attrs-section-title svg { color: var(--od-primary); flex-shrink: 0; }
.custom-attributes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (min-width: 480px) { .custom-attributes-grid { gap: .625rem; } }

/* نفس نمط .attributes-detail-item في product_detail.css: بطاقة بخلفية +
   حدّ + خط تمييز أزرق يظهر عند hover */
.attributes-detail-item {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .7rem .9rem; border-radius: var(--od-radius-lg);
  background: var(--od-bg-soft); border: 1px solid var(--od-border);
  transition: all var(--od-transition); position: relative; overflow: hidden;
}
.attributes-detail-item::before {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 3px;
  background: var(--od-primary); opacity: 0; transition: opacity var(--od-transition);
}
.attributes-detail-item:hover {
  background: #f0f5ff; border-color: #bfdbfe; transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(37,99,235,.08);
}
.attributes-detail-item:hover::before { opacity: 1; }

.detail-label {
  font-size: .7rem; color: var(--od-ink-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px; line-height: 1.2;
}
.detail-value {
  font-weight: 700; font-size: .875rem; color: var(--od-ink);
  display: flex; align-items: center; gap: .375rem; line-height: 1.4; word-break: break-word;
}
.detail-value.monospace { font-family: 'Courier New', Courier, monospace; font-size: .8rem; letter-spacing: .4px; color: var(--od-ink-muted); }

/* نفس نمط .action-buttons/.btn-primary في product_detail.css: تدرّج لوني +
   ظل ملوّن + ارتفاع خفيف عند التحويم */
.action-buttons {
  display: flex; gap: 10px;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--od-border);
  border-radius: var(--od-radius-xl);
  box-shadow: var(--od-shadow-sm);
}
.action-buttons .btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .625rem;
  padding: .9rem 1.25rem; border-radius: var(--od-radius-lg);
  font-weight: 700; font-size: .9375rem; letter-spacing: .2px;
  border: none; cursor: pointer; transition: all var(--od-transition);
}
.book-now-btn {
  background: linear-gradient(135deg, var(--od-primary), #3b82f6);
  color: #fff;
  box-shadow: 0 3px 12px rgba(37, 99, 235, .35);
}
.book-now-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--od-primary-dark), var(--od-primary));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, .45);
}
.book-now-btn:disabled { background: #d1d5db; color: #6b7280; cursor: not-allowed; box-shadow: none; }

/* على الهاتف: نخفي زر الحجز داخل التدفق لصالح الشريط الثابت أسفل الشاشة —
   نفس نمط .action-buttons{display:none} في product_detail.css، يمنع ظهور
   زرَي "احجز الآن" مكرَّرين معاً على الهاتف */
@media (max-width: 900px) { .action-buttons { display: none; } }

/* ── § 3 related offers — بطاقات offer_card.html (offer_card.css) ── */
/* ── sticky mobile bar ───────────────────────────────────── */
.sticky-action-bar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: #fff; border-top: 1px solid var(--od-border); padding: 10px 14px;
  box-shadow: 0 -4px 12px rgba(0,0,0,.08);
}
.sticky-action-bar .btn { width: 100%; padding: 13px; border-radius: 10px; font-weight: 700; }
/* [FIX-DEAD-BOTTOM-GAP] كانت padding-bottom:90px مطلقة على .offer-detail-page
   نفسها — صحيحة فقط يوم كانت .offer-detail-page آخر شيء بالصفحة فعلياً.
   بعد إضافة offers_for_you.html/more_offers.html كمحتوى لاحق (يحجزان
   مسافتهما بأنفسهما عند *نهايتهما* هما)، بقيت هذه القيمة الكبيرة تُطبَّق
   دائماً بلا شرط فتُنتج فراغاً ميتاً (~90-150px) بين "احجز الآن" وبين
   "خدمات قد تهمك" رغم عدم وجود شريط ثابت يحتاج تلك المسافة في تلك النقطة
   من الصفحة أصلاً. مسافة بسيطة (2rem) تكفي كفاصل بصري طبيعي بين الأقسام
   في الحالة الشائعة (يوجد محتوى لاحق)؛ القيمة الكبيرة الحقيقية تبقى محفوظة
   حصراً في .needs-sticky-clearance (مُضافة من offer_detail.html فقط عندما
   لا for_you_offers ولا more_offers — عندها .offer-detail-page فعلاً آخر
   شيء بالصفحة وتحتاج الحجز الكامل). */
@media (max-width: 900px) {
  .sticky-action-bar { display: block; }
  .offer-detail-page { padding-bottom: 2rem; }
  .offer-detail-page.needs-sticky-clearance { padding-bottom: 90px; }
}

/* [FIX-STICKY-BAR-UNDER-BOTTOM-NAV]: أسفل 768px يتحوّل .main-navbar (انظر
   navbar.css) إلى شريط ثابت أسفل الشاشة بارتفاع --nav-height (60px) و
   z-index: 9999 — أعلى بكثير من هذا الشريط (z-index: 40)، فكان زر "احجز
   الآن" يختفي كلياً خلفه. بدل رفع z-index (يجعله يطفو فوق نافبار الموقع
   نفسه)، نرفع الشريط مسافة ارتفاع النافبار فيستقر فوقه مباشرة — نفس التموضع
   البصري في كل تطبيقات الجوّال (زر إجراء ثابت فوق شريط التنقل السفلي). */
@media (max-width: 768px) {
  .sticky-action-bar { bottom: var(--nav-height, 60px); }
  .offer-detail-page.needs-sticky-clearance { padding-bottom: calc(90px + var(--nav-height, 60px)); }
}

/* ── modals — نفس نمط .modal-ovrfrm/.modal-cont في product_detail.css ── */
/* [FIX-MODAL-UNDER-NAVBAR]: كان z-index: 9000 — أقل من .main-navbar
   (z-index: 9999 في navbar.css)، فكان شريط التنقل الثابت (أسفل الشاشة على
   الجوّال) يرسم فوق كل نافذة منبثقة هنا (تسجيل الدخول، الإبلاغ، وخصوصاً
   نافذة الحجز)، فتختفي أجزاء منها — مثل تذييل نافذة الحجز بزرَي التأكيد/
   الإلغاء — خلفه. رفعناه فوق النافبار كي تغطي كل نافذة منبثقة الشاشة كاملة
   فعلاً كما هو متوقع من أي modal. */
.modal-ovrfrm {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-cont { background: #fff; border-radius: var(--od-radius-xl); width: 100%; max-width: 420px; overflow: hidden; box-shadow: var(--od-shadow-lg); }
.msg-modal-cont { max-width: 460px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--od-border); }
.modal-header h3 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 6px; }
.msg-modal-close { background: none; border: none; cursor: pointer; color: var(--od-ink-muted); }
.msg-modal-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.modal-footer { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--od-border); }
.modal-footer button { flex: 1; padding: 10px; border-radius: 10px; border: none; cursor: pointer; font-weight: 700; }
.btn-cancel { background: var(--od-bg-soft); color: var(--od-ink); }
.btn-login, .btn-send-msg, .btn-report-submit { background: var(--od-primary); color: #fff; display: flex; align-items: center; justify-content: center; gap: 6px; }

.contact-confirm-cont { text-align: center; padding: 24px 20px; }
.ccm-icon { font-size: 2rem; }
.ccm-title { margin: 8px 0 2px; }
.ccm-subtitle { color: var(--od-ink-muted); font-size: .85rem; margin: 0 0 10px; }
.ccm-number { font-size: 1.2rem; font-weight: 800; direction: ltr; margin-bottom: 16px; }
.ccm-actions { display: flex; gap: 10px; }
.ccm-actions a, .ccm-actions button { flex: 1; padding: 10px; border-radius: 10px; text-decoration: none; font-weight: 700; border: none; cursor: pointer; }
.ccm-btn-confirm { background: var(--od-primary); color: #fff; }
.ccm-btn-cancel { background: var(--od-bg-soft); color: var(--od-ink); }

.report-form-group { display: flex; flex-direction: column; gap: 6px; }
.report-form-group label { font-size: .82rem; font-weight: 600; }
.report-select, .msg-seller-textarea, .booking-field input, .booking-field textarea {
  border: 1px solid var(--od-border); border-radius: 8px; padding: 9px 10px; font-size: .88rem;
  font-family: inherit; width: 100%; box-sizing: border-box;
  background: #fff; color: var(--od-ink); outline: none;
  transition: border-color var(--od-transition), box-shadow var(--od-transition);
}
.report-select:focus, .msg-seller-textarea:focus, .booking-field input:focus, .booking-field textarea:focus {
  border-color: var(--od-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--od-primary) 15%, transparent);
}
.report-char-hint, .msg-char-counter { font-size: .72rem; color: var(--od-ink-muted); text-align: left; }
.msg-seller-error { color: var(--od-danger); font-size: .82rem; }
.report-success-state { text-align: center; padding: 30px 20px; }
.report-success-icon { font-size: 2rem; }
.report-success-title { font-weight: 800; margin-top: 8px; }
.report-success-sub { color: var(--od-ink-muted); font-size: .85rem; }

.booking-field { display: flex; flex-direction: column; gap: 6px; }
.booking-field label { font-size: .82rem; font-weight: 600; }
.booking-field .opt { color: var(--od-ink-muted); font-weight: 400; }
.booking-field .field-hint { font-size: .72rem; color: var(--od-ink-muted); }
.booking-success-box { background: #dcfce7; color: #15803d; padding: 10px 12px; border-radius: 8px; font-size: .85rem; }

/* [FEAT-BOOKING-CONFIRM-STEP]: بطاقة ملخّص الحجز داخل #booking-confirm-modal —
   صفوف تناوب خلفية بسيطة (زوجي/فردي) لسهولة القراءة، بلا أي تخصيص جديد
   ثقيل — تستخدم نفس متغيّرات الألوان (--od-*) المستخدمة في كل الصفحة. */
.bkc-intro { font-size: .85rem; color: var(--od-ink-muted); margin: 0 0 2px; }
.bkc-summary { display: flex; flex-direction: column; border: 1px solid var(--od-border); border-radius: 12px; overflow: hidden; }
.bkc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: #fff; }
.bkc-row:nth-child(even) { background: var(--od-bg-soft); }
.bkc-label { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--od-ink-muted); font-weight: 600; flex-shrink: 0; }
.bkc-value { font-size: .88rem; font-weight: 700; color: var(--od-ink); text-align: left; word-break: break-word; }

/* [FEAT-SLOT-BOOKING]: شبكة الفواصل الزمنية المتاحة */
.slots-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px; max-height: 220px; overflow-y: auto; padding: 2px;
}
.slots-hint { grid-column: 1 / -1; color: var(--od-ink-muted); font-size: .85rem; text-align: center; padding: 14px 6px; }

/* [POLICY-ZKLIK-ONLY-BOOKING]: شبكة طريقة/طرق الدفع الإجبارية — نفس أصناف
   .slot-chip/.slot-chip--selected الحقيقية (JS يُضيفها مباشرة)، فقط تخطيط
   حاوية جديد (تدفّق أفقي بسيط، لا شبكة تمرير — عدد الطرق دوماً صغير جداً). */
.payment-methods-grid { display: flex; flex-wrap: wrap; gap: 8px; }

/* [FEAT-SMART-NO-SLOTS]: بدل رسالة تقنية جافة ("لا توجد فواصل متاحة —
   جرّب تاريخاً آخر") حين لا يوجد توفر في اليوم المختار، نبحث تلقائياً عن
   أقرب موعدين متاحين (offer_detail.js: searchNextAvailableDates) ونعرضهما
   كبطاقات جاهزة للنقر — يوفّر على المستخدم عناء تجربة تواريخ عشوائياً. */
.slots-empty { grid-column: 1 / -1; text-align: center; padding: 10px 6px 4px; }
.slots-empty-icon { font-size: 1.6rem; line-height: 1; margin-bottom: 6px; }
.slots-empty-title { font-weight: 700; font-size: .9rem; color: var(--od-ink); }
.slots-empty-sub { font-size: .8rem; color: var(--od-ink-muted); margin-top: 3px; }
.slots-suggestions {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; margin-top: 12px;
}
.suggested-date-chip {
  display: flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--od-primary); border-radius: 999px; background: var(--od-primary-light);
  color: var(--od-primary); font-family: inherit; font-weight: 700; font-size: .82rem;
  padding: 8px 16px; cursor: pointer; transition: all var(--od-transition);
}
.suggested-date-chip:hover { background: var(--od-primary); color: #fff; transform: translateY(-1px); }
.suggested-date-chip::before { content: '📅'; font-size: .8rem; }
.slot-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1.5px solid var(--od-border); border-radius: 10px; background: #fff; cursor: pointer;
  padding: 8px 4px; font-family: inherit; transition: all var(--od-transition);
}
.slot-chip:hover:not(:disabled) { border-color: var(--od-primary); background: color-mix(in srgb, var(--od-primary) 6%, #fff); }
.slot-chip-time { font-weight: 700; font-size: .85rem; color: var(--od-ink); }
.slot-chip-price { font-size: .72rem; color: var(--od-ink-muted); }
.slot-chip--selected { border-color: var(--od-primary); background: var(--od-primary); box-shadow: var(--od-shadow-sm); }
.slot-chip--selected .slot-chip-time, .slot-chip--selected .slot-chip-price { color: #fff; }
.slot-chip--full { opacity: .45; cursor: not-allowed; background: var(--od-bg-soft); }
.slot-chip--full .slot-chip-time { text-decoration: line-through; }

.modal-footer button:disabled { opacity: .55; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════
   [BOOKING-MODAL-REDESIGN] كل ما يلي مُقيَّد بـ #booking-modal حصراً —
   نفس الأصناف المشتركة (.modal-cont/.modal-header/.modal-footer/
   .btn-cancel/.btn-send-msg/.booking-field...) تبقى بلا أي تغيير لبقية
   النوافذ المنبثقة في الصفحة (تأكيد التواصل/الإبلاغ/مراسلة البائع) — كل
   تخصيص هنا يُستهدَف عبر معرّف #booking-modal الفريد فقط، لا الأصناف نفسها.
   ══════════════════════════════════════════════════════════════ */

#booking-modal.modal-ovrfrm { background: rgba(15, 23, 42, .55); backdrop-filter: blur(6px); }

@keyframes bkModalIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

#booking-modal .bk-cont {
  max-width: 480px;
  border-radius: var(--od-radius-2xl);
  box-shadow: 0 24px 60px rgba(15,23,42,.22), 0 8px 20px rgba(15,23,42,.08);
  animation: bkModalIn .28s cubic-bezier(.16,1,.3,1);
  max-height: min(680px, 92vh);
  display: flex;
  flex-direction: column;
}

/* ── الرأس ── */
#booking-modal .bk-header {
  background: linear-gradient(135deg, color-mix(in srgb, var(--od-primary) 8%, #fff), #fff 60%);
  padding: 18px 20px;
  flex-shrink: 0;
}
#booking-modal .bk-header-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
#booking-modal .bk-header-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--od-primary), var(--od-primary-dark));
  color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--od-primary) 35%, transparent);
}
#booking-modal .bk-header-text { min-width: 0; }
#booking-modal .bk-header-text h3 {
  margin: 0; font-size: 1.02rem; font-weight: 800; color: var(--od-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#booking-modal .bk-header-sub {
  margin: 2px 0 0; font-size: .78rem; color: var(--od-ink-muted); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#booking-modal .bk-close {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; transition: background var(--od-transition), color var(--od-transition);
}
#booking-modal .bk-close:hover { background: var(--od-bg-soft); color: var(--od-ink); }

/* ── الجسم (قابل للتمرير لو المحتوى طويل — الرأس/التذييل ثابتان) ── */
#booking-modal .bk-body { padding: 18px 20px; gap: 16px; overflow-y: auto; }

#booking-modal .bk-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { #booking-modal .bk-row-2 { grid-template-columns: 1fr; } }

#booking-modal .booking-field label {
  display: flex; align-items: center; gap: 6px; color: var(--od-ink); font-size: .8rem;
}
#booking-modal .booking-field input,
#booking-modal .booking-field textarea {
  padding: 11px 13px; border-radius: 10px; border-color: var(--od-border);
  background: var(--od-bg-soft);
}
#booking-modal .booking-field input:focus,
#booking-modal .booking-field textarea:focus { background: #fff; }

/* ── [FEAT-MONTH-CALENDAR]: تقويم شهري مخصَّص بديل منتقي المتصفح ── */
.bk-calendar {
  background: var(--od-bg-soft); border: 1px solid var(--od-border);
  border-radius: 14px; padding: 12px;
}
.bk-cal-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.bk-cal-month-label { font-weight: 800; font-size: .92rem; color: var(--od-ink); }
.bk-cal-nav {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--od-border);
  background: #fff; color: var(--od-ink); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--od-transition);
}
.bk-cal-nav:hover:not(:disabled) { background: var(--od-primary-light); border-color: var(--od-primary); color: var(--od-primary); }
.bk-cal-nav:disabled { opacity: .35; cursor: not-allowed; }

.bk-cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
  font-size: .68rem; font-weight: 700; color: var(--od-ink-muted); margin-bottom: 4px;
}
.bk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bk-cal-loading {
  grid-column: 1 / -1; text-align: center; padding: 20px 6px; color: var(--od-ink-muted); font-size: .82rem;
}

.bk-cal-day {
  aspect-ratio: 1; border: none; border-radius: 9px; font-family: inherit; font-weight: 700;
  font-size: .8rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--od-ink); border: 1.5px solid transparent; transition: all var(--od-transition);
}
.bk-cal-day--empty { visibility: hidden; cursor: default; }
.bk-cal-day--today { border-color: var(--od-primary); }
.bk-cal-day--selected {
  background: var(--od-primary) !important; color: #fff !important; border-color: var(--od-primary) !important;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--od-primary) 40%, transparent);
}

/* ألوان مستوى التوفر — أخضر: متاح بالكامل، أصفر: توفر جيد، برتقالي: قليل،
   أحمر: لا يوجد إطلاقاً (مغلق/خارج حدود الإشعار)، رمادي: يوم فائت */
.bk-cal-day--available { background: #dcfce7; color: #15803d; }
.bk-cal-day--available:hover { background: #bbf7d0; }
.bk-cal-day--good { background: #fef9c3; color: #a16207; }
.bk-cal-day--good:hover { background: #fef08a; }
.bk-cal-day--limited { background: #ffedd5; color: #c2410c; }
.bk-cal-day--limited:hover { background: #fed7aa; }
/* [FEAT-SMART-NO-SLOTS]: قابل للنقر عمداً (لا cursor:not-allowed) — الضغط
   عليه يُشغّل اقتراح أقرب موعدين متاحين بدل تركه ميتاً بلا أي إفادة. */
.bk-cal-day--unavailable { background: #fee2e2; color: #b91c1c; }
.bk-cal-day--unavailable:hover { background: #fecaca; }
.bk-cal-day--past { background: transparent; color: var(--od-ink-muted); opacity: .4; cursor: not-allowed; }

.bk-cal-legend {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--od-border);
}
.bk-cal-legend-item {
  display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; color: var(--od-ink-muted); font-weight: 600;
}
.bk-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.bk-dot--available { background: #22c55e; }
.bk-dot--good { background: #eab308; }
.bk-dot--limited { background: #f97316; }
.bk-dot--unavailable { background: #ef4444; }

/* ── شبكة الفواصل الزمنية ── */
#booking-modal .slots-grid {
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 9px; max-height: 232px; padding: 4px 2px;
}
#booking-modal .slots-grid::-webkit-scrollbar { width: 6px; }
#booking-modal .slots-grid::-webkit-scrollbar-thumb { background: var(--od-border-strong); border-radius: 999px; }

#booking-modal .slots-hint {
  padding: 22px 10px; background: var(--od-bg-soft); border-radius: 12px;
  font-weight: 600;
}

#booking-modal .slot-chip {
  position: relative; border-radius: 12px; border-width: 1.5px; padding: 10px 6px 9px;
  gap: 3px; transition: transform .15s ease, border-color var(--od-transition),
  background var(--od-transition), box-shadow var(--od-transition);
}
#booking-modal .slot-chip:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--od-primary) 18%, transparent);
}
#booking-modal .slot-chip-time { font-size: .88rem; }
#booking-modal .slot-chip-price {
  background: var(--od-surface-2); border-radius: 999px; padding: 1px 8px; margin-top: 1px;
}
#booking-modal .slot-chip--selected {
  background: linear-gradient(135deg, var(--od-primary), var(--od-primary-dark));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--od-primary) 40%, transparent);
  transform: translateY(-1px);
}
#booking-modal .slot-chip--selected .slot-chip-price { background: rgba(255,255,255,.2); }
#booking-modal .slot-chip--selected::after {
  content: '✓'; position: absolute; top: -6px; left: -6px; width: 18px; height: 18px;
  background: #fff; color: var(--od-primary); border-radius: 50%; font-size: .68rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--od-shadow-sm);
}
#booking-modal .slot-chip--full { background: var(--od-bg-soft); }
#booking-modal .slot-chip--full::after {
  content: 'ممتلئ'; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: .66rem; font-weight: 700; color: var(--od-ink-muted);
  background: color-mix(in srgb, #fff 82%, transparent); border-radius: 10px;
}

/* ── التذييل ── */
#booking-modal .bk-footer { padding: 16px 20px; flex-shrink: 0; }
#booking-modal .bk-cancel-btn, #booking-modal .bk-submit-btn {
  padding: 12px; border-radius: 12px; font-size: .88rem;
  transition: transform .15s ease, box-shadow var(--od-transition), opacity var(--od-transition);
}
#booking-modal .bk-cancel-btn {
  background: #fff; border: 1.5px solid var(--od-border) !important; color: var(--od-ink-muted);
}
#booking-modal .bk-cancel-btn:hover { border-color: var(--od-border-strong) !important; color: var(--od-ink); }
#booking-modal .bk-submit-btn {
  background: linear-gradient(135deg, var(--od-primary), var(--od-primary-dark));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--od-primary) 35%, transparent);
}
#booking-modal .bk-submit-btn:hover:not(:disabled) { transform: translateY(-1px); }
#booking-modal .bk-submit-btn:disabled { box-shadow: none; }

/* ── جوّال: نافذة تنزلق من الأسفل (bottom sheet) — أكثر راحة باللمس ── */
@media (max-width: 560px) {
  #booking-modal.modal-ovrfrm { align-items: flex-end; padding: 0; }
  #booking-modal .bk-cont {
    max-width: 100%; width: 100%; border-radius: var(--od-radius-2xl) var(--od-radius-2xl) 0 0;
    max-height: 88vh; animation: bkSheetIn .3s cubic-bezier(.16,1,.3,1);
  }
}
@keyframes bkSheetIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.image-modal {
  /* [FIX-MODAL-UNDER-NAVBAR]: نفس منطق .modal-ovrfrm أعلاه — كان z-index: 2000
     أقل من .main-navbar (9999) فيظهر شريط التنقل السفلي فوق الصورة المكبّرة. */
  position: fixed; inset: 0; z-index: 10000; display: none;
  align-items: center; justify-content: center; padding: 1rem;
}
.image-modal.show { display: flex; }
.image-modal .modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.92); backdrop-filter: blur(8px); }
.image-modal .modal-content { position: relative; max-width: 90vw; max-height: 90vh; z-index: 1; }
.image-modal img { max-width: 100%; max-height: 90vh; border-radius: 8px; }
.image-modal .modal-close { position: absolute; top: -40px; left: 0; background: none; border: none; color: #fff; cursor: pointer; }