/* ==============================================
   14. Single Product Page
============================================== */

/* --- (الحل النهائي لمشكلة عرض 48%) --- */
/* 1. إلغاء قواعد ووكومرس الافتراضية (float و width 48%) */
.woocommerce div.product div.images,
.woocommerce #content div.product div.images,
.woocommerce-page div.product div.images,
.woocommerce-page #content div.product div.images {
    width: 100%; 
    float: none; 
    margin: 0;
}
/* --- (انتهى الحل) --- */


/* 2. تنسيق الحاوية الرئيسية للصفحة */
.single-product-container {
    padding-top: 80px;
    padding-bottom: 80px;
}

/* 3. حاوية التصميم الرئيسية */
.product-layout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 2rem;
    align-items: flex-start;
}

/* 4. (جديد) تنسيق معرض الصور (العمود الأيمن) */

/* --- (الحل لمشكلة الفراغ) --- */
.product-gallery-wrapper {
    position: sticky;
    top: 40px; /* مسافة من الهيدر عند اللصق */
    width: 100%;
}
/* --- (انتهى الحل) --- */

/* (مُعدّل) جعل حاوية ووكومرس تمتد 100% */
.product-layout-grid .product-gallery-wrapper .woocommerce-product-gallery {
    width: 100%; /* التأكد من أن الحاوية الرئيسية 100% */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    position: relative;
}

/* إجبار الصور داخل الحاوية على أخذ العرض الكامل */
.product-gallery-wrapper .woocommerce-product-gallery__wrapper,
.product-gallery-wrapper .woocommerce-product-gallery__image {
    width: 100%;
    margin: 0; /* إزالة أي هوامش افتراضية */
}

/* التأكد أن الصورة تملأ الحاوية */
.product-gallery-wrapper .woocommerce-product-gallery__image img {
    display: block;
    width: 100% !important; /* استخدام important لضمان التطبيق */
    height: auto;
}

/* تنسيق شارة التخفيض */
.product-gallery-wrapper .onsale {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--color-main);
    color: #fff;
    border-radius: 8px;
    padding: 5px 12px;
    font-weight: 600;
    z-index: 2;
}
html[dir="ltr"] .product-gallery-wrapper .onsale {
    right: auto;
    left: 20px;
}


/* 5. العمود الأيسر (الملخص) */
.product-summary-content {
    /* (ملاحظة: اتجاه النص الافتراضي RTL) */
    text-align: right;
}
html[dir="ltr"] .product-summary-content {
    text-align: left;
}

/* 6. تنسيق عناصر الملخص */
.product-summary-content .product_title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 10px;
}
.product-summary-content .woocommerce-product-rating {
    margin-bottom: 15px;
}
.product-summary-content .woocommerce-Price-amount {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-main);
}
.product-summary-content .price del {
    font-size: 1.2rem;
    color: #999;
}

/* تنسيق الوصف المختصر (ليأتي بعد الزر) */
.product-summary-content .woocommerce-product-details__short-description {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-description);
    margin-bottom: 20px;
    padding-top: 25px; /* إضافة مسافة علوية */
    border-top: 1px solid #eee; /* إضافة خط فاصل */
}

.product-summary-content .product_meta {
    margin-top: 20px;
    font-size: 0.9rem;
    color: #555;
    border-top: 1px solid #eee;
    padding-top: 15px;
}
.product-summary-content .product_meta > span {
    display: block;
    margin-bottom: 5px;
}

/* 7. تنسيق الكمية وزر "شراء الآن" (مُعدّل) */
.product-summary-content form.cart {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 0; /* (تمت إزالة الحشو) */
    border: none; /* (تمت إزالة الحدود) */
}

