/* ============================================================
   product_card.css
   إصلاحات هذه النسخة:
   [1] product-card: أُضيف background-color صريح (var(--color-surface, #fff))
       لمنع الشفافية غير المقصودة في بعض الثيمات.
   [2] font-size على الهاتف: 0.5rem → 0.75rem (12px بدلاً من 8px).
   [3] notification-toast: حُذفت animation fadeOut من CSS —
       الإخفاء يتحكم به JS بـ clearTimeout لتفادي التعارض.
   [4] quick-select-sheet: حُذف الـ block الميت نهائياً.
   [5] @keyframes spin: أُضيف لزر التحميل في JS.
   ============================================================ */

/* شريط المعلومات الديناميكي */
.dynamic-info-bar {
    transition: opacity 0.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;
}

.dynamic-info-bar:not(:empty) {
    opacity: 1;
}
.dynamic-info-bar:empty {
    opacity: 0;
    height: 0;
    padding: 0;
}

/* أيقونة داخل النص */
.inline-icon-smaller {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin-right: 4px !important;
    flex-shrink: 0 !important;
    width: 14px !important;
    height: 14px !important;
}

.inline-icon-smaller svg {
    display: block !important;
    height: 14px !important;
    width: 14px !important;
    margin: 0 !important;
}

.current-info {
    display: inline-flex;
    align-items: center !important;
    gap: 4px;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* تحسين محاذاة العناصر داخل badge-item */
.badge-item {
    display: inline-flex !important;
    align-items: center !important;
    align-content: center !important;
    vertical-align: middle !important;
    gap: 4px !important;
}

.badge-item .text {
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ألوان حسب نوع الرسالة */
.current-info[data-type="free"] {
    color: #10B981;
}
.current-info[data-type="verified"] {
    color: #7C3AED;
}
.current-info[data-type="views"] {
    color: #4B5563;
}
.current-info[data-type="delivery"] {
    color: #3B82F6;
}
.current-info[data-type="rating"] {
    color: #F59E0B;
}
.current-info[data-type="countdown"] {
    color: #EF4444;
}
.current-info[data-type="wilaya"] {
    color: #0EA5E9;
}

/* --- بقية CSS --- */
/* إخفاء شريط التمرير في جميع المتصفحات */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
}

/* ---------- القاعدة العامة ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ---------- حاوية المنتجات ---------- */
.products-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------- رابط البطاقة ---------- */
.product-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
  position: relative;
}

