/* =====================================================
   product_detail.css — نسخة الإنتاج النهائية الكاملة
   تصميم احترافي متجاوب مع جميع الشاشات

   إضافات هذه النسخة:
   [STICKY-1] شريط الأزرار الثابت فوق النافبار السفلي
   [ATTRS-2]  الخصائص المخصصة — grid محسّن مع hover أنيق
   [SAFE-3]   رسالة الخطأ لا تختبئ خلف الشريط الثابت
   [FIX-IMG]  الصورة الرئيسية: object-fit cover → contain (عرض الصورة كاملة دون قص)
===================================================== */

/* ==================== Reset & Variables ==================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary:               #2563eb;
    --primary-hover:         #1d4ed8;
    --primary-light:         rgba(37, 99, 235, 0.08);
    --secondary:             #f1f5f9;
    --secondary-hover:       #e2e8f0;
    --text-primary:          #0f172a;
    --text-secondary:        #475569;
    --text-muted:            #94a3b8;
    --border:                #e2e8f0;
    --border-strong:         #cbd5e1;
    --background:            #ffffff;
    --surface:               #f8fafc;
    --surface-2:             #f1f5f9;
    --success:               #059669;
    --success-light:         rgba(5, 150, 105, 0.08);
    --warning:               #d97706;
    --warning-light:         rgba(217, 119, 6, 0.1);
    --error:                 #dc2626;
    --error-light:           rgba(220, 38, 38, 0.08);
    --featured:              #f97316;
    --recommended:           #ef4444;
    --shadow-xs:             0 1px 2px rgba(0,0,0,.04);
    --shadow-sm:             0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --shadow:                0 2px 8px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
    --shadow-md:             0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
    --shadow-lg:             0 10px 30px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.06);
    --radius-sm:             0.375rem;
    --radius:                0.5rem;
    --radius-lg:             0.75rem;
    --radius-xl:             1rem;
    --radius-2xl:            1.25rem;
    --transition:            200ms cubic-bezier(0.4, 0, 0.2, 1);

    /* [STICKY-1] ارتفاعات الشريط السفلي — قيمة واحدة تتحكم في الكل */
    --navbar-bottom-height:  60px;
    --sticky-bar-height:     5.25rem;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Tajawal', sans-serif;
    background-color: #f0f2f7;
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
}

/* ==================== Layout ==================== */
.product-page {
    padding: 1.5rem 1rem;
    min-height: 100vh;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    overflow: hidden;   /* يمنع أي عنصر داخلي من كسر عرض الصفحة */
}

/* [FIX-GRID-COLLISION] أُعيدت تسمية .product-grid → .pd-layout-grid.
   السبب: my_product/css/product_card.css يُعرِّف .product-grid بمعنى
   مختلف تماماً (شبكة بطاقات repeat(4,1fr)) بلا أي نطاق (bare selector) —
   وبما أن product_card.html (الذي يحمّل ذلك الملف) أصبح يُضمَّن دائماً في
   هذه الصفحة (قسمَي "منتجات قد تهمك" و"منتجات أخرى")، فإن قاعدته الأخيرة
   في ترتيب DOM كانت تكسر تخطيط عمودَي المعرض/المعلومات هنا بالكامل. نفس
   القيم بالحرف — فقط الاسم تغيّر، لا التصميم. */
.pd-layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    min-width: 0;       /* ضروري لكل grid container لمنع تمدد الأعمدة */
}

@media (min-width: 1024px) {
    .product-page { padding: 2.5rem 1.5rem; }
    .pd-layout-grid {
        grid-template-columns: 1.1fr 1fr;
        gap: 2.5rem;
        align-items: start;
    }
}

/* ==================== Gallery Section ==================== */
/* الصورة الرئيسية كبيرة فوق + شريط أفقي قابل للسحب في الأسفل على جميع الأجهزة */
.gallery-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;       /* يمنع الـ flex item من التمدد خارج حدوده */
    width: 100%;        /* يلتزم بعرض عمود الـ grid */
    overflow: hidden;   /* يقطع أي محتوى يتجاوز */
}

/* الشاشات الكبيرة: عمود (فوق/تحت) — sticky */
@media (min-width: 1024px) {
    .gallery-section {
        flex-direction: column;
        gap: 0.875rem;
        position: sticky;
        top: 2rem;
    }
    .gallery-section .main-image-container { width: 100%; }
    .gallery-section .thumbnails-sidebar   { width: 100%; flex: none; height: auto; }
}

.main-image-container {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    background: var(--background);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
}

@media (min-width: 1024px) {
    .main-image-container {
        aspect-ratio: 4 / 3;
    }
}