/* 7.1. تنسيق أزرار الكمية (+ / -) */
.quantity {
    display: flex;
    border: 2px solid var(--color-main);
    border-radius: 8px;
    overflow: hidden;
}
.quantity .qty {
    width: 60px;
    height: 48px;
    text-align: center;
    border: none;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text-dark);
    -moz-appearance: textfield; /* إخفاء أسهم المتصفح */
}
.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.quantity .plus,
.quantity .minus {
    width: 40px;
    height: 48px;
    background-color: #f7f7f7;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--color-main);
    line-height: 48px;
}
.quantity .plus:hover,
.quantity .minus:hover {
    background-color: #eee;
}
html[dir="rtl"] .quantity .plus { border-left: 1px solid #eee; }
html[dir="rtl"] .quantity .minus { border-right: 1px solid #eee; }
html[dir="ltr"] .quantity .plus { border-left: 1px solid #eee; }
html[dir="ltr"] .quantity .minus { border-right: 1px solid #eee; }


/* 7.2. تنسيق زر "شراء الآن" */
.single_add_to_cart_button {
    background-color: var(--color-main) !important;
    color: #fff !important;
    padding: 12px 30px !important;
    border-radius: 8px !important;
    font-weight: 700;
    font-size: 1rem !important;
    height: 52px;
    flex-grow: 1; /* يأخذ باقي المساحة */
    transition: background-color 0.3s ease;
}
.single_add_to_cart_button:hover {
    background-color: #335d1b !important;
}

/* 8. تنسيق ملخص التقييمات المخصص (جديد) */
.reviews-summary-section {
    margin-top: 3rem;
    border-top: 1px solid #eee;
    padding-top: 3rem;
    margin-bottom: 2rem;
}

/* 8.1. تنسيق العنوان (التقييمات + الأيقونة) */
.section-title-with-icon {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-main);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2.5rem;
    width: 100%;
    justify-content: center;
}
.section-title-with-icon .icon-leaf {
    width: 32px;
    height: 32px;
    background-color: var(--color-main);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 8C17 10.4142 15.4142 12 13 12C10.5858 12 9 10.4142 9 8C9 5.58579 10.5858 4 13 4C15.4142 4 17 5.58579 17 8Z' fill='white'/%3E%3Cpath d='M11 10C11 12.4142 12.5858 14 15 14C17.4142 14 19 12.4142 19 10C19 7.58579 17.4142 6 15 6C16.381 6 17.5 7 17.5 8.5C17.5 9.32843 16.8284 10 16 10C15.1716 10 14.5 9.32843 14.5 8.5C14.5 6.567 12.933 5 11 5C8.58579 5 7 6.58579 7 9C7 11.4142 8.58579 13 11 13C12.381 13 13.5 12 13.5 10.5C13.5 9.67157 12.8284 9 12 9C11.1716 9 10.5 9.67157 10.5 10.5L10.5 10.5L10.5 10.5C10.413 10.1581 10.609 9.8344 10.9501 9.7182C11.2913 9.602 11.666 9.7719 11.8217 10.1002L11.886 10.252C11.958 10.4072 11.9992 10.5834 12 10.7639V10.7639C12.0033 11.3162 11.5539 11.7624 11.0016 11.7591C10.4493 11.7558 10.0031 11.3064 10 10.7541L10 10.5C10 10.1686 10.1317 9.8522 10.3686 9.6152C10.6056 9.3782 10.922 9.2465 11.2535 9.2465H11.2535C11.585 9.2465 11.9014 9.3782 12.1384 9.6152C12.3754 9.8522 12.5071 10.1686 12.5071 10.5V10.5071C12.5071 11.0594 12.0594 11.5071 11.5071 11.5071C10.9548 11.5071 10.5071 11.0594 10.5071 10.5H10.5L11 10Z' fill='white'/%3E%3C/svg%3E") no-repeat center center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 8C17 10.4142 15.4142 12 13 12C10.5858 12 9 10.4142 9 8C9 5.58579 10.5858 4 13 4C15.4142 4 17 5.58579 17 8Z' fill='white'/%3E%3Cpath d='M11 10C11 12.4142 12.5858 14 15 14C17.4142 14 19 12.4142 19 10C19 7.58579 17.4142 6 15 6C16.381 6 17.5 7 17.5 8.5C17.5 9.32843 16.8284 10 16 10C15.1716 10 14.5 9.32843 14.5 8.5C14.5 6.567 12.933 5 11 5C8.58579 5 7 6.58579 7 9C7 11.4142 8.58579 13 11 13C12.381 13 13.5 12 13.5 10.5C13.5 9.67157 12.8284 9 12 9C11.1716 9 10.5 9.67157 10.5 10.5L10.5 10.5L10.5 10.5C10.413 10.1581 10.609 9.8344 10.9501 9.7182C11.2913 9.602 11.666 9.7719 11.8217 10.1002L11.886 10.252C11.958 10.4072 11.9992 10.5834 12 10.7639V10.7639C12.0033 11.3162 11.5539 11.7624 11.0016 11.7591C10.4493 11.7558 10.0031 11.3064 10 10.7541L10 10.5C10 10.1686 10.1317 9.8522 10.3686 9.6152C10.6056 9.3782 10.922 9.2465 11.2535 9.2465H11.2535C11.585 9.2465 11.9014 9.3782 12.1384 9.6152C12.3754 9.8522 12.5071 10.1686 12.5071 10.5V10.5071C12.5071 11.0594 12.0594 11.5071 11.5071 11.5071C10.9548 11.5071 10.5071 11.0594 10.5071 10.5H10.5L11 10Z' fill='white'/%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
}

/* 8.2. تنسيق حاوية العمودين */
.reviews-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    background: #fdfdfd;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 30px;
}

/* 8.3. العمود الأيسر (الأشرطة) */
.review-bar-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}
.review-bar-row .star-label {
    width: 60px;
    text-align: right;
    font-size: 0.9rem;
    color: var(--color-text-description);
}
.review-bar-container {
    flex-grow: 1;
    height: 10px;
    background-color: #f0f0f0;
    border-radius: 5px;
    overflow: hidden;
}
.review-bar-fill {
    height: 100%;
    background-color: var(--color-main);
    border-radius: 5px;
    transition: width 0.5s ease-in-out;
}
.review-bar-row .percent-label {
    width: 40px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-dark);
}

