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

/* [FIX-BOX-SIZING] أُضيف هنا صراحةً بدل الاعتماد على قاعدة `* { box-sizing:
   border-box }` العامة في product_card.css. الملفان يُحمَّلان معاً فقط في
   الصفحات المختلطة (مثل core/index.html)؛ في الصفحات التي تعرض بطاقات
   الخدمة وحدها (offers_for_you.html، قسم "خدمات مميزة"، صفحة المتجر بلا
   منتجات) لم تكن هذه القاعدة موجودة إطلاقاً، فكان padding البطاقة (1rem)
   يُضاف فوق height:100% تحت content-box الافتراضي ويُخرج البطاقة عن حدود
   خليتها في الشبكة. النطاق هنا بادئة الصنف فقط (لا `*` عام) لتفادي أي
   تعارض مع صفحات أخرى لا تتوقع box-sizing عام جديد. */
.offer-card-link,
.offer-card-link *,
.offer-card-link *::before,
.offer-card-link *::after {
  box-sizing: border-box;
}

.offer-card-link {
  --oc-primary: #0f766e;
  --oc-primary-dark: #0b5c56;
  --oc-border: #e5e7eb;
  --oc-bg-soft: #f8fafc;
  --oc-ink: #111827;
  --oc-ink-muted: #6b7280;
  text-decoration: none;
  color: inherit;
  display: block;
  /* [FIX-CARD-LINK-PARITY] width/position لم تكونا موجودتين هنا رغم أن
     .product-card-link (النظير في المنتجات) يُعرِّفهما — تطابق كامل الآن،
     بلا أي تأثير فعلي مُلاحَظ (block أصلاً يملأ العرض) لكن يمنع أي فارق
     صامت بين القالبين مستقبلاً. */
  width: 100%;
  position: relative;
}

/* نفس نمط .product-card في product_card.css بالحرف الآن: بلا حدّ/ظل عند
   السكون، الظل والارتفاع فقط عند التحويم */
.offer-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: none;
  box-shadow: none;
  border-radius: 12px;
  padding: 1rem;
  transition: transform .2s ease, box-shadow .2s ease;
  /* [FIX-GRID-COLUMN-SKEW] السبب الجذري الحقيقي للمشكلة — كان مفقوداً هنا
     رغم وجوده حرفياً في .product-card. .offer-card-link هو عنصر الشبكة
     الفعلي داخل .product-grid (repeat(2, 1fr))؛ بلا min-width:0 صريح في
     مكان ما بالعمق، فإن "الحد الأدنى التلقائي" (min-width:auto الافتراضي)
     لعنصر الشبكة يتوارث من محتوى .offer-card غير القابل للكسر (سعر/عنوان/
     وصف طويل بلا مسافات) ليصبح أوسع من حصّته العادلة (1fr) — وبما أن
     عمود الشبكة واحد عبر كل الصفوف، فإن هذا الاتساع يسرق مساحة من عمود
     المنتج المجاور في كل صف آخر أيضاً (وليس فقط صف هذه الخدمة) — بالضبط
     ما ظهر في القياس الحي: عمودان بعرض 151px/205px بدل تساوٍ تام. إضافة
     min-width:0 هنا (على حاوية flex نفسها) توقف هذا التوريث تماماً —
     يتقاسم العمودان المساحة بالتساوي دائماً، أياً كان طول نص الخدمة. */
  min-width: 0;
  /* [FIX-HEIGHT-STRETCH] هذا هو السبب الجذري للمشكلة المُبلَّغ عنها —
     height:100% + overflow:hidden (أُزيلا كلاهما) كانا يجبران البطاقة على
     التمدد لملء ارتفاع صف الشبكة كاملاً (وهو غالباً محكوم بأطول عنصر
     مجاور — منتج أو خدمة أخرى بصورة/نص أطول)، ثم overflow:hidden كان
     يقصّ أي محتوى لا يتّسع ضمن ذلك الارتفاع المفروض — بالضبط "الضغط على
     المنتجات" المُبلَّغ عنه. .product-card لا يفرض ارتفاعاً إطلاقاً ولا
     يقصّ شيئاً — يتدفّق بارتفاعه الطبيعي فقط داخل خلية الشبكة (التي تتمدّد
     حوله تلقائياً عبر align-items:stretch الافتراضي في CSS Grid على
     .offer-card-link/.product-card-link الأب، بلا أي أثر على المحتوى
     الداخلي) — نفس السلوك الآن بالحرف في كلا القالبين. */
}
.offer-card:hover, .offer-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,.1);
}