.main-image {
    width: 100%;
    height: 100%;
    /* [FIX-IMG] cover → contain: عرض الصورة كاملة دون قص أطرافها داخل الإطار */
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-image-container:hover .main-image { transform: scale(1.04); }

.zoom-btn {
    position: absolute;
    top: 0.75rem;
    left: 3rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--radius-lg);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    color: var(--text-primary);
}

.zoom-btn:hover {
    background: var(--background);
    transform: scale(1.08);
    box-shadow: var(--shadow-md);
}

.discount-badge-image {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    background: linear-gradient(135deg, #dc2626, #f97316);
    color: white;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 800;
    box-shadow: var(--shadow-sm);
    letter-spacing: 0.3px;
}

/* ==================== Thumbnails Strip (شريط قابل للسحب) ==================== */

/*
 * المبدأ: الـ sidebar لا يتجاوز عرض .main-image-container أبداً.
 * gallery-section هي flex-column → كلا العنصرين يرثان نفس العرض.
 * الـ track يُمرِّر overflow داخل الـ sidebar فقط — لا يتمدد خارجه.
 */

/* الحاوية الخارجية */
.thumbnails-sidebar {
    width: 100%;
    max-width: 100%;        /* لا يتجاوز عرض gallery-section أبداً */
    overflow: hidden;
    padding: 0.25rem 0;
    position: relative;
    box-sizing: border-box;
    /* fade الأطراف — يُشير بصرياً لوجود محتوى قابل للسحب */
    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%
    );
}

/* التراك الداخلي:
   overflow-x: auto هو من يتولى الـ scroll.
   لا width: max-content — الـ flex items تحدد عرضها بأنفسها.
*/
.thumbnails-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    cursor: grab;
    user-select: none;
    padding: 0.25rem 0.25rem 0.5rem;
}

.thumbnails-track::-webkit-scrollbar { display: none; }
.thumbnails-track:active             { cursor: grabbing; }

/* كل thumbnail: ثابت — لا ينكمش ولا يتمدد */
.thumbnail {
    flex: 0 0 4rem;
    width: 4rem;
    height: 4rem;
    min-width: 4rem;
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    background: var(--background);
    padding: 0;
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
    box-shadow: var(--shadow-xs);
    scroll-snap-align: start;
}

.thumbnail:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.thumbnail.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light), var(--shadow-sm);
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
    pointer-events: none;   /* يمنع drag الصورة أثناء سحب الـ slider */
}

.thumbnail:hover img { transform: scale(1.05); }

/* الشاشات الكبيرة — thumbnail أكبر قليلاً */
@media (min-width: 1024px) {
    .gallery-section { position: sticky; top: 2rem; }

    .thumbnail {
        flex: 0 0 5rem;
        width: 5rem;
        height: 5rem;
        min-width: 5rem;
    }
}

/* ==================== Product Info Section ==================== */
.product-info-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* [STICKY-1] مسافة سفلية على الهاتف لتجنب تغطية المحتوى */
/* [FIX-DEAD-BOTTOM-GAP] كانت هذه القيمة الكبيرة تُطبَّق دائماً بلا شرط —
   صحيحة فقط يوم كانت .product-info-section آخر شيء بالصفحة فعلياً. بعد
   إضافة products_for_you.html/more_products.html كمحتوى لاحق (يحجزان
   مسافتهما بأنفسهما عند نهايتهما هما)، صارت تُنتج فراغاً ميتاً بين "عرض
   معلومات التوصيل" وبين "منتجات قد تهمك". القيمة الكبيرة الآن محفوظة حصراً
   في .needs-sticky-clearance (مُضافة من product_detail.html فقط عندما لا
   for_you_products ولا more_products). الحالة الشائعة أُعيدت لـ 0 —
   [MEASURED-LIVE]: حتى قيمة "بسيطة" مثل 2rem كانت تتراكم فوق مسافات
   موجودة أصلاً (padding-bottom الثابت 1.5rem/24px لـ .product-page نفسها
   + margin-top 24px لـ .zk-more-products-grid) لتُنتج ~82px قِيست حياً —
   لسا محسوسة كفجوة رغم إنها أصغر بكثير من الأصل. بلا أي إضافة هنا، تينك
   المسافتين الطبيعيتين (~48px إجمالاً) تكفيان كفاصل بصري بين الأقسام —
   نفس الإصلاح بالحرف في offer_detail.css (.offer-detail-page). */
@media (max-width: 768px) {
    .product-info-section {
        padding-bottom: 0;
    }
    .product-info-section.needs-sticky-clearance {
        padding-bottom: calc(var(--navbar-bottom-height) + var(--sticky-bar-height) + 0.5rem);
    }
}

/* Product Header */
.product-header {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.title-badges-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
}

.product-title {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text-primary);
    flex: 1;
    min-width: 200px;
    letter-spacing: -0.3px;
}

.product-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.badge-icon.featured    { color: var(--featured); }
.badge-icon.recommended { color: var(--recommended); }