/* 8.4. العمود الأيمن (الملخص) */
.reviews-overall-column {
    text-align: center;
    padding-left: 20px;
    border-right: 1px solid #f0f0f0; /* هذا هو التنسيق في التصميم العربي RTL */
}
html[dir="ltr"] .reviews-overall-column {
    padding-right: 20px;
    padding-left: 0;
    border-right: none;
    border-left: 1px solid #f0f0f0;
}

.overall-rating-stars {
    font-size: 1.8rem;
    letter-spacing: 3px;
    margin-bottom: 5px;
}
.overall-rating-stars span {
    color: #e0e0e0; /* لون النجمة الفارغة */
}
.overall-rating-stars span:where(
    /* هذا يحدد النجوم الممتلئة بناءً على الكود الذي كتبناه */
    :not(:has(> span))
) {
    color: var(--color-main);
}
.overall-rating-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 15px;
}
.recommend-percent {
    font-size: 0.9rem;
    color: #333;
    font-weight: 500;
    margin-bottom: 5px;
}
.recommend-percent .icon-check {
    color: var(--color-main);
    font-weight: 700;
}
.total-reviews {
    font-size: 0.9rem;
    color: var(--color-text-description);
    margin-bottom: 15px;
}
.add-review-link {
    font-size: 1rem;
    color: var(--color-text-dark);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s;
}
.add-review-link:hover {
    color: var(--color-main);
}


/* 9. تنسيق قسم المراجعات (الذي نقلناه) */
.woocommerce-Tabs-panel--description {
    margin-top: 3rem;
    border-top: 1px solid #eee;
    padding-top: 2rem;
}
.woocommerce-Tabs-panel--description h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

#reviews {
    margin-top: 3rem;
    border-top: 1px solid #eee;
    padding-top: 2rem;
}
#reviews #comments h2,
#reviews #review_form_wrapper h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/* 10. تنسيق المنتجات ذات الصلة */

.related.products > h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 2.5rem;
    text-align: center;
}

/*
 * تم نسخ هذا الكود من 'shop-home.css' 
 * لتطبيقه على الكروت في هذه الصفحة
*/

/* * ملاحظة: تم حذف `.products-grid` من هنا 
 * لأننا سنقوم بتعريف `.related.products .products-grid`
 * بشكل منفصل لضمان عدم التعارض.
*/

.related.products .products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* (مُعدّل) 4 أعمدة */
    gap: 20px;
}

/* 🟩 تنسيق كارت المنتج */
.product-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.product-image-link {
    position: relative;
    display: block;
}
.product-image-link img {
    width: 100%;
    height: 240px; /* توحيد ارتفاع الصورة */
    object-fit: cover;
    display: block;
}

/* شارة التخفيض */
.product-sale-badge {
    position: absolute;
    top: 10px;
    background-color: var(--color-main);
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 1;
}
html[dir="rtl"] .product-sale-badge { left: 10px; }
html[dir="ltr"] .product-sale-badge { right: 10px; }


/* محتوى الكارت */
.product-card-content {
    padding: 1.2rem;
    flex-grow: 1; /* لجعل الزر في الأسفل دائماً */
    display: flex;
    flex-direction: column;
}
.product-category {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.product-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
}
.product-title a {
    text-decoration: none;
    color: var(--color-text-dark);
}
.product-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-main);
    margin-bottom: 15px;
}
.product-price ins {
    text-decoration: none;
}
.product-price del {
    font-size: 0.9rem;
    color: #999;
    margin-right: 5px;
}
.btn-read-more {
    margin-top: auto; /* يدفع الزر لأسفل الكارت */
    border: 2px solid var(--color-main);
    color: var(--color-main);
    padding: 8px 15px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}
.btn-read-more:hover {
    background-color: var(--color-main);
    color: #fff;
}
/* * (نهاية الكود المنسوخ) */


/* ==============================================
   11. تنسيق الموبايل
============================================== */

/* (جديد) تنسيق المنتجات ذات الصلة - للتابلت */
@media (max-width: 992px) {
    .related.products .products-grid {
        grid-template-columns: repeat(2, 1fr); /* عمودين فقط للتابلت */
    }
}

/* تنسيق الموبايل */
@media (max-width: 768px) {
    .product-layout-grid {
        grid-template-columns: 1fr; /* عمود واحد */
        gap: 30px;
    }
    /* إلغاء خاصية اللصق في الموبايل */
    .product-gallery-wrapper {
        position: static; 
        top: auto;
    }
    .product-summary-content {
        text-align: center;
    }
    .product-summary-content form.cart {
        flex-direction: column;
    }
    .quantity,
    .single_add_to_cart_button {
        width: 100%;
    }

    /* تنسيق المنتجات ذات الصلة - للموبايل */
    .related.products .products-grid {
        grid-template-columns: 1fr; /* عمود واحد للموبايل */
    }

    /* تنسيق ملخص التقييمات للموبايل */
    .reviews-summary-grid {
        grid-template-columns: 1fr; /* عمود واحد */
        gap: 30px;
        padding: 20px;
    }
    .reviews-overall-column {
        padding-left: 0;
        border-right: none;
        order: -1; /* وضع الملخص أولاً في الموبايل */
    }
    .review-bar-row .star-label {
        width: 50px; /* تصغير حجم النص */
    }
}