/* ── الصورة — نفس نمط .product-image بالحرف: بلا نسبة عرض/ارتفاع مفروضة،
   فقط سقف ارتفاع + contain (المنتج لا يفرض aspect-ratio إطلاقاً) ── */
.offer-image {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  display: block;
  border-radius: 10px;
  margin-bottom: 10px;
  background: var(--oc-bg-soft);
}
.offer-image--empty {
  /* [FIX-EMPTY-IMAGE-HEIGHT] كانت 140px بينما الصور الحقيقية تحجز حتى
     200px (max-height) — فارق ثابت 60px بين خدمة بصورة وأخرى بلا صورة،
     يزيد التباين الطبيعي في ارتفاع البطاقات داخل نفس الصف. 200px الآن
     تطابق سقف الصور الحقيقية تماماً (يوازي اعتماد المنتج على
     default_product.jpg بنفس الأبعاد لكل الحالات). */
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.offer-image--empty .no-image { color: var(--oc-ink-muted); font-size: .82rem; }

/* ── بادجات الزاوية العلوية — نفس نمط .card-badges-right بالحرف: صف أفقي،
   بلا خلفية/ظل مضافين على أيقونة التوثيق (الأيقونة نفسها تحمل دائرتها) ── */
.card-badges-right {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.card-badges-right > div { color: var(--oc-primary); display: flex; }
.offer-boost-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.offer-boost-badge--featured { background: #fef3c7; color: #92400e; }

/* ── العنوان والوصف — بلا حشو أفقي إضافي (البطاقة نفسها محشوّة الآن) ── */
.offer-title-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 5px 0;
}
/* [FIX-TITLE-COLLISION] نُطاق .offer-card .offer-title بدل .offer-title
   المطلق — offer_detail.html يستخدم نفس الاسم بالحرف لعنوان الخدمة
   الرئيسي (h1، 1.5rem/800 في offer_detail.css)؛ bare selector هنا كان
   يكسره إلى 1rem/bold بمجرد وجود أي كارت على نفس الصفحة (نفس تصادم
   .product-title في المنتجات بالضبط). القيم نفسها بالحرف — فقط أُضيف
   النطاق. نفس نمط .product-title بالحرف: يسمح بالالتفاف لسطرين بدل قصّ سطر واحد */
.offer-card .offer-title {
  font-size: 1rem;
  font-weight: bold;
  color: var(--oc-ink);
  margin: 0;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: 1;
  min-width: 0;
  /* [FIX-GRID-COLUMN-SKEW-2] السبب الحقيقي الكامل للمشكلة (min-width:0
     وحده لم يكن كافياً كما اتّضح بالقياس الحي) — عنوان بلا أي مسافة
     (كلمة واحدة غريبة في بيانات الاختبار، أو اسم خدمة حقيقي طويل بلا
     فراغات) لا يملك أي نقطة كسر سطر صالحة؛ min-width:0 يسمح للصندوق
     بالانكماش نظرياً لكن المتصفح ما زال عاجزاً عن اختراع نقطة كسر داخل
     كلمة واحدة بلا overflow-wrap. والنتيجة: هذا العرض الكامل غير القابل
     للكسر يصبح "الحد الأدنى" الفعلي لعمود الشبكة بأكمله (لأن عمود
     الشبكة واحد عبر كل الصفوف العشرة) — فتُسحب كل البطاقات في ذلك العمود
     (منتجات وخدمات معاً) لتتمدد بنفس القدر، بالضبط الفارق الثابت 46px
     المُقاس حياً بين العمودين بصرف النظر عن طول كل عنوان على حدة. */
  overflow-wrap: break-word;
  word-break: break-word;
}
.offer-badge-icon--star { color: #f59e0b; flex-shrink: 0; }
.offer-badge-icon--fire { color: #ef4444; flex-shrink: 0; }

/* [FIX-DESC-COLLISION] نُطاق .offer-card .offer-description بدل المطلق —
   offer_detail.html يستخدم نفس الاسم لوصف الخدمة الرئيسي؛ white-space:nowrap
   هنا كان يضغط وصف الخدمة كاملاً في سطر واحد مقصوص على صفحة التفاصيل.
   نفس حجم/لون .product-description بالحرف (كان أصغر بكثير من نظيره) */
.offer-card .offer-description {
  font-size: .9375rem;
  color: var(--oc-ink-muted);
  line-height: 1.6;
  margin: 5px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* [FIX-GRID-COLUMN-SKEW-2] نفس سبب .offer-title أعلاه — الوصف مقصوص
     خادمياً لـ 20 حرفاً (truncatechars:20) لكن يبقى قابلاً لأن يكون كلمة
     واحدة عربية بلا مسافات، فيفرض حتى 20 حرفاً غير قابلة للكسر كحدّ أدنى
     على عمود الشبكة بأكمله. */
  overflow-wrap: break-word;
  word-break: break-word;
}
/* ── شريط المعلومات الديناميكي — نفس نمط .dynamic-info-bar: صندوق رمادي
   واحد، والفرق بين الأنواع بلون النص فقط (بلا شارات ملونة منفصلة) ── */
.dynamic-info-bar {
  transition: opacity .4s ease;
  margin: 8px 0;
  padding: 6px 8px;
  background-color: #f8fafc;
  border-radius: 6px;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1.5;
  overflow: hidden;
}
.dynamic-info-bar:empty,
.dynamic-info-bar.hidden { display: none; }
.current-info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  transition: transform .3s ease, opacity .3s ease;
}
.current-info[data-type="store"]    { color: #0f766e; }
.current-info[data-type="verified"] { color: #7C3AED; }
.current-info[data-type="rating"]   { color: #F59E0B; }
.current-info[data-type="wilaya"]   { color: #0EA5E9; }
.current-info[data-type="views"]    { color: #4B5563; }
.current-info[data-type="bookable"] { color: #10B981; }

/* ── السعر وزر الحجز ─────────────────────────────────────── */
/* [FIX-PRICE-COLLISION] نُطاق .offer-card .price-section/.price-unit بدل
   المطلق — offer_detail.html يستخدم نفس الاسمين بالحرف لصندوق السعر
   الرئيسي (تدرّج لوني مؤطَّر، مطابق لـ product_detail.css) ووحدة السعر؛
   bare selectors هنا كانت تُفرِغ padding/gap الصندوق الأصلي وتُصغّر وحدة
   السعر (.76rem بدل 1rem) بمجرد وجود أي كارت على نفس الصفحة. */
.offer-card .price-section {
  /* [FIX-HEIGHT-STRETCH] margin-top:auto كانت تدفع صندوق السعر إلى أسفل
     البطاقة اعتماداً على height:100% أعلاه (المُزال الآن) — بلا ذلك
     الارتفاع المفروض لم يعد لها أي مساحة فائضة تدفع ضمنها، فتتحوّل عملياً
     إلى لا شيء لكنها تبقى وهماً مضلِّلاً في القراءة. أُزيلت لمطابقة تدفّق
     .product-card .price-section الطبيعي بالحرف (يتبع الوصف مباشرةً). */
  /* [FIX-PRICE-BOX-BLEED] نفس خلل [FIX-PRICE-BOX-BLEED] المُكتشَف حياً في
     product_card.css بالحرف — offer_detail.css يُعرِّف .price-section
     مطلقة (بلا نطاق) بخلفية متدرّجة زرقاء/خضراء + إطار + padding كامل
     الجهات (السطر 181 هناك)، وهذه القاعدة المُنطَّقة هنا لم تكن تُعرِّف
     background/border إطلاقاً، وpadding-top فقط (لا padding الجهات
     الثلاث الأخرى) — فتتسرَّب الخلفية والإطار وpadding اليمين/اليسار/
     الأسفل بلا معارضة فوق بطاقات الخدمة المُعاد استخدامها في نفس الصفحة
     (more_offers.html). تحييد صريح كامل هنا يضمن نفس المظهر البسيط الذي
     يظهر في الصفحة الرئيسية، أياً كانت الصفحة. */
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0 0;
}
/* [FIX-GRID-COLUMN-SKEW] تحقّق حيّ (اختبار A/B/C مباشر عبر Playwright)
   أثبت أن محاولة overflow:hidden+text-overflow:ellipsis+white-space:nowrap
   (المحاولة الأولى هنا) لا تعمل إطلاقاً لهذا الغرض تحديداً: nowrap يُبطل
   overflow-wrap تماماً (لا نقطة كسر، الحد الأدنى = العرض الكامل، 94px
   بدل 9px بالاختبار)، وoverflow:hidden/ellipsis يعملان فقط أثناء
   التموضع النهائي لـ flex الداخلي — لا أثناء استعلام "الحد الأدنى" الذي
   تطرحه شبكة .product-grid البعيدة (وهذا بالضبط ما ثبت حياً: سعر بيانات
   اختبارية فاسدة مثل "85689688.0 دج" ظلّ يفرض ~102px إضافية على عمود
   الشبكة بأكمله رغم كل تلك القواعد). الحل الفعلي المُتحقَّق منه حياً:
   white-space:normal + overflow-wrap تسمحان لرقم غير واقعي الطول
   بالانتقال لسطر ثانٍ عند الحاجة القصوى فقط بدل تسميم عمود الشبكة —
   سعر حقيقي عادي لن يقترب أبداً من هذا الحدّ فيبقى بصرياً في سطر واحد. */
.new-price {
  font-weight: bold;
  font-size: 1.3rem;
  color: var(--oc-ink);
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}
.offer-card .price-unit {
  font-size: .76rem;
  color: var(--oc-ink-muted);
  font-weight: 600;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

.book-now-card-btn {
  margin-right: auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--oc-primary);
  background: #fff;
  color: var(--oc-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
}
.book-now-card-btn:hover:not(:disabled) { background: var(--oc-primary); color: #fff; }
.book-now-card-btn:disabled {
  border-color: var(--oc-border);
  color: var(--oc-ink-muted);
  cursor: not-allowed;
}

/* ── الشبكة (لاستخدامها من الصفحات المستدعية) ────────────── */
.offer-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
@media (max-width: 767px) {
  .offer-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .offer-cards-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .offer-cards-grid { grid-template-columns: repeat(4, 1fr); }
}

/* [FIX-STICKY-BAR-OVERLAP] نظير [FIX-STICKY-BAR-OVERLAP] في
   more_products.css بالحرف — more_offers.html هو آخر عنصر في
   offer_detail.html (بعد إغلاق .offer-detail-page)، فآخر صف بطاقات كان
   يختفي فعلياً تحت شريط "احجز الآن" الثابت (.sticky-action-bar) على
   الهاتف. نفس القيمتين بالحرف من offer_detail.css (السطر 476/486 هناك:
   90px بين 768-900px، ثم + var(--nav-height) تحت 768px حيث يتحوّل
   النافبار نفسه لشريط سفلي ثابت أيضاً) — مُطبَّقتان هنا حصراً عبر
   .zk-more-offers-grid (لا تُغيّر شيئاً في offer-cards-grid وحدها، فتبقى
   "خدمات مميزة" بالرئيسية وoffers_for_you.html بلا أي فراغ إضافي). */
@media (max-width: 900px) {
  .zk-more-offers-grid { padding-bottom: 90px; }
}
@media (max-width: 768px) {
  .zk-more-offers-grid { padding-bottom: calc(90px + var(--nav-height, 60px)); }
}

/* نفس نمط الاستجابة على الهاتف في product_card.css بالحرف */
/* [FIX-TITLE/DESC/PRICE-COLLISION] نفس النطاق المُضاف أعلاه على مقاسات
   الهاتف تحديداً — بلا هذا النطاق كانت هذه القواعد تُصغِّر عنوان/وصف/صندوق
   سعر الخدمة الرئيسي في offer_detail.html على الهاتف أيضاً. */
@media (max-width: 767px) {
  .offer-card { padding: .5rem; }
  .offer-card .offer-title { font-size: .75rem; }
  .offer-card .offer-description { font-size: .7rem; }
  .offer-card .price-section { font-size: 1rem; gap: 3px; }
  .new-price { font-size: 1rem; }
}