.condition-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.condition-badge.new {
    background: var(--success-light);
    color: var(--success);
    border: 1px solid rgba(5, 150, 105, 0.2);
}

.condition-badge.used {
    background: var(--secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.product-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.7;
    cursor: pointer;
    transition: color var(--transition);
}
.product-description:hover { color: var(--text-primary); }

/* Price */
.price-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, #eff6ff, #f0fdf4);
    border-radius: var(--radius-lg);
    border: 1px solid #dbeafe;
}

.current-price {
    font-size: 2rem;
    font-weight: 900;
    color: var(--primary);
    letter-spacing: -0.5px;
}

.original-price {
    font-size: 1.125rem;
    color: var(--text-muted);
    text-decoration: line-through;
}

.discount-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, #dc2626, #f97316);
    color: white;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
}

/* Date & Location */
.date-location-section {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.info-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.875rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    transition: all var(--transition);
    flex-shrink: 0;
    white-space: nowrap;
}

.info-item:hover {
    background: var(--secondary-hover);
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}

.detail-icon {
    flex-shrink: 0;
    color: var(--primary);
}

.info-text {
    font-weight: 600;
    color: var(--text-primary);
}

/* Rating */
.rating-section {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 1.125rem;
}

.star.filled { color: #f59e0b; }
.star.empty  { color: #d1d5db; }

.rating-count {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-right: 0.5rem;
    font-weight: 500;
}

/* ══════════════════════════════════════════
   أزرار التواصل مع البائع — Grid Layout
   الحالة 1: رسالة فقط       → عمود واحد كامل
   الحالة 2: هاتف + رسالة    → عمودان متساويان
   الحالة 3: هاتف+wa + رسالة → عمودان (wa/هاتف) ثم رسالة كاملة
══════════════════════════════════════════ */
.seller-contact-row {
    display: grid;
    grid-template-columns: 1fr;   /* حالة 3: رسالة فقط */
    gap: 10px;
    margin-top: 14px;
}

/* حالة 2: هاتف + رسالة */
.seller-contact-row.has-phone {
    grid-template-columns: 1fr 1fr;
}

/* حالة 1: هاتف + واتساب + رسالة */
.seller-contact-row.has-phone.has-wa {
    grid-template-columns: 1fr 1fr;
}
.seller-contact-row.has-phone.has-wa .msg-seller-btn {
    grid-column: 1 / -1;   /* يمتد على كامل العرض */
}

/* ── خصائص مشتركة لكل الأزرار ── */
.reveal-phone-btn,
.whatsapp-btn,
.msg-seller-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 10px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    direction: rtl;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    white-space: nowrap;
    overflow: hidden;
}

/* ── زر الاتصال (أزرق) ── */
.reveal-phone-btn {
    background: var(--primary, #2563eb);
    color: #fff;
    border: none;
}
.reveal-phone-btn:hover  { background: #1d4ed8; }
.reveal-phone-btn:active { transform: scale(0.97); }

/* ── زر واتساب (أخضر) ── */
.whatsapp-btn {
    background: #25d366;
    color: #fff;
    border: none;
    text-decoration: none;
}
.whatsapp-btn:hover  { background: #1ebe5d; }
.whatsapp-btn:active { transform: scale(0.97); }

/* ── زر الرسالة (outline) ── */
.msg-seller-btn {
    background: #fff;
    color: var(--primary, #2563eb);
    border: 1.5px solid var(--primary, #2563eb);
}
.msg-seller-btn:hover  { background: #eff6ff; }
.msg-seller-btn:active { transform: scale(0.97); }

/* ══════════════════════════════════
   Modal تأكيد التواصل
══════════════════════════════════ */
.contact-confirm-cont {
    text-align: center;
    padding: 32px 28px 24px;
    max-width: 360px;
    width: 92vw;
    border-radius: 18px;
    animation: scaleIn 0.2s ease;
}

.ccm-icon {
    font-size: 2.8rem;
    line-height: 1;
    margin-bottom: 12px;
}

.ccm-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: #111827;
}

.ccm-subtitle {
    font-size: 0.82rem;
    color: #6b7280;
    margin: 0 0 18px;
}

.ccm-number {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    direction: ltr;
    background: #f3f4f6;
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 20px;
    color: #111827;
}

.ccm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.ccm-btn-confirm {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
    border-radius: 9px;
    font-size: 0.9rem;
    font-weight: 700;
    background: var(--primary, #2563eb);
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}
.ccm-btn-confirm:hover { background: #1d4ed8; }

.ccm-btn-cancel {
    flex: 1;
    padding: 11px 16px;
    border-radius: 9px;
    font-size: 0.9rem;
    font-weight: 600;
    background: #f3f4f6;
    color: #374151;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}
.ccm-btn-cancel:hover { background: #e5e7eb; }

/* ── Modal راسل البائع ── */
.msg-modal-cont {
    width: min(480px, 94vw);
    border-radius: 14px;
    overflow: hidden;
}
.msg-modal-cont .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.msg-modal-cont .modal-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}
.msg-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    border-radius: 6px;
    display: flex;
}
.msg-modal-close:hover { background: var(--surface-2); }

.msg-modal-body {
    padding: 0 1.25rem 1rem;
}
.msg-seller-textarea {
    width: 100%;
    resize: vertical;
    border: 1.5px solid var(--border, #e5e7eb);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1.6;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.msg-seller-textarea:focus { border-color: var(--primary, #2563eb); }
.msg-char-counter {
    text-align: left;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}
.msg-seller-error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.82rem;
    margin-top: 8px;
}
.btn-send-msg {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--primary, #2563eb);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-send-msg:hover    { background: #1d4ed8; }
.btn-send-msg:disabled { opacity: 0.6; cursor: not-allowed; }

@media (min-width: 1024px) {
    .product-title { font-size: 1.875rem; }
    .current-price { font-size: 2.25rem; }
}

/* ==================== Seller Card ==================== */
.seller-card {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    box-shadow: var(--shadow-xs);
}

.seller-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.seller-avatar { width: 46px; height: 46px; flex-shrink: 0; }

.seller-avatar-img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
    border: 2px solid #e9ecef;
    display: block;
}

.user-initial-circle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #3b82f6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.seller-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.seller-name-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.seller-role { font-size: 1rem; }

.seller-link {
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.95rem;
}

.seller-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

.seller-role-text {
    font-size: 0.72rem !important;
    color: var(--text-muted) !important;
    margin-top: 2px !important;
    font-weight: 500;
    background: var(--surface-2);
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
}


.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #eff6ff;
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
    border: 1px solid #bfdbfe;
}

/* Seller Stats */
.seller-stats {
    display: flex;
    justify-content: space-around;
    border-top: 1px solid var(--border);
    padding-top: 14px;
    margin-top: 4px;
}

.stat { text-align: center; flex: 1; }

.stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.stat-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
    font-weight: 500;
}

/* ==================== [ATTRS-2] الخصائص المخصصة ==================== */

/* عنوان القسم */
.attrs-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.875rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.attrs-section-title svg { color: var(--primary); flex-shrink: 0; }

/* الـ grid الرئيسي
   [FIX-ATTRS] عمودان على جميع الشاشات بما فيها الهاتف
   نفس تصميم الشاشات الكبيرة بالضبط
*/
.custom-attributes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

@media (min-width: 480px) {
    .custom-attributes-grid {
        gap: 0.625rem;
    }
}

/* بطاقة الخاصية الواحدة */
.attributes-detail-item {
    display: flex;
    flex-direction: column;    /* label فوق، value تحت */
    gap: 0.2rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
    margin-bottom: 0;          /* الـ gap في الـ grid يتولى المسافات */
}

/* خط أزرق رفيع يظهر عند الـ hover */
.attributes-detail-item::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary);
    opacity: 0;
    transition: opacity var(--transition);
}

.attributes-detail-item:hover {
    background: #f0f5ff;
    border-color: #bfdbfe;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

.attributes-detail-item:hover::before { opacity: 1; }

/* Label — صغير ومخفف */
.detail-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

/* Value — واضح وغامق */
.detail-value {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    line-height: 1.4;
    word-break: break-word;
}

/* رقم الإعلان — monospace */
.detail-value.monospace {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8rem;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
}

/* ==================== Availability ==================== */
.availability-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
}

.availability-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-lg);
    font-size: 0.8125rem;
    font-weight: 700;
}

.availability-badge.in-stock {
    background: var(--success-light);
    color: var(--success);
    border: 1px solid rgba(5, 150, 105, 0.2);
}

.availability-badge.in-stock::before  { content: '✓'; margin-left: 0.25rem; font-weight: 900; }

.availability-badge.low-stock {
    background: var(--warning-light);
    color: var(--warning);
    border: 1px solid rgba(217, 119, 6, 0.2);
}

.availability-badge.low-stock::before { content: '⚠'; margin-left: 0.25rem; }

.availability-badge.out-of-stock {
    background: var(--error-light);
    color: var(--error);
    border: 1px solid rgba(220, 38, 38, 0.2);
}

.availability-badge.out-of-stock::before { content: '✗'; margin-left: 0.25rem; }

.product-extra-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.extra-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.3rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.extra-badge.free-delivery {
    background: var(--success-light);
    border-color: rgba(5, 150, 105, 0.2);
    color: var(--success);
}

.extra-badge.free-delivery::before { content: '🚚'; }
.extra-badge.guarantee::before     { content: '🛡️'; }

/* ==================== Attributes (Colors & Sizes) ==================== */
.attributes-section {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    box-shadow: var(--shadow-xs);
}

.attribute-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.attribute-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.attribute-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
}

.attribute-values::-webkit-scrollbar { display: none; }

.attribute-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    background: var(--background);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    user-select: none;
}

.attribute-option:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.attribute-option.active {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* [FROZEN-STOCK]: تركيبة نافدة الكمية أو غير موجودة — تجميد بصري واضح
   دون إخفائها (المستخدم يرى أن الخيار موجود لكنه غير متاح حالياً). */
.attribute-option.frozen {
    cursor: not-allowed;
    opacity: 0.45;
    background: var(--background);
    color: var(--text-secondary);
    position: relative;
}

.attribute-option.frozen::after {
    content: '';
    position: absolute;
    inset: 50% 8% auto 8%;
    height: 2px;
    background: currentColor;
    opacity: 0.6;
    transform: translateY(-50%);
}

.attribute-option.frozen:hover {
    border-color: var(--border);
    background: var(--background);
    color: var(--text-secondary);
    transform: none;
    box-shadow: none;
}

.attribute-option.frozen.active {
    border-color: var(--border);
    box-shadow: none;
}

.color-swatch {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.color-name, .text-swatch { font-weight: 700; }

/* ==================== Payment & Delivery ==================== */
.sidebar {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.form-section { display: flex; flex-direction: column; }

.payment-section,
.delivery-section { padding: 1rem 1.25rem; }

.payment-section { border-bottom: 1px solid var(--border); }

.section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.875rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.section-title svg { flex-shrink: 0; color: var(--primary); }

.options-container { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.payment-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.875rem;
    background: var(--success-light);
    border: 1px solid rgba(5, 150, 105, 0.2);
    border-radius: var(--radius-lg);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--success);
    transition: all var(--transition);
    white-space: nowrap;
}

.payment-option:hover {
    background: rgba(5, 150, 105, 0.14);
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}

/* Delivery — [SELLER-DELIVERY-ZONE 2026-09-11]: الكتلة الشخصية دائمة
   الظهور (لا accordion، لا تكرار) — تعرض سعراً حقيقياً مُقدَّراً لولاية
   الزائر عند توفّرها (resolved_delivery_options)، وإلا القائمة العامة
   لطرق التوصيل على مستوى المنتج. [DELIVERY-ZONE-TABLE-UI 2026-09-13]:
   الجدول الخام الكامل (كل الولايات) بات خلف نافذة تُفتح/تُغلق — انظر
   .delivery-zone-toggle/.delivery-zone-collapsible أدناه، وJS في
   product_detail.js. انظر delivery_product_cadre.html. */
.delivery-methods-section { margin-top: 0.625rem; }

.delivery-methods-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.delivery-method-item {
    padding: 0.625rem 0.875rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: all var(--transition);
}

.delivery-method-item:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-xs);
}

.delivery-zone-note {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.delivery-zone-note a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: underline;
}

.delivery-blocked-note {
    padding: 0.875rem 1rem;
    background: var(--error-light);
    border: 1px solid var(--error);
    border-radius: var(--radius-lg);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--error);
    line-height: 1.6;
}

