/* assets/css/fixes.css - UPDATED */

/* ======================================================
   إصلاح مشكلة تجميد المودال عند الإغلاق
   ====================================================== */

.pd-overlay {
    z-index: 10000;
}

.pd-overlay:not(.open) {
    pointer-events: none !important;
}

.pd-overlay:not(.open) .pd-modal {
    pointer-events: none !important;
}

/* ======================================================
   ✅ تصحيح ترتيب المودال لـ RTL + إصلاح الجزء الفارغ
   ====================================================== */
.pd-modal {
    direction: rtl;
    grid-template-columns: 1fr 1fr;
    position: relative;
    align-items: stretch !important;  /* يمنع الفراغ في أي عمود */
}

.pd-gallery {
    border-radius: 28px 0 0 28px;
    order: 1;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* الصورة الرئيسية تملأ المتاح */
.pd-main-img {
    flex: 1 !important;
    min-height: 260px;
    cursor: default;
}

.pd-info {
    order: 2;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow-y: auto;
}

/* أزرار الطلب تبقى دائماً أسفل المعلومات */
.pd-action-btns {
    margin-top: auto !important;
    padding-top: 16px;
}

/* ── تحسين تبويبات المنتج ── */
.pd-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 2px solid rgba(106,191,75,0.15);
    padding-bottom: 0;
    flex-wrap: wrap;
}

.pd-tab {
    background: none;
    border: none;
    padding: 8px 14px;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all .2s;
}

.pd-tab.active, .pd-tab:hover {
    color: #2d7a3a;
    border-bottom-color: #6abf4b;
}

.pd-tab-content { display: none; }
.pd-tab-content.active { display: block; }

/* ======================================================
   تحسين نافذة المنتج العامة
   ====================================================== */
.pd-modal button,
.pd-modal a,
.pd-modal .pd-tab,
.pd-modal .pd-qty-btn,
.pd-modal .pd-add-cart,
.pd-modal .pd-order-btn,
.pd-modal .pd-close {
    pointer-events: auto !important;
    cursor: pointer;
    position: relative;
    z-index: 10001;
}

.pd-close {
    left: auto !important;
    right: 16px !important;
}

.pd-main-img {
    min-height: 280px;
    cursor: default;
}

.pd-thumb {
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
    position: relative;
}

.pd-thumb:hover {
    transform: scale(1.08);
    border-color: #6abf4b !important;
}

.pd-thumb.active {
    border: 2px solid #6abf4b !important;
    box-shadow: 0 0 12px rgba(106,191,75,0.35);
}

/* ══════════════════════════════════════════════════════
   السلة الجانبية — نظام متكامل لجميع الأجهزة
   يغلب على style.css وعلى كل media queries
══════════════════════════════════════════════════════ */

/* ── Overlay ── */
.cart-overlay {
    position:       fixed         !important;
    top:            0             !important;
    left:           0             !important;
    right:          0             !important;
    bottom:         0             !important;
    width:          100vw         !important;
    height:         100vh         !important;
    background:     rgba(0,0,0,.6)!important;
    z-index:        9998          !important;
    opacity:        0             !important;
    pointer-events: none          !important;
    transition:     opacity .3s   !important;
    display:        block         !important;
    transform:      none          !important;
    visibility:     visible       !important;
}
.cart-overlay.open {
    opacity:        1             !important;
    pointer-events: all           !important;
}

/* ── السلة مغلقة ── */
.cart-sidebar {
    position:       fixed                                !important;
    top:            0                                    !important;
    bottom:         0                                    !important;
    right:          -110vw                               !important;
    left:           auto                                 !important;
    width:          min(400px, 100vw)                    !important;
    max-width:      100vw                                !important;
    height:         100%                                 !important;
    background:     #ffffff                              !important;
    z-index:        9999                                 !important;
    transition:     right .35s cubic-bezier(.16,1,.3,1)  !important;
    display:        flex                                 !important;
    flex-direction: column                               !important;
    overflow:       hidden                               !important;
    transform:      none                                 !important;
    visibility:     visible                              !important;
    opacity:        1                                    !important;
    direction:      rtl                                  !important;
    box-shadow:     -4px 0 24px rgba(0,0,0,.25)          !important;
}

/* ── السلة مفتوحة ── */
.cart-sidebar.open {
    right: 0 !important;
}

/* ── إلغاء media queries المتعارضة ── */
@media screen and (max-width: 600px) {
    .cart-sidebar       { right: -110vw !important; width: 100vw !important; }
    .cart-sidebar.open  { right: 0      !important; }
}
@media screen and (max-width: 768px) {
    .cart-sidebar       { right: -110vw !important; width: 100vw !important; }
    .cart-sidebar.open  { right: 0      !important; }
}
@media screen and (max-width: 900px) {
    .cart-sidebar       { right: -110vw !important; width: 100vw !important; }
    .cart-sidebar.open  { right: 0      !important; }
}

/* ======================================================
   تحسين للأجهزة المحمولة
   ====================================================== */
@media (max-width: 768px) {
    .pd-modal {
        grid-template-columns: 1fr !important;
        direction: rtl;
        max-height: 95vh;
        border-radius: 20px;
    }

    .pd-gallery {
        border-radius: 20px 20px 0 0 !important;
        order: 1;
    }

    .pd-info {
        border-radius: 0 0 20px 20px;
        order: 2;
        padding: 20px 16px;
    }

    .pd-close {
        right: 12px !important;
        left: auto !important;
        top: 12px !important;
    }
}

/* ======================================================
   تحسين عرض الصور في بطاقات المنتجات
   ====================================================== */
.product-img {
    position: relative;
    overflow: hidden;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-img img {
    transition: transform 0.4s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-img:hover img {
    transform: scale(1.06);
}

/* ======================================================
   مؤشر التحميل
   ====================================================== */
.loading-spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid rgba(106,191,75,0.25);
    border-radius: 50%;
    border-top-color: #6abf4b;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ======================================================
   تحسين رسالة الكوبون
   ====================================================== */
.coupon-message {
    display: none;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
    line-height: 1.6;
}

.coupon-message.show {
    display: block;
}

.coupon-message.success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.coupon-message.error {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}