/* ---------- قالب المنتج ---------- */
.product-card {
  /* إصلاح [1]: background صريح لمنع الشفافية غير المقصودة */
  background-color: var(--color-surface, #ffffff);
  border-radius: 12px;
  box-shadow: none;
  border: none;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-width: 0;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.product-card:hover,
.product-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* ---------- صورة المنتج ---------- */
.product-image {
  width: 100%;
  border-radius: 10px;
  object-fit: contain;
  max-height: 200px;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}

/* ---------- الشارات (Badges) ---------- */
.badge {
  background: var(--badge-bg);
  color: var(--badge-text);
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.8;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: inline-block;
  margin-bottom: 0.6rem;
  position: relative;
  z-index: 2;
}

.product-card:hover .badge {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- عنوان المنتج ---------- */
/* [FIX-TITLE-COLLISION] نُطاق .product-card .product-title بدل .product-title
   المطلق: كان bare selector يكسر h1.product-title في product_detail.html
   (حجم/سمك/محاذاة عنوان المنتج الرئيسي بالكامل) بمجرد أن يُضمَّن أي كارت
   على نفس الصفحة — القيم نفسها بالحرف، فقط أُضيف النطاق. */
.product-card .product-title {
  font-size: 1rem;
  font-weight: bold;
  margin: 5px 0;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  position: relative;
  z-index: 2;
  color: var(--color-text);
  /* [FIX-GRID-COLUMN-SKEW] نفس الخلل المكتشف حياً في offer_card.css —
     عنوان بلا مسافات (اسم منتج كلمة واحدة، شائع في بيانات الاختبار
     الحالية) لا يملك أي نقطة كسر سطر صالحة، فيفرض عرضه الكامل غير
     القابل للكسر كحدّ أدنى على عمود شبكة .product-grid بأكمله (يُسحب كل
     صف في ذلك العمود ليتمدد بنفس القدر، منتجات وخدمات معاً). لم تكن
     .product-description تعاني من هذا (لديها overflow-wrap أصلاً أدناه)
     لكن .product-title كانت المصدر المتبقي. */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ---------- وصف مختصر ---------- */
/* [FIX-DESC-COLLISION] نفس سبب [FIX-TITLE-COLLISION] أعلاه بالضبط —
   .product-description bare كانت تكسر وصف المنتج الرئيسي في
   product_detail.html. */
.product-card .product-description {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    hyphens: auto;
}

/* [FIX-DEAD-COLLISION] هذه القواعد الأربع (desc-short/desc-full/
   title-badges-row/product-header) لا تُطابق أي عنصر في product_card.html
   الحالي إطلاقاً (بقايا تصميم قديم) — لكنها كانت bare وتُطابق مباشرةً
   عناصر حقيقية بنفس الاسم في product_detail.html (وصف المنتج القابل
   للتوسيع + رأس عنوان المنتج). النطاق أدناه لا يُغيّر شيئاً في الكارت
   (لم يكن يُطابق شيئاً فيه أصلاً) ويمنع التسرّب نهائياً. */
.product-card .desc-short,
.product-card .desc-full {
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    display: inline;
    white-space: normal;
}

.product-card .title-badges-row,
.product-card .product-header {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* ---------- خيارات الألوان والمقاسات ---------- */
.options {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}

.colors-container,
#size-select {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.colors-container::-webkit-scrollbar {
  display: none;
}

.color-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #ddd;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.color-dot.selected {
  border-color: var(--primary-color);
  box-shadow: 0 0 5px var(--primary-color);
}

#size-select {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 1rem;
  max-width: 120px;
  background: white;
  position: relative;
  z-index: 2;
}

/* ---------- سعر المنتج ---------- */
/* بلا position:relative هنا: الزر أصبح مثبَّتاً بالنسبة لحدود .product-card
   نفسها (أقرب سلف مُموضَع)، لا بالنسبة لصف السعر الرفيع هذا */
/* [FIX-PRICE-COLLISION] نُطاق .product-card .price-section بدل .price-section
   المطلق — كانت bare selector تكسر صندوق السعر الرئيسي (التدرّج اللوني
   المؤطَّر) في product_detail.html: gap/justify-content/margin-bottom كانت
   تتسرَّب فوق تصميمه الأصلي بمجرد وجود أي كارت على نفس الصفحة. */
.product-card .price-section {
  /* [FIX-PRICE-BOX-BLEED] الاتجاه المعاكس لتعليق [FIX-PRICE-COLLISION]
     أعلاه — النطاق هناك منع صندوق السعر الرئيسي في product_detail.html
     من اكتساب أنماط الكارت، لكن ترك الاتجاه الآخر مفتوحاً: .price-section
     المطلقة هناك تُعرِّف background (تدرّج أزرق/أخضر) وborder وpadding —
     ثلاث خصائص لم تكن هذه القاعدة المُنطَّقة تُعرِّفها إطلاقاً، فبما أن
     الخاصية غير المُعرَّفة هنا لا "تتنافس" مع القاعدة المطلقة على نفس
     الخاصية، كانت تلك الثلاث تتسرَّب بلا معارضة فوق بطاقات المنتج المُعاد
     استخدامها على نفس الصفحة (مثل more_products.html) — يظهر صندوق
     السعر البسيط في الصفحة الرئيسية بمربع متدرّج اللون مؤطَّر هنا فقط.
     تحييد صريح هنا يضمن نفس المظهر البسيط أياً كانت الصفحة. */
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  /* [FIX-DISCOUNT-BADGE] كانت space-between — بما أن .add-to-cart-btn
     position:absolute (خارج تخطيط flex هذا أصلاً)، فإن space-between
     كانت تدفع شارة نسبة الخصم إلى الطرف المقابل للسعر بدل أن تلتصق به.
     flex-start لا يُغيّر شيئاً في الحالة بلا خصم (عنصر واحد فقط) ويُبقي
     شارة الخصم ملاصقة للسعر عند وجود خصم. */
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  z-index: 2;
}

/* حجم الزر — مثبَّت في الزاوية اليسرى السفلية من البطاقة (.product-card
   بحكم position:relative)، بلا الاعتماد على هامش تلقائي داخل صف السعر */
/* [FIX-CART-BTN-COLLISION] نُطاق .product-card .add-to-cart-btn بدل
   .add-to-cart-btn المطلق — هذا كان التصادم الأخطر: product_detail.html
   يستخدم نفس الاسم بالحرف لزر "أضف إلى السلة" الرئيسي (الكامل العرض، في
   .action-buttons وفي .sticky-action-bar للهاتف)، وليس له أي تنسيق خاص به
   في product_detail.css (يعتمد فقط على .btn.btn-primary العام). فكانت
   قاعدة الكارت هذه (دائرة 36×36px، position:absolute، bottom/left:10px)
   تُطبَّق مباشرة عليه بالكامل — بالضبط الفقاعة الزرقاء المقطوعة في الزاوية
   بدل الزر الكامل "أضف للسلة" الظاهرة في المشكلة المُبلَّغ عنها. */
.product-card .add-to-cart-btn {
  background-color: #fff;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 3;
}

.product-card .add-to-cart-btn:hover {
  border-color: var(--color-primary);
  background-color: rgba(245, 124, 0, 0.1);
}

/* تعطيل تأثيرات الـ hover أثناء التحميل */
.product-card .add-to-cart-btn[aria-busy="true"] {
  cursor: not-allowed;
  opacity: 0.7;
}

.product-card .add-to-cart-btn svg {
  width: 20px;
  height: 20px;
}

.new-price {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--color-text);
  position: relative;
  z-index: 2;
  /* [FIX-GRID-COLUMN-SKEW] كانت white-space:nowrap هنا — تحقّق حيّ (اختبار
     A/B/C مباشر) أثبت أن nowrap تُبطل overflow-wrap/word-break تماماً (لا
     تُنشئ أي نقطة كسر، فيبقى الحد الأدنى = العرض الكامل غير المقصوص، 94px
     بدل 9px في الاختبار)، ومحاولة overflow:hidden+text-overflow:ellipsis
     البديلة لا تُقلّص "الحد الأدنى" الذي تراه الشبكة عند حساب عرض العمود
     (تعمل فقط أثناء تموضع flex الداخلي النهائي، وليس أثناء استعلام الحد
     الأدنى لعنصر شبكة أبعد جدّاً — نفس الفارق المُثبَت حياً لعنوان الخدمة).
     الحل الفعلي المُتحقَّق منه حياً: white-space:normal + overflow-wrap
     تسمحان برقم غير واقعي الطول (بيانات فاسدة/اختبارية) بالانتقال لسطر
     ثانٍ عند الحاجة القصوى فقط — بدل أن يدفع عمود الشبكة بأكمله أوسع.
     سعر حقيقي عادي لن يقترب أبداً من هذا الحدّ فيبقى بصرياً في سطر واحد
     كما هو تماماً. */
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

.new-price.discounted {
  color: #d32f2f;
}

/* ---------- شريط النص المتحرك ---------- */
.marquee-container {
  overflow: hidden;
  background: var(--primary-color);
  color: white;
  border-radius: 6px;
  margin-bottom: 10px;
  height: 30px;
  line-height: 30px;
  position: relative;
  z-index: 2;
}

.marquee-text {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: marqueeAnim 10s linear infinite;
  font-weight: 600;
}

@keyframes marqueeAnim {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

/* ---------- التقييم والكمية ---------- */
.rating-stock {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}

.stars {
  color: #f59e0b;
}

/* زر إضافة للسلة (النمط القديم) */
.product-card .add-cart-btn {
  background: var(--main-blue);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
  position: relative;
  z-index: 2;
}

.product-card .add-cart-btn:hover {
  background: var(--hover-blue);
}

/* رسائل الحالة */
.product-card .message {
  margin-top: 10px;
  padding: 10px;
  border-radius: 5px;
  font-weight: bold;
  text-align: center;
  position: relative;
  z-index: 2;
}

.product-card .message.success {
  background-color: #d4edda;
  color: #155724;
}

.product-card .message.error {
  background-color: #f8d7da;
  color: #721c24;
}

/* تصميم شبكة المنتجات */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ---------- Modal تسجيل الدخول ---------- */
/* [FIX-MODAL-OVERLAY-COLLISION] أُعيدت تسمية .modal-overlay → .pc-login-modal-overlay:
   .modal-overlay اسم شائع جداً في هذا المشروع (36 ملفاً مختلفاً)، ومنها
   product_detail.css نفسها التي تُعرِّف .modal-overlay بمعنى مختلف تماماً
   (خلفية معتمة لـ modal تكبير الصورة، عبر #modalOverlay). بما أن كلا
   الملفين يُحمَّلان معاً على صفحة تفاصيل المنتج، كان التصادم ثنائي الاتجاه:
   خلفية modal تسجيل الدخول هنا كانت تُصبح شفافة أقل (0.5 بدل 0.92) وبلا
   ضبابية، وخلفية modal تكبير الصورة هناك كانت تكتسب display:flex/position
   غير المقصودين. القيم نفسها بالحرف — فقط الاسم تغيّر، معزول بالكامل عن
   الملفات الأخرى (JS يعتمد على #login-modal بالـ id فقط، لا هذا الصنف). */
.pc-login-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* [FIX-MODAL-COLLISION] نُطاق .pc-login-modal-overlay X (بدل X المطلق) لكل
   ما يلي — product_detail.html يستخدم نفس أسماء الأصناف الداخلية بالحرف
   (.modal-content/.modal-header/.modal-footer/.btn-cancel/.btn-login) في
   modal تسجيل الدخول + modal الإبلاغ + modal مراسلة البائع الخاصة به
   (أغلفتها الخارجية مختلفة الاسم عمداً: modal-ovrfrm/modal-cont — لكن
   العناصر الداخلية تتشارك الاسم). بلا هذا النطاق، فتح أي من تلك الـ modals
   كان سيُظهر ألوان/تخطيط بطاقة المنتج بدل تصميمها الأصلي بمجرد وجود أي
   كارت على نفس الصفحة. .pc-login-modal-overlay هو غلاف modal الكارت نفسه
   حصراً — كل ما تحته آمن للنطاق بهذا الشكل. */
.pc-login-modal-overlay .modal-content {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 90%;
    text-align: center;
}

.pc-login-modal-overlay .modal-header h3 {
    margin: 0 0 15px 0;
    color: #2c3e50;
}

.pc-login-modal-overlay .modal-body p {
    margin: 0 0 20px 0;
    color: #666;
    line-height: 1.5;
}

.pc-login-modal-overlay .modal-footer {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.pc-login-modal-overlay .btn-cancel,
.pc-login-modal-overlay .btn-login {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.pc-login-modal-overlay .btn-cancel {
    background: #f1f1f1;
    color: #666;
}

.pc-login-modal-overlay .btn-cancel:hover {
    background: #e0e0e0;
}

.pc-login-modal-overlay .btn-login {
    background: #4CAF50;
    color: white;
}

.pc-login-modal-overlay .btn-login:hover {
    background: #45a049;
}

/* ---------- Notification Toast ---------- */
/* إصلاح [3]: حُذفت animation fadeOut — الإخفاء يتحكم به JS */
.notification-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    display: none;
    animation: slideInRight 0.3s ease;
    max-width: 300px;
    word-wrap: break-word;
    text-align: center;
}

.notification-toast.success {
    background-color: #4CAF50;
}

.notification-toast.error {
    background-color: #f44336;
}

/* ---------- شارة التحقق ---------- */
.vendor-verification-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.vendor-verification-badge svg {
    width: 24px;
    height: 24px;
    color: #3B82F6;
}

/* ---------- Modal اختيار الخصائص ---------- */
.attributes-selection-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.attributes-modal-content {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.attributes-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.attributes-modal-header h3 {
    margin: 0;
    color: #2c3e50;
    font-size: 18px;
}

.attributes-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    /* تحسين منطقة النقر */
    padding: 4px 8px;
    line-height: 1;
}

.attributes-modal-body {
    margin-bottom: 20px;
}

/* [FIX-ATTR-MODAL-COLLISION] نُطاق .attributes-selection-modal X (بدل X
   المطلق) لكل ما يلي — product_detail.html يستخدم نفس الأسماء بالحرف
   لعرض خصائص المنتج الحقيقية على الصفحة نفسها (وليس داخل أي modal):
   .attribute-group و.color-swatch (18px هناك مقابل 40px هنا — كانت
   القيمة الأكبر تطغى فتُضاعِف حجم دائرة اللون الحقيقية على الصفحة أكثر
   من الضعف) و.color-name. بلا هذا النطاق كانت هذه القيم تتسرَّب فوق تصميم
   قسم الخصائص (§2.4) الأصلي بمجرد وجود أي كارت على نفس الصفحة. كل هذه
   العناصر تُبنى فعلياً بواسطة product_card.js كأبناء لـ
   #attributes-selection-modal (انظر buildAttributesModal) فالنطاق آمن
   تماماً ولا يُغيّر أي شيء في مظهر الـ modal نفسه. */
.attributes-selection-modal .attribute-group {
    margin-bottom: 20px;
}

.attributes-selection-modal .attribute-group h4 {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.attributes-selection-modal .attribute-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 10px;
}

.attributes-selection-modal .color-option,
.attributes-selection-modal .text-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 8px;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.attributes-selection-modal .color-option:hover,
.attributes-selection-modal .text-option:hover {
    background: #f8f9fa;
}

.attributes-selection-modal .color-option input,
.attributes-selection-modal .text-option input {
    display: none;
}

.attributes-selection-modal .color-option input:checked + .color-swatch,
.attributes-selection-modal .text-option input:checked + .option-text {
    border-color: #007bff;
    box-shadow: 0 0 0 2px #007bff;
}

.attributes-selection-modal .color-swatch {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #ddd;
    cursor: pointer;
    transition: all 0.2s ease;
}

.attributes-selection-modal .color-name {
    font-size: 12px;
    margin-top: 5px;
    text-align: center;
    color: #666;
}

.attributes-selection-modal .text-option {
    text-align: center;
}

.attributes-selection-modal .option-text {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.attributes-modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.attributes-btn-cancel, .attributes-btn-confirm {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.attributes-btn-cancel {
    background: #f1f1f1;
    color: #666;
}

.attributes-btn-cancel:hover {
    background: #e0e0e0;
}

.attributes-btn-confirm {
    background: #007bff;
    color: white;
}

.attributes-btn-confirm:hover {
    background: #0056b3;
}

/* ---------- Animations ---------- */
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* إصلاح [5]: keyframe للدوران عند التحميل */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ==================== Responsive ==================== */

/* الهاتف: 2 منتجات في السطر */
@media (max-width: 767px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-card {
    padding: 0.5rem;
  }

  /* إصلاح [2]: 0.5rem كان 8px — صغير جداً على الهاتف */
  /* [FIX-TITLE/DESC/PRICE-COLLISION] نفس النطاق المُضاف أعلاه — بلا هذا
     النطاق كانت هذه القواعد تُطبَّق أيضاً على عنوان/وصف/صندوق سعر المنتج
     الرئيسي في product_detail.html على مقاسات الهاتف تحديداً. */
  .product-card .product-title {
    font-size: 0.75rem;
  }

  .product-card .product-description {
    font-size: 0.7rem;
  }

  .product-card .price-section {
    font-size: 1rem;
    gap: 3px;
  }

  .new-price {
    font-size: 1rem;
  }

  .attributes-modal-content {
      width: 95%;
      padding: 15px;
  }

  .attribute-values-grid {
      grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
      gap: 8px;
  }
}

/* التابلت: 3 منتجات في السطر */
@media (min-width: 768px) and (max-width: 1023px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* الكمبيوتر: 4 منتجات في السطر */
@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==================== Badge Icons (Star & Fire) ==================== */
.product-title-row {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
}

.product-title-row .product-title {
    flex: 1;
    min-width: 0;
}

.product-badge-icon {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

.product-badge-icon--star,
.product-badge-icon--fire {
  fill: currentColor !important;
  stroke: none;
}

.product-badge-icon--star {
  color: #f97316 !important;
}

.product-badge-icon--fire {
  color: #ef4444 !important;
}

/* ==================== Boost Badge (badge_type) ==================== */
/* الحاوية اليمنى العلوية — تجمع بادج التعزيز + توثيق البائع بشكل عمودي */
.card-badges-right {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

/* البادج الأساسي */
.product-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,0.12);
}

.product-boost-badge svg {
  flex-shrink: 0;
}

/* الألوان حسب النوع */
.product-boost-badge--urgent  { background: #fee2e2; color: #dc2626; }
.product-boost-badge--limited { background: #f3e8ff; color: #7c3aed; }
.product-boost-badge--new     { background: #dbeafe; color: #2563eb; }
.product-boost-badge--verified { background: #dcfce7; color: #16a34a; }
.product-boost-badge--featured { background: #fef3c7; color: #92400e; }