.no-delivery-methods {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    font-style: italic;
}

/* [SELLER-DELIVERY-ZONE 2026-09-11]: جدول أسعار البائع — دائم الظهور
   لكل زائر (مسجّل دخول أو لا) طالما البائع ضبط جدوله. سقف ارتفاع +
   تمرير عمودي لجداول طويلة (حتى 69 ولاية)، وتمرير أفقي احتياطي على
   الشاشات الضيقة بدل كسر تخطيط الصفحة. */
.delivery-zone-table-wrap {
    max-height: 15.5rem;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.delivery-zone-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    white-space: nowrap;
}

.delivery-zone-table th,
.delivery-zone-table td {
    padding: 0.5rem 0.75rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.delivery-zone-table th {
    position: sticky;
    top: 0;
    background: var(--surface);
    color: var(--text-secondary);
    font-weight: 700;
    z-index: 1;
}

.delivery-zone-table td:first-child { font-weight: 600; color: var(--text-primary); }
.delivery-zone-table tbody tr:last-child td { border-bottom: none; }
.delivery-zone-table tbody tr:hover td { background: var(--surface); }

/* [DELIVERY-ZONE-TABLE-UI 2026-09-13]: شارة ملوَّنة لنوع التوصيل داخل
   الجدول — أوضح بصرياً من نص خام، ولون مختلف لكل نوع لمسح سريع بالعين
   عبر جدول طويل (حتى 69 صفاً). type_code من الحقل الخام على الموديل
   (paid/free/shared/hand) — يُحقَن من product_detail_views.py. */
.dz-badge {
    display: inline-block;
    padding: 0.2rem 0.625rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}
.dz-badge--paid   { background: var(--primary-light);  color: var(--primary-hover); }
.dz-badge--free   { background: var(--success-light);  color: var(--success); }
.dz-badge--shared { background: var(--warning-light);  color: var(--warning); }
.dz-badge--hand   { background: var(--secondary);      color: var(--text-secondary); }

/* [DELIVERY-ZONE-TABLE-UI 2026-09-13]: زر «عرض/إخفاء» الجدول الكامل —
   نافذة تُفتح/تُغلق (JS يُضيف/يُزيل .is-open على اللوحة أدناه، ويُبدِّل
   aria-expanded هنا). */
.delivery-zone-toggle {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition);
}

.delivery-zone-toggle:hover {
    background: var(--secondary-hover);
    border-color: var(--border-strong);
}

.delivery-zone-toggle svg:first-child { flex-shrink: 0; color: var(--primary); }

.delivery-zone-toggle-label { flex: 1; text-align: start; }

.delivery-zone-toggle-chevron {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform var(--transition);
}

.delivery-zone-toggle[aria-expanded="true"] .delivery-zone-toggle-chevron {
    transform: rotate(180deg);
}

/* اللوحة القابلة للطي — max-height بدل [hidden] حتى يعمل الانتقال
   السلس؛ .is-open تُضاف/تُزال عبر JS فقط. الارتفاع الأقصى (28rem) أكبر
   من ارتفاع .delivery-zone-table-wrap (15.5rem) بهامش كافٍ. */
.delivery-zone-collapsible {
    max-height: 0;
    overflow: hidden;
    transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.delivery-zone-collapsible.is-open {
    max-height: 28rem;
    margin-top: 0.625rem;
}

/* [DELIVERY-ZONE-TABLE-UI 2026-09-13]: زر «إدارة جدول أسعار التوصيل» —
   يظهر فقط لصاحب المنتج (تحقُّق مباشر في القالب، مثل can_message_seller
   في product_detail.html). رابط بسيط لا زر عملية — لا يحتاج تأكيداً. */
.delivery-manage-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.875rem;
    background: var(--primary-light);
    border: 1px dashed var(--primary);
    border-radius: var(--radius-lg);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary-hover);
    text-decoration: none;
    transition: all var(--transition);
}

.delivery-manage-link:hover {
    background: var(--primary);
    color: #fff;
    border-style: solid;
}

/* ==================== Quantity Section ==================== */
.quantity-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
}

.quantity-label {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
}

.quantity-controls {
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition);
}

.quantity-controls:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.qty-btn {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    transition: all var(--transition);
}

.qty-btn:hover    { background: var(--secondary); }
.qty-btn:active   { background: var(--secondary-hover); }
.qty-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.qty-input {
    width: 3.5rem;
    height: 2.75rem;
    border: none;
    border-inline: 1.5px solid var(--border);
    text-align: center;
    font-size: 1rem;
    font-weight: 800;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--background);
    -moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.qty-input:focus { outline: none; }

.stock-text {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--success);
    background: var(--success-light);
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius);
    border: 1px solid rgba(5, 150, 105, 0.2);
}

/* ==================== [STICKY-1] أزرار الإجراءات ==================== */

/* الأزرار داخل التدفق — تظهر على الشاشات الكبيرة فقط */
.action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding: 1.25rem;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

/* على الهاتف: نخفي الأزرار داخل التدفق */
@media (max-width: 768px) {
    .action-buttons { display: none; }
}

/* [DESKTOP-MOVE] تكبير أزرار "أضف إلى السلة" / "اشترِ الآن" على الشاشات
   الكبيرة فقط — بعد تفريغ عمود المعلومات من بطاقة البائع وبطاقة الدفع/
   التوصيل (نُقلتا تحت الصورة عبر JS)، تُصبح هذه الأزرار أبرز عنصر ختامي
   في العمود فتستحق حجماً أكبر يتناسب مع باقي بطاقات الصفحة. لا يمس هذا
   شريط الأزرار الثابت على الهاتف (.sticky-action-bar له تنسيقه المستقل). */
@media (min-width: 1024px) {
    .action-buttons {
        gap: 1rem;
        padding: 1.5rem;
        /* [DESKTOP-MOVE] تُصبح آخر عنصر في .container (أسفل العمودين معاً)
           عبر JS — الهامش العلوي يفصلها بوضوح كشريط ختامي مستقل. */
        margin-top: 2rem;
    }
    .action-buttons .btn {
        padding: 1.25rem 1.5rem;
        font-size: 1.0625rem;
        gap: 0.75rem;
    }
    .action-buttons .btn svg {
        width: 22px;
        height: 22px;
    }
}

/* ── الشريط الثابت — مخفي على الشاشات الكبيرة ── */
.sticky-action-bar { display: none; }

@media (max-width: 768px) {
    .sticky-action-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.625rem;

        position: fixed;
        bottom: var(--navbar-bottom-height);   /* فوق النافبار بالضبط */
        right: 0;
        left: 0;
        z-index: 900;                          /* تحت النافبار (z: 9999) */

        padding: 0.75rem 1rem;
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid var(--border);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    }
}

/* أزرار الشريط الثابت */
.sticky-action-bar .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border: none;
    border-radius: var(--radius-lg);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
}

.sticky-action-bar .btn svg { flex-shrink: 0; }

.sticky-action-bar .btn-primary {
    background: linear-gradient(135deg, var(--primary), #3b82f6);
    color: white;
    box-shadow: 0 3px 12px rgba(37, 99, 235, 0.35);
}

.sticky-action-bar .btn-primary:active {
    transform: scale(0.97);
    box-shadow: 0 1px 6px rgba(37, 99, 235, 0.3);
}

.sticky-action-bar .btn-secondary {
    background: var(--background);
    border: 1.5px solid var(--border-strong);
    color: var(--text-primary);
}

.sticky-action-bar .btn-secondary:active {
    background: var(--secondary);
    transform: scale(0.97);
}

.sticky-action-bar .btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ==================== Shared Button Base ==================== */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.9rem 1.25rem;
    border: none;
    border-radius: var(--radius-lg);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
    letter-spacing: 0.2px;
}

.btn svg { flex-shrink: 0; }

.btn-primary {
    background: linear-gradient(135deg, var(--primary), #3b82f6);
    color: white;
    box-shadow: 0 3px 12px rgba(37, 99, 235, 0.35);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
}

.btn-primary:active { transform: translateY(0); }

.btn-secondary {
    background: var(--background);
    border: 1.5px solid var(--border-strong);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--secondary);
    border-color: var(--primary);
    color: var(--primary);
}

@media (max-width: 480px) {
    .action-buttons { grid-template-columns: 1fr; }
    .btn-primary { order: -1; }
}

/* ── زر الإبلاغ ── */
.rating-report-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.report-product-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid #fca5a5;
    color: #dc2626;
    font-size: 12px;
    font-family: inherit;
    padding: 3px 10px;
    border-radius: 20px;
    cursor: pointer;
    transition: background .15s;
    line-height: 1.5;
}
.report-product-btn:hover    { background: #fef2f2; }
.report-product-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── modal الإبلاغ ── */
.report-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    background: #fafafa;
    margin-top: 4px;
    direction: rtl;
    outline: none;
    appearance: none;
}
.report-select:focus { border-color: #3b82f6; }
.report-form-group { margin-bottom: 12px; }
.report-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #374151;
}
.report-custom-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
}
.report-custom-input:focus { border-color: #3b82f6; }
.report-char-hint    { text-align: left; font-size: 11px; color: #9ca3af; margin-top: 3px; }
.report-success-state { text-align: center; padding: 24px 0 16px; }
.report-success-icon  { font-size: 42px; margin-bottom: 10px; }
.report-success-title { font-size: 18px; font-weight: 700; color: #16a34a; margin-bottom: 6px; }
.report-success-sub   { font-size: 13px; color: #6b7280; }
.btn-report-submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #dc2626;
    color: #fff;
    border: none;
    padding: 9px 20px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.btn-report-submit:hover    { background: #b91c1c; }
.btn-report-submit:disabled { opacity: .6; cursor: not-allowed; }

/* ── تنبيه البائع غير الموثق ── */
.seller-unverified-notice {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    padding: 16px 18px 16px 14px;
    margin: 28px auto 4px;
    max-width: 900px;
    direction: rtl;
}
.seller-unverified-notice .notice-icon {
    color: #d97706;
    flex-shrink: 0;
    margin-top: 2px;
}
.seller-unverified-notice strong {
    display: block;
    font-size: .88rem;
    font-weight: 700;
    color: #92400e;
    margin-bottom: 5px;
}
.seller-unverified-notice p {
    font-size: .84rem;
    color: #78350f;
    line-height: 1.7;
    margin: 0;
}
@media (max-width: 600px) {
    .seller-unverified-notice { margin: 20px 12px 4px; padding: 13px 14px; }
}

/* ==================== [SAFE-3] Error Message Popup ==================== */
.error-message-popup {
    position: fixed;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.5rem;
    background: var(--error);
    color: white;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 950;
    white-space: nowrap;
    max-width: calc(100vw - 2rem);
}

/* شاشات كبيرة: موضع عادي */
@media (min-width: 769px) {
    .error-message-popup { bottom: 2rem; }
}

/* [SAFE-3] هاتف: فوق الشريط الثابت وفوق النافبار */
@media (max-width: 768px) {
    .error-message-popup {
        bottom: calc(var(--navbar-bottom-height) + var(--sticky-bar-height) + 0.75rem);
    }
}

.error-message-popup.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Login Modal */
.modal-ovrfrm {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9000;
}

.modal-cont {
    background: white;
    padding: 28px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    max-width: 400px;
    width: 90%;
    text-align: center;
    animation: scaleIn 0.2s ease;
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

.modal-header h3 {
    margin: 0 0 14px 0;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 800;
}

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

.btn-cancel, .btn-login {
    padding: 10px 22px;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 700;
    transition: all var(--transition);
    font-family: inherit;
}

.btn-cancel {
    background: var(--secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn-cancel:hover { background: var(--secondary-hover); }

.btn-login {
    background: var(--primary);
    color: white;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.btn-login:hover { background: var(--primary-hover); transform: translateY(-1px); }

/* ==================== Image Modal ==================== */
.image-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.image-modal.active { display: flex; }

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(8px);
}

.modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    z-index: 1;
}

.modal-content img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--radius-xl);
    object-fit: contain;
    box-shadow: var(--shadow-lg);
}

.modal-close {
    position: absolute;
    top: -3.5rem;
    left: 0;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all var(--transition);
}

.modal-close:hover {
    background: rgba(255,255,255,0.22);
    transform: scale(1.1) rotate(90deg);
}

/* ==================== Responsive ==================== */
@media (max-width: 768px) {
    /* [FIX-DEAD-BOTTOM-GAP] كانت padding: 0.875rem (14px) متساوية بكل
       الجهات — الأسفل تحديداً كان آخر مصدر متبقٍ للفجوة بين "عرض معلومات
       التوصيل" و"منتجات مشابهة" (~58px، بعد تصفير margin-top الخاص بشبكة
       منتجات مشابهة). .product-page مُستخدمة فقط في هذه الصفحة (لا صفحة
       أخرى) فتقليص الأسفل تحديداً آمن هنا. */
    .product-page          { padding: 0.875rem 0.875rem 0.25rem; }
    .product-title        { font-size: 1.375rem; }
    .current-price        { font-size: 1.75rem; }
    .product-header       { padding: 1.125rem; }
    .seller-card          { padding: 1rem; }
    .quantity-section     { padding: 0.875rem 1rem; }
    .availability-section { padding: 0.75rem 1rem; }
}

@media (max-width: 480px) {
    .date-location-section { gap: 0.375rem; }
    .info-item { padding: 0.35rem 0.625rem; font-size: 0.75rem; }
    .detail-icon { width: 14px; height: 14px; }
    .attribute-option { padding: 0.5rem 0.875rem; font-size: 0.8rem; }
    .qty-btn   { width: 2.5rem; height: 2.5rem; }
    .qty-input { width: 3rem;   height: 2.5rem; }
}

@media print {
    .zoom-btn, .action-buttons,
    .sticky-action-bar { display: none; }
    .gallery-section { position: static; }
    .product-info-section { padding-bottom: 0; }
}
/* ── إحصائيات البائع القابلة للنقر ───────────────────────── */
a.stat {
    display: block;
    text-decoration: none;
    color: inherit;
}

.stat-accent {
    color: var(--primary);
}

.stat-clickable {
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.18s ease, transform 0.15s ease;
}
.stat-clickable:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
}
.stat-clickable:hover .stat-label,
.stat-clickable:hover .stat-value {
    color: var(--primary);
}

/* ── مودال اختيار المتجر ─────────────────────────────────── */
.store-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
    padding: 1rem;
}
.store-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.store-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(16px) scale(0.97);
    transition: transform 0.22s ease;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    direction: rtl;
}
.store-modal-overlay.active .store-modal {
    transform: translateY(0) scale(1);
}
.store-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--secondary);
}
.store-modal-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}
.store-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0.25rem;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    display: flex;
    align-items: center;
}
.store-modal-close:hover {
    color: var(--text-primary);
    background: var(--border);
}
.store-modal-body {
    padding: 1rem 1.25rem;
    overflow-y: auto;
}
.store-modal-hint {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    text-align: center;
}
.store-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.store-list-item { width: 100%; }
.store-list-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    transition: border-color 0.18s, background 0.18s, transform 0.15s;
}
.store-list-link:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    transform: translateX(-3px);
    color: var(--primary);
}
.store-list-icon {
    width: 32px;
    height: 32px;
    background: var(--primary-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
    transition: background 0.18s;
}
.store-list-link:hover .store-list-icon {
    background: var(--primary);
    color: #fff;
}
.store-list-name { flex: 1; }
.store-list-arrow {
    color: var(--text-muted);
    flex-shrink: 0;
    transition: color 0.15s;
}
.store-list-link:hover .store-list-arrow { color: var(--primary); }