/* =======================================================
   تحديث تصميم صفحة إتمام الطلب (Noir Studios Style)
   ======================================================= */

/* 1. استدعاء خط Outfit العصري وتطبيقه على صفحة الدفع */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
    --checkout-form-bg: #ffffff !important;
    --body-text: #000000 !important
}

.checkout_form {
    background: var(--checkout-form-bg, #ffffff) !important;
}

.checkout_bg_left.checkout_bg_left {
    background: var(--checkout-form-bg, #ffffff) !important;
}

.checkout_form *, .checkout_order_summary *, .checkout_mobile_header * {
    font-family: 'Outfit', sans-serif !important;
}

/* 2. تحويل خلفية استمارة الدفع للون الأبيض النقي بدلاً من الرمادي الافتراضي */
.checkout_bg_left.checkout_bg_left,
.checkout_form,
.w-full.max-w-5xl {
    background-color: #ffffff !important;
}

/* 3. تصميم حقول الإدخال (Inputs) لتكون ناعمة وبحواف دائرية */
.checkout_form .global_input, 
.checkout_form .global_textarea, 
.product_form_checkout .global_input, 
.product_form_checkout .global_textarea,
.checkout_form .select__control {
    border-radius: 12px !important;
    background-color: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    color: #000 !important;
    padding: 14px 16px !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
}

/* إزالة الأيقونات القديمة من داخل الحقول لتصبح نظيفة وبسيطة */
.checkout_form input[name=full_name],
.checkout_form input[name=phone],
.checkout_form textarea[name=address1],
.checkout_form textarea[name=address],
.checkout_form input[name=city],
.checkout_form input[name=City] {
    background-image: none !important;
    padding-inline-start: 16px !important; /* إعادة ضبط المسافة بعد حذف الأيقونة */
}

/* تأثير عند الكتابة داخل الحقل (Focus) */
.checkout_form .global_input:focus, 
.checkout_form .global_textarea:focus,
.checkout_form .select__control:focus-within {
    background-color: #fff !important;
    border-color: #000 !important;
    box-shadow: 0 0 0 1px #000 !important;
    outline: none !important;
}

/* 4. زر إتمام الطلب (Pay Now) الأساسي - أسود، عريض، وحروف كبيرة */
.checkout_buy_now, 
.checkout_form button[type=submit], 
.form_checkout_btn,
div#checkout-mobile-submit button {
    border-radius: 12px !important;
    background-color: #000 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important;
    height: auto !important;
    padding: 18px !important;
    font-weight: 800 !important;
    transition: all 0.3s ease !important;
}

/* تأثير تحرك الزر لأعلى عند وقوف الماوس */
.checkout_buy_now:hover, 
.checkout_form button[type=submit]:hover {
    background-color: #1a1a1a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
    opacity: 1 !important;
}

/* 5. قسم ملخص الطلب (Order Summary) - فصله في بطاقة رمادية ناعمة */
.checkout_bg_right.checkout_bg_right, 
.checkout_order_summary.checkout_order_summary {
    background-color: #ffffff !important;
    border-radius: 24px !important;
    border: 1px solid #e5e7eb !important;
    padding: 24px !important;
    margin: 20px auto !important; /* مساحة للتنفس حول القسم */
    max-width: 93% !important;
}

@media (min-width: 1024px) {
    /* تعديل الهامش في الشاشات الكبيرة لملخص الطلب */
    .checkout_bg_right.checkout_bg_right, 
    .checkout_order_summary.checkout_order_summary {
        margin: 30px !important;
    }
}

/* 6. كروت خيارات الشحن والدفع لتطابق الحواف الدائرية */
button.shipping_option_card,
.checkout_form .payment_card {
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    background-color: #fff !important;
    transition: all 0.3s ease !important;
}

/* 7. تغيير ألوان التحديد (Radio buttons) والإطارات للأزرار النشطة من الأزرق للأسود */
.checkout_form .radio_circle.bg-blue-500,
.radio_circle.\!bg-black {
    background-color: #000 !important;
}

.checkout_form .payment_card.border-blue-600,
.shipping_option_card:has(.bg-blue-500) {
    border-color: #000 !important;
    box-shadow: 0 0 0 1px #000 !important;
}


/* =======================================================
   تصميم ملخص الطلب المتطابق مع Noir Studios
   ======================================================= */

/* 1. الحاوية الرئيسية لملخص الطلب */
.checkout_order_summary,
div#checkout-order-summary-content {
    background-color: #f9fafb !important; /* لون خلفية رمادي فاتح جداً */
    border: 1px solid #e5e7eb !important;
    border-radius: 24px !important;
    padding: 24px !important;
}

/* =======================================================
   تعديل: تكبير عنوان Order Summary بقوة إجبارية
   ======================================================= */

/* استخدام تسلسل طويل جداً للتغلب على كود المنصة الأصلي */
html body section.checkout_order_summary h2,
html body div.checkout_order_summary h2 {
    font-size: 28px !important; /* تكبير الخط بشكل ملحوظ، يمكنك زيادة الرقم إذا أردت */
    font-weight: 900 !important; /* جعله عريضاً جداً وبارزاً */
    color: #000000 !important; /* أسود نقي */
    letter-spacing: -0.02em !important; /* تقليل المسافة بين الحروف قليلاً ليعطي طابع عصري */
    margin-bottom: 24px !important; /* إضافة مسافة مريحة بين العنوان وأول كارت منتج */
}

/* 2. إزالة الحدود الافتراضية لقائمة المنتجات */
.checkout_cart_items_container {
    border: none !important;
    margin-bottom: 24px !important;
}

/* 3. كارت المنتج الواحد داخل السلة */
ul.checkout_cart_items_container li.cart-item {
    background-color: #ffffff !important; /* كارت أبيض نقي */
    border: 1px solid #f3f4f6 !important;
    border-radius: 16px !important;
    padding: 14px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

/* 4. حاوية صورة المنتج */
.cart-item .h-24.w-24 {
    width: 80px !important;
    height: 80px !important;
    border-radius: 12px !important;
    border: none !important;
    background-color: #ffffff !important;
    flex-shrink: 0 !important;
}

/* 5. اسم المنتج (عريض وحروف كبيرة) */
.cart-item h3, 
.cart-item h3 a {
    font-weight: 800 !important;
    font-size: 14px !important;
    color: #111827 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    margin-bottom: 4px !important;
}

/* 6. تفاصيل المنتج الفرعية (اللون والمقاس) */
.cart-item p.text-sm.text-gray-500,
.cart-item p.mt-1.flex.items-center.text-sm.text-gray-500 {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

/* 7. سعر المنتج الفردي */
.cart-item p.font-medium,
.cart-item .text-base.font-medium {
    font-weight: 800 !important;
    color: #000000 !important;
    margin-top: 8px !important;
    font-size: 14px !important;
}

/* 8. قسم الحسابات (المجموع الفرعي والشحن) */
dl.space-y-6.border-t {
    border-top: 1px solid #e5e7eb !important;
    padding-top: 25px !important;
    color: #4b5563 !important;
}

dl.space-y-6 dt {
    font-weight: 500 !important;
    font-size: 14px !important;
}

dl.space-y-6 dd {
    font-weight: 800 !important;
    color: #000 !important;
    font-size: 14px !important;
}

/* تنسيق كلمة Free (مجانًا) للشحن إن وجدت لتكون داخل بادج أسود خفيف */
dd.shipping_cost.font-bold {
    background-color: rgba(0,0,0,0.05) !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* 9. الإجمالي النهائي (Total Row) */
.flex.items-center.justify-between.border-t.border-gray-200.pt-6 {
    border-top: 1px solid #e5e7eb !important;
    margin-top: 24px !important;
    padding-top: 24px !important;
    align-items: flex-end !important;
}

/* كلمة Total */
.flex.items-center.justify-between.border-t.border-gray-200.pt-6 dt {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #000 !important;
}


/* السعر النهائي الضخم */
.flex.items-center.justify-between.border-t.border-gray-200.pt-6 dd {
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #000 !important;
    letter-spacing: -0.02em !important;
}

@media (min-width: 1024px) {
    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
        background-color: #fff !important;
    }
}

html body .checkout_form {
    background: #ffffff !important;
    margin-top: -35px !important;
}


/* =======================================================
   تنسيق مساحات قسم ملخص الطلب (Order Summary) النهائي
   ======================================================= */
 @media (min-width: 1024px) {
    html body section.checkout_order_summary.checkout_order_summary,
    html body div.checkout_order_summary.checkout_order_summary {
        /* 1. ملموم على قد المحتوى لإنهاء مشكلة التمدد */
        align-self: flex-start !important;
        height: fit-content !important;

        /* 2. الإزاحة المبدئية: تزق الصندوق لتحت عشان يتساوى مع أول حقل في الفورم */
        margin-top: 74px !important; 

        /* 3. التثبيت الذكي: يلزق في الشاشة لما العميل يعمل سكرول */      
        position: sticky !important;
        top: 110px !important; 
        z-index: 0 !important;
    }
}

/* =======================================================
   إخفاء الفوتر في صفحة الدفع فقط لمنع التشتت (Distraction-Free Checkout)
   ======================================================= */
html body:has(.checkout_form) footer,
html body:has(.checkout_form) .footer-container,
html body:has(.checkout_form) [data-section="footer"],
html body:has(.checkout_form) .store-footer {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}


/* =======================================================
   إعادة ترتيب عناصر كارت المنتج (النسخة المصححة)
   ======================================================= */

/* 1. إعداد الكارت ليكون حاوية حرة لاحتواء العناصر ونقلها */
ul.checkout_cart_items_container li.cart-item {
    position: relative !important;
    padding-bottom: 65px !important; /* مساحة فارغة بالأسفل لاحتواء السعر والكمية */
    min-height: 145px !important; /* ضمان ارتفاع مناسب للكارت */
}

/* 2. إرجاع حاوية العنوان لمكانها الطبيعي في الأعلى (إلغاء التموضع الخاطئ) */
ul.checkout_cart_items_container li.cart-item .flex.justify-between.text-base.font-medium {
    position: static !important;
}

/* 3. استهداف "السعر الفردي فقط" ونقله لأسفل الكارت (بمحاذاة النصوص) */
ul.checkout_cart_items_container li.cart-item .flex.justify-between.text-base.font-medium > p {
    position: absolute !important;
    bottom: 11px !important; /* محاذاة في المنتصف مع أزرار الكمية */
    left: 107px !important; /* 110 بيكسل لبدء السعر من نفس خط النصوص بالضبط */
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #000 !important;
}

/* 4. نقل زر الحذف (X) إلى أعلى اليمين */
ul.checkout_cart_items_container li.cart-item .custom-trash-btn {
    position: absolute !important;
    top: 2px !important;
    right: 5px !important;
    margin: 0 !important;
    padding: 8px !important;
    z-index: 10 !important;
}

/* 5. نقل أزرار الكمية إلى أسفل اليمين */
ul.checkout_cart_items_container li.cart-item .qty-box-wrapper {
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important;
    margin: 0 !important;
    z-index: 10 !important;
}

.qty-box-wrapper {
    display: inline-flex;
    align-items: center;
    border: 1px solid #dedede;
    border-radius: 10px !important;
    height: 30px !important;
    overflow: hidden;
    color: #151515;
    width: 90px !important;
}

/* =======================================================
   تعديل: تكبير علامات ( + و - ) بقوة إجبارية
   ======================================================= */

/* استهداف أيقونات SVG وتكبيرها باستخدام خدعة الـ Scale */
html body .checkout_order_summary ul.checkout_cart_items_container li.cart-item .qty-box-wrapper button svg {
    transform: scale(1.5) !important; /* هذه الخاصية ستكبر الأيقونة بنسبة 40% إجبارياً */
    stroke-width: 2.5px !important; 
    color: #000 !important;
}

/* في حالة كانت العلامات نصوص عادية وليست أيقونات */
html body .checkout_order_summary ul.checkout_cart_items_container li.cart-item .qty-box-wrapper button {
    font-size: 24px !important; 
    font-weight: 900 !important;
    color: #000 !important;
}


/* =======================================================
   تعديل: دمج المقاس والاستايل في سطر واحد لتقليل الارتفاع
   ======================================================= */

/* 1. تحويل الحاوية التي تضم العنوان والتفاصيل إلى وضع أفقي (Row Wrap) */
ul.checkout_cart_items_container li.cart-item .flex-1.flex-col,
ul.checkout_cart_items_container li.cart-item .flex.flex-col.gap-3 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important; /* 4px مسافة رأسية، و 8px مسافة أفقية بين المقاس والاستايل */
    align-items: center !important;
    align-content: flex-start !important;
}

/* 2. إجبار اسم المنتج (العنوان) على أخذ سطر كامل بمفرده */
ul.checkout_cart_items_container li.cart-item h3 {
    width: 100% !important;
    margin-bottom: -5px !important;
}

/* 3. ضبط نصوص التفاصيل (المقاس، الاستايل، المجموع الفرعي) لتتجاور */
ul.checkout_cart_items_container li.cart-item p.text-sm.text-gray-500,
ul.checkout_cart_items_container li.cart-item p.mt-1.flex.items-center.text-sm.text-gray-500 {
    width: auto !important; /* يأخذ مساحة الكلمة فقط */
    margin: 0 !important;
    display: inline-flex !important;
}

/* 4. إضافة فاصل جمالي ( | ) بين المقاس والاستايل */
ul.checkout_cart_items_container li.cart-item p.text-sm.text-gray-500:not(:last-of-type)::after,
ul.checkout_cart_items_container li.cart-item p.mt-1.flex.items-center.text-sm.text-gray-500:not(:last-of-type)::after {
    content: " | " !important;
    margin-left: -1px !important;
    color: #d1d5db !important;
    font-weight: 300 !important;
    margin-right: 5px !important;
}

/* 5. تقليل الارتفاع الإضافي للكارت لأننا وفرنا مساحة السطور */
ul.checkout_cart_items_container li.cart-item {
    padding-bottom: 50px !important; /* تقليل المساحة السفلية من 65 إلى 45 */
    min-height: 110px !important;    /* تقليل الحد الأدنى للارتفاع من 145 إلى 110 */
}

/* =======================================================
   تعديلات نهائية: لون الـ X، إخفاء Total الفرعي، وتوسيط الصورة
   ======================================================= */

/* 1. تغيير لون علامة X (الحذف) */
/* ملحوظة: يمكنك تغيير اللون #9ca3af إلى أي كود لون تريده (مثلاً #000000 للأسود) */
ul.checkout_cart_items_container li.cart-item .custom-trash-btn::before {
    background-color: #9ca3af !important; /* لون رمادي هادئ وأنيق */
}

ul.checkout_cart_items_container li.cart-item .custom-trash-btn:hover::before {
    background-color: #ff3333 !important; /* لون أحمر عند وقوف الماوس كتحذير للحذف */
}

.flex.flex-1.flex-col.gap-3.text-sm p.text-gray-500.flex.items-center.gap-0\.5, 
span.shipping_option_card_description.w-fit.text-sm.text-gray-500 {
    font-size: 12px;
    display: none !important;
}

/* إزالة الفاصل الجمالي ( | ) من نهاية السطر الثاني (الاستايل) لعدم وجود عنصر بعده */
ul.checkout_cart_items_container li.cart-item p.text-sm.text-gray-500:nth-of-type(2)::after,
ul.checkout_cart_items_container li.cart-item p.mt-1.flex.items-center.text-sm.text-gray-500:nth-of-type(2)::after {
    content: none !important;
    display: none !important;
}

/* 3. جعل صورة المنتج في منتصف الكارت الأبيض تماماً (عمودياً) */
ul.checkout_cart_items_container li.cart-item {
    padding-left: 90px !important; /* إزاحة النصوص لليمين لترك مساحة للصورة الحرة */
}

ul.checkout_cart_items_container li.cart-item .h-24.w-24 {
    position: absolute !important;
    left: 14px !important; /* تثبيت الصورة على يسار الكارت */
    top: 50% !important; /* النزول لمنتصف الكارت */
    transform: translateY(-50%) !important; /* ضبط التمركز ليكون في المنتصف بالمللي */
    margin: 0 !important;
}

/* =======================================================
   إزالة الإطار الأزرق الافتراضي (Tailwind Ring) من جميع الحقول
   ======================================================= */
html body input:focus,
html body textarea:focus,
html body select:focus,
html body [type="text"]:focus,
html body [type="email"]:focus,
html body [type="tel"]:focus,
html body .global_input:focus {
    --tw-ring-color: transparent !important; /* إخفاء اللون الأزرق الخاص بـ Tailwind */
    --tw-ring-shadow: none !important; /* إخفاء الظل الأزرق */
    box-shadow: none !important; /* إجبار المتصفح على إخفاء أي ظلال أخرى */
    border-color: #000000 !important; /* تحويل لون الإطار إلى الأسود النقي */
    outline: none !important; /* إزالة أي إطار خارجي إضافي */
}

/* =======================================================
   تحسين منطقة إدخال كود الخصم (عن طريق استهداف الحاوية الذكية)
   ======================================================= */

/* 1. استهداف الحاوية (الـ Div) التي تضم حقل الخصم وتحويلها لكارت أبيض */
html body .checkout_order_summary div[class*="flex"]:has(input[type="text"]),
html body .checkout_order_summary div[class*="flex"]:has(input.global_input) {
    background-color: #ffffff !important;
    margin: -10px 0px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    align-items: flex-end !important;
    height: auto !important;
}

/* 2. استهداف حقل الإدخال نفسه */
html body .checkout_order_summary input[type="text"],
html body .checkout_order_summary input.global_input {
    flex: 1 !important; /* يتمدد ليأخذ المساحة المتاحة فقط */
    border: 2px solid #e5e7eb !important;
    border-radius: 12px !important;
    background-color: #f9fafb !important;
    height: 48px !important;
    padding: 0 15px !important;
    font-size: 14px !important;
    color: #000 !important;
    text-transform: uppercase !important; /* تحويل الحروف المكتوبة لـ Capital */
    margin: 0 !important;
    box-shadow: none !important;
}

/* تأثير الفوكس لحقل الخصم */
html body .checkout_order_summary input[type="text"]:focus,
html body .checkout_order_summary input.global_input:focus {
    border-color: #000 !important;
    background-color: #fff !important;
}

/* 3. استهداف زر تطبيق الكوبون (Apply) المجاور له */
html body .checkout_order_summary div[class*="flex"]:has(input[type="text"]) button,
html body .checkout_order_summary div[class*="flex"]:has(input.global_input) button {
    background-color: #000 !important;
    color: #fff !important;
    border-radius: 12px !important;
    height: 48px !important;
    padding: 0 63px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    border: none !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
}

/* تأثير تحرك الزر لأعلى عند وقوف الماوس */
html body .checkout_order_summary div[class*="flex"]:has(input[type="text"]) button:hover,
html body .checkout_order_summary div[class*="flex"]:has(input.global_input) button:hover {
    background-color: #1a1a1a !important;
}

/* =======================================================
   إصلاح المحاذاة العمودية لزر تطبيق الكوبون مع الحقل
   ======================================================= */

/* التأكد من توسيط الحقل والزر معاً وإلغاء أي هوامش مخفية */
html body .checkout_order_summary div[class*="flex"]:has(input[type="text"]) button,
html body .checkout_order_summary div[class*="flex"]:has(input.global_input) button {
    align-self: center !important; /* إجبار الزر على التمركز في المنتصف عمودياً */
    margin-top: 22px !important;      /* تصفير الهامش العلوي */
    margin-bottom: 0 !important;   /* تصفير الهامش السفلي */
    display: inline-flex !important; 
    align-items: center !important;
    justify-content: center !important;
}

html body .checkout_order_summary div[class*="flex"]:has(input[type="text"]) input,
html body .checkout_order_summary div[class*="flex"]:has(input.global_input) input {
    align-self: center !important; /* إجبار الحقل على التمركز في المنتصف عمودياً */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* =======================================================
   تحسين منطقة "هل لديك كود خصم؟" (مع فصل زر التطبيق)
   ======================================================= */

/* 1. استهداف الحاوية فقط (قبل ظهور حقل الإدخال) */
html body .checkout_order_summary dl[data-invoice="invoice"] > div:not([data-invoice]) > div.mt-2.flex.justify-between:not(:has(input)) {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 20px !important;
    background-color: #ffffff !important;
    border: 1.5px dashed #d1d5db !important; /* إطار متقطع */
    border-radius: 12px !important;
    margin: 20px 0 !important;
    margin-bottom: -10px !important;
}

/* 2. تنسيق النص "Do you have coupon code?" */
html body .checkout_order_summary dl[data-invoice="invoice"] > div:not([data-invoice]) > div.mt-2.flex.justify-between:not(:has(input)) > p {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #4b5563 !important;
    margin: 0 !important;
}

/* 3. تنسيق زر "Enter Coupon" (قبل ظهول حقل الإدخال فقط) */
html body .checkout_order_summary dl[data-invoice="invoice"] > div:not([data-invoice]) > div.mt-2.flex.justify-between:not(:has(input)) > button {
    background-color: #000000 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
    letter-spacing: 0.05em !important;
    border: none !important;
    min-height: 36px !important;
    height: auto !important;
    transition: all 0.3s ease !important;
}

/* 4. تأثير تحرك زر الكوبون لأعلى عند وقوف الماوس */
html body .checkout_order_summary dl[data-invoice="invoice"] > div:not([data-invoice]) > div.mt-2.flex.justify-between:not(:has(input)) > button:hover {
    background-color: #000000 !important;
    transform: translateY(0px) !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.1) !important;
}

/* =======================================================
   نقل حاوية الكوبون لتصبح تحت المنتجات مباشرة
   ======================================================= */

/* 1. تفعيل نظام الـ Flex على حاوية الفاتورة الأساسية */
.checkout_order_summary dl[data-invoice="invoice"] {
    display: flex !important;
    flex-direction: column !important;
}

/* 2. إعطاء حاوية الكوبون ترتيب (Order) سالب لتصعد للأعلى مباشرة تحت المنتجات */
.checkout_order_summary dl[data-invoice="invoice"] > div:has(button[type="button"]) {
    order: -1 !important;
    margin-bottom: 45px !important;
    margin-top: -15px !important;
}

/* =======================================================
   تقنية الزر الوكيل (إخفاء الأصلي وتنسيق الجديد)
   ======================================================= */

/* 1. إخفاء الزر الأصلي (وحاويته السفلية في الموبايل) تماماً */
html body button.checkout_buy_now {
    display: none !important;
}

html body div:has(> button.checkout_buy_now),
html body div.fixed.bottom-0:has(.checkout_buy_now) {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* 2. تنسيق الزر الوكيل (الجديد) أسفل الإجمالي */
#custom-proxy-buy-btn {
    width: 100% !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 18px !important;
    border-radius: 12px !important;
    border: none !important;
    margin-top: 24px !important;
    margin-bottom: 0px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    font-family: 'Outfit', sans-serif !important;
}

/* تأثير تحرك الزر عند وقوف الماوس */
#custom-proxy-buy-btn:hover {
    background-color: #1a1a1a !important;
    transform: translateY(-2px) !important;
}

/* =======================================================
   تغيير ترتيب ملخص الطلب ليصبح أسفل نموذج البيانات (للموبايل)
   ======================================================= */

/* نستخدم Media Query لتطبيق هذا الترتيب على الموبايل والتابلت فقط، 
   لأن الشاشات الكبيرة (الكمبيوتر) تعرضهم جنباً إلى جنب بشكل ممتاز أصلاً */
@media (max-width: 1023px) {
    
    /* 1. جعل نموذج إدخال البيانات (الفورم) في الأعلى */
    html body form.checkout_form {
        order: 1 !important;
        margin-bottom: -200px !important; /* مسافة جمالية بين الفورم والملخص */
    }

    /* 2. نقل حاوية ملخص الطلب (بالزرار اللي جواها) إلى الأسفل */
    html body section.checkout_order_summary {
        order: 2 !important;
    }
}

.checkout_form label, .product_form_checkout label {
    font-size: 0px !important;
    font-weight: 500 !important;
    color: rgb(from var(--checkout-heading-text, #151515) r g b / .8) !important;
    margin-bottom: 0px !important;
    text-transform: capitalize !important;
    letter-spacing: .04em !important;
}

/* =======================================================
   التصميم النهائي للفورم (النسخة المدمرة لحماية المنصة)
   ======================================================= */

/* 1. الخريطة الهندسية */
html body form.checkout_form section.contact-info-heading {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
        "contact_title contact_title"
        "email email"
        "phone phone_alt" 
        "shipping_title shipping_title" 
        "gov gov"
        "name name"
        "address address" 
        "city city" !important; 
    gap: 14px !important;
    width: 100% !important;
    margin: 0 !important;
}

/* 1. الخريطة الهندسية */
@media (min-width: 1024px) {
    html body form.checkout_form section.contact-info-heading {
        width: 115% !important;
    }
}

html body form.checkout_form section.contact-info-heading > div {
    margin: 0 !important;
    width: 100% !important;
    display: block !important;
    position: relative !important;
}

/* 2. توزيع الحقول على الخريطة */
html body form.checkout_form section.contact-info-heading > h2#contact-info-heading { grid-area: contact_title !important; margin: 0 0 4px 0 !important; }
html body form.checkout_form section.contact-info-heading > div:has([name="email" i]) { grid-area: email !important; }
html body form.checkout_form section.contact-info-heading > div:has([name="phone" i]) { grid-area: phone !important; }
html body form.checkout_form section.contact-info-heading > div:has([name="phone_alt" i]) { grid-area: phone_alt !important; }

html body form.checkout_form section.contact-info-heading > h2#genx-shipping-title { grid-area: shipping_title !important; margin: 16px 0 4px 0 !important; }
html body form.checkout_form section.contact-info-heading > div:has([name="government" i]) { grid-area: gov !important; }
html body form.checkout_form section.contact-info-heading > div:has([name="full_name" i]) { grid-area: name !important; }
html body form.checkout_form section.contact-info-heading > div:has([name="address" i]) { grid-area: address !important; }
html body form.checkout_form section.contact-info-heading > div:has([name="country" i]) { grid-area: city !important; }

/* إخفاء الزر القديم */
html body form.checkout_form section.contact-info-heading > div:has(button[type="submit"]),
html body form.checkout_form section.contact-info-heading > div.fixed { display: none !important; }

/* =======================================================
   3. الإبادة الشاملة للأيقونات (حتى المخفية منها)
   ======================================================= */
html body form.checkout_form section.contact-info-heading div > svg,
html body form.checkout_form section.contact-info-heading div > img,
html body form.checkout_form section.contact-info-heading div > i,
html body form.checkout_form section.contact-info-heading div::before,
html body form.checkout_form section.contact-info-heading div::after {
    display: none !important;
    background-image: none !important;
}

/* تصميم العناوين */
html body form.checkout_form section.contact-info-heading > h2 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #000000 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important; 
}

/* =======================================================
   4. التصميم البصري والمقاسات (بأقصى قوة استهداف)
   ======================================================= */

/* الحقول والنصوص (في الحالة العادية) */
html body form.checkout_form section.contact-info-heading input,
html body form.checkout_form section.contact-info-heading textarea,
html body form.checkout_form section.contact-info-heading .global_input,
html body form.checkout_form section.contact-info-heading .global_textarea {
    background: #ffffff !important; /* يقتل أي خلفية أو أيقونة فوراً */
    border: 1px solid #d9d9d9 !important;
    border-radius: 12px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    color: #000000 !important;
    height: 48px !important;
    min-height: 55px !important;
    max-height: 48px !important; 
    padding: 0 14px !important; 
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: -5px !important;
}

/* الحقول (عند الضغط عليها Focus أو Active) - منع ظهور الأيقونات مجدداً */
html body form.checkout_form section.contact-info-heading input:focus,
html body form.checkout_form section.contact-info-heading textarea:focus,
html body form.checkout_form section.contact-info-heading input:active,
html body form.checkout_form section.contact-info-heading textarea:active,
html body form.checkout_form section.contact-info-heading .global_input:focus,
html body form.checkout_form section.contact-info-heading .global_textarea:focus {
    background: #ffffff !important; /* تأكيد قتل الأيقونات عند الكتابة */
    border-color: #000000 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #000000 !important;
}

/* تعديل حقل العنوان (Textarea) ليكون سطراً واحداً تماماً كالإيميل */
html body form.checkout_form section.contact-info-heading textarea,
html body form.checkout_form section.contact-info-heading .global_textarea {
    padding-top: 14px !important; 
    padding-bottom: 0 !important;
    resize: none !important; 
    white-space: nowrap !important; /* منع نزول سطر جديد */
    overflow: hidden !important; 
    line-height: 20px !important;
}

/* =======================================================
   5. سحر حقل المحافظة (Select) والسهم الجديد
   ======================================================= */
html body form.checkout_form section.contact-info-heading select,
html body form.checkout_form section.contact-info-heading select:focus,
html body form.checkout_form section.contact-info-heading select:active {
    /* دمج لون الخلفية مع سهم الـ SVG في كود واحد لفرض السيطرة */
    background: #ffffff url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") no-repeat right 14px center !important;
    background-size: 16px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 8px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    color: #000000 !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important; 
    padding: 0 35px 0 14px !important; 
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 4px !important;
    cursor: pointer !important;
}

html body form.checkout_form section.contact-info-heading select:focus {
    border-color: #000000 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #000000 !important;
}

/* 6. استجابة الموبايل */
@media (max-width: 640px) {
    html body form.checkout_form section.contact-info-heading {
        grid-template-areas:
            "contact_title contact_title"
            "email email"
            "phone phone"
            "phone_alt phone_alt"
            "shipping_title shipping_title"
            "gov gov"
            "name name"
            "address address"
            "city city" !important;
    }
}

/* =======================================================
   6. تنسيق نصوص الـ Placeholder (لون رمادي فاتح وخط سميك قليلاً)
   ======================================================= */

html body form.checkout_form section.contact-info-heading input::placeholder,
html body form.checkout_form section.contact-info-heading textarea::placeholder,
html body form.checkout_form section.contact-info-heading .global_input::placeholder,
html body form.checkout_form section.contact-info-heading .global_textarea::placeholder {
    color: #9ca3af !important; /* لون رمادي فاتح وأنيق */
    font-weight: 500 !important; /* خط سميك قليلاً (Medium) */
    opacity: 1 !important; /* لإجبار فايرفوكس والآيفون على عرض اللون بوضوح */
}

/* لدعم متصفحات سفاري وجوجل كروم */
html body form.checkout_form section.contact-info-heading input::-webkit-input-placeholder,
html body form.checkout_form section.contact-info-heading textarea::-webkit-input-placeholder {
    color: #9ca3af !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

/* لدعم متصفح فايرفوكس */
html body form.checkout_form section.contact-info-heading input::-moz-placeholder,
html body form.checkout_form section.contact-info-heading textarea::-moz-placeholder {
    color: #9ca3af !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

/* =======================================================
   7. ترويض حقل المحافظة المعقد (React Select) - النسخة القاضية
   ======================================================= */

/* تأكيد مكان حقل المحافظة في خريطة الجريد */
html body form.checkout_form section.contact-info-heading > div:has(.gov_select) { 
    grid-area: gov !important; 
    display: block !important;
}

/* تصميم الحاوية الرئيسية للحقل لتطابق باقي الحقول (48px) */
html body form.checkout_form section.contact-info-heading .select__control {
    background-color: #ffffff !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 12px !important;
    height: 48px !important;
    min-height: 55px !important;
    box-shadow: none !important;
    padding: 0 !important; 
    cursor: pointer !important;
    
    /* السهم المينيمال بتاعنا */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px !important;
}

/* إخفاء سهم المنصة الافتراضي والخط الفاصل */
html body form.checkout_form section.contact-info-heading .select__indicators,
html body form.checkout_form section.contact-info-heading .select__indicator-separator {
    display: none !important;
}

/* الضربة القاضية للأيقونة القديمة والفراغ الذي تتركه */
html body form.checkout_form section.contact-info-heading .select__control .select__value-container,
html body form.checkout_form section.contact-info-heading div[class*="select__value-container"] {
    background-image: none !important; /* إبادة الأيقونة */
    padding: 0 14px !important; /* تظبيط المسافات */
    padding-inline-start: 14px !important; /* التغلب على الكلاس المخفي css-hlgwow */
    height: 100% !important;
}

/* تصميم الـ Placeholder */
html body form.checkout_form section.contact-info-heading .select__placeholder {
    color: #9ca3af !important;
    font-weight: 500 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    margin: 0 !important;
}

/* تصميم النص بعد اختيار المحافظة */
html body form.checkout_form section.contact-info-heading .select__single-value {
    color: #000000 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin: 0 !important;
}

/* تأثير التفاعل (Focus) */
html body form.checkout_form section.contact-info-heading .select__control--is-focused,
html body form.checkout_form section.contact-info-heading .select__control:focus-within {
    border-color: #000000 !important;
    box-shadow: 0 0 0 1px #000000 !important;
}

/* =======================================================
   8. إصلاح حقل العنوان (لون رمادي فاتح بدون الشريط الأبيض)
   ======================================================= */

/* تفريغ خلفية الحاوية الخارجية تماماً لمنع تداخل الألوان */
html body form.checkout_form section.contact-info-heading div:has(textarea),
html body form.checkout_form section.contact-info-heading div:has(.global_textarea) {
    background: transparent !important;
    padding: 0 !important;
}

/* تصميم حقل العنوان ليكون رمادي فاتح كقطعة واحدة */
html body form.checkout_form section.contact-info-heading textarea,
html body form.checkout_form section.contact-info-heading .global_textarea {
    background-color: #ffffff !important; /* اللون الرمادي الفاتح المطابق لباقي الحقول */
    background-clip: border-box !important; /* منع ظهور أي خطوط بيضاء داخلية */
    -webkit-appearance: none !important;
    appearance: none !important;
    height: 48px !important;
    min-height: 55px !important;
    max-height: 48px !important;
    padding: 13px 14px !important; /* توسيط النص تماماً في المنتصف */
    resize: none !important; 
    overflow: hidden !important; 
    white-space: nowrap !important; 
    display: block !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    align-content: center !important;
}

/* تحويل لون الحقل للأبيض النقي عند الضغط عليه (Focus) */
html body form.checkout_form section.contact-info-heading textarea:focus,
html body form.checkout_form section.contact-info-heading .global_textarea:focus {
    background-color: #ffffff !important;
    border-color: #000000 !important;
}

/*==========================================================================================
============================================================================================*/

/* =======================================================
   تنسيق الصور المصغرة للمنتجات (إزالة الإطارات تماماً)
   ======================================================= */

/* 1. إزالة الإطار الرمادي في الحالة العادية */
html body div[class*="product"] button:has(img),
html body div[class*="product"] div[class*="flex"] > div:has(> img),
html body [class*="variant"],
html body [class*="swatch"],
html body [class*="thumbnail"],
html body [class*="gallery"] {
    box-shadow: none !important;
    outline: none !important;
}

/* 2. إزالة الإطار عند مرور الماوس (Hover) أو عند تحديد اللون (Active/Focus) */
html body div[class*="product"] button:has(img):hover,
html body div[class*="product"] div[class*="flex"] > div:has(> img):hover,
html body [class*="variant"]:hover,
html body [class*="variant"]:focus,
html body [class*="variant"].active,
html body [class*="swatch"]:hover,
html body [class*="swatch"].active,
html body [class*="thumbnail"]:hover,
html body [class*="thumbnail"].active {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 3. إزالة الإطار الداخلي للصور نفسها (إن وُجد) */
html body div[class*="product"] button img,
html body div[class*="product"] div[class*="flex"] > div > img,
html body [class*="variant"] img,
html body [class*="swatch"] img,
html body [class*="thumbnail"] img {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important; /* لضمان عدم وجود مسافات وهمية تشبه الإطار */
}

/* =======================================================
   تنسيق صور المنتجات (كروت الشاشة الرئيسية + صفحة المنتج)
   - بدون إطارات رمادية
   - بدون اهتزاز نهائياً
   ======================================================= */

/* 1. إخفاء اللون الرمادي من كل الإطارات (عن طريق جعله شفافاً للحفاظ على المقاس ومنع الاهتزاز) */
html body button:has(img),
html body div[class*="swatch"],
html body div[class*="variant"],
html body div[class*="thumbnail"],
html body div[class*="gallery"] div:has(> img),
html body div[class*="flex"] > div:has(> img) {
    border-color: transparent !important; 
    box-shadow: none !important;
    outline: none !important;
}

/* التأكيد على إزالة أي إطار من على الصورة نفسها */
html body button img,
html body div[class*="flex"] > div > img {
    border: none !important;
    box-shadow: none !important;
}

/* =======================================================
   تنسيق خيارات المنتج (الألوان والمقاسات) - حواف دائرية 12px
   ======================================================= */

/* 1. تنسيق الصور المصغرة (الألوان) */
html body .image_variation {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 12px !important; /* تدوير إطار الصورة */
    transition: all 0.2s ease !important;
}

html body .image_variation img {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 12px !important; /* تدوير الصورة نفسها من الداخل لتطابق الإطار */
}

/* الإطار الأسود للصورة المحددة */
html body .image_variation[aria-checked="true"],
html body .image_variation_checked,
html body .image_variation[data-headlessui-state*="checked"] {
    border-color: transparent !important;
    box-shadow: 0 0 0 1.5px #000000 !important; 
    border-radius: 12px !important; 
}

/* =======================================================
   2. تنسيق مربعات المقاسات (Sizes)
   ======================================================= */
/* استهداف خيارات الراديو التي لا تحتوي على صور (وهي المقاسات) */
html body div[role="radiogroup"] div[role="radio"]:not(:has(img)),
html body .text_variation {
    border-radius: 12px !important; /* تدوير إطار المقاس في الحالة العادية */
    transition: all 0.0s ease !important;
}

/* الإطار الأسود للمقاس المحدد */
html body div[role="radiogroup"] div[role="radio"][aria-checked="true"]:not(:has(img)),
html body .text_variation[aria-checked="true"],
html body .text_variation_checked,
html body div[role="radiogroup"] div[data-headlessui-state*="checked"]:not(:has(img)) {
    border-color: 2px solid #000000 !important;
    box-shadow: 0 0 0 0px #000000 !important; /* تحديد أسود صريح للمقاس */
    border-radius: 12px !important;
}

html body .button_variation_checked.button_variation_checked {
    background: 0 0 !important;
    background-color: #333 !important;
    color: #fff !important;
}


/* =======================================================
   3. إبادة تأثيرات المنصة الإجبارية (Ring Effects)
   ======================================================= */
html body div[role="radio"].ring-2,
html body div[role="radio"].ring-black,
html body div[role="radio"].ring-offset-2,
html body div[role="radio"][class*="ring-"] {
    /* إلغاء الظل الوهمي الذي تصنعه Tailwind CSS */
    --tw-ring-shadow: 0 0 transparent !important;
    --tw-ring-offset-shadow: 0 0 transparent !important;
    box-shadow: 0 0 0 2.5px #000000 !important; /* استبداله بالإطار النظيف بتاعنا */
    border-radius: 12px !important;
}

/* =======================================================
   تنسيق أزرار الأكشن (الشراء، السلة) - الكلاسات الرسمية
   ======================================================= */

/* 2. زر إضافة للسلة (Add To Cart) */
html body .add_to_cart_btn {
    border-radius: 12px !important;
    border: 2px solid #e9e9e9 !important;
    background: transparent !important; /* إزالة أي لون خلفية */
    background-color: transparent !important;
    color: #000000 !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}

/* تأثير عند تمرير الماوس على زر السلة */
html body .add_to_cart_btn:hover {
    color: #ffffff !important;
    background-color: #000000 !important;
    border: 2px solid #000000 !important;
}

/* 3. زر الشراء الآن (Buy Now) */
/* استخدام background بدلاً من background-color لكسر متغيرات المنصة */
html body .checkout_btn {
    border-radius: 12px !important;
    background: #000000 !important; 
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #000000 !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
}

/* تأثير النعومة عند وقوف الماوس على زر الشراء */
html body .checkout_btn:hover {
    color: #ffffff !important;
    background-color: #000000 !important;
    border: 2px solid #000000 !important;
}





/* =======================================================
   تصميم شريط البحث (محددات قوية جداً لفرض التعديل)
   ======================================================= */

/* 1. إجبار مربع البحث على تغيير الإطار والخلفية */
html body [data-search="container"] input.global_input[data-search="input"],
html body [data-search="container"] input.global_input {
    background: #ffffff !important; /* خلفية فاتحة وناعمة */
    border: 0.5px solid #cbcbcb !important; /* لون الإطار الجديد (رمادي واضح) وتقدر تغيره */
    border-radius: 12px !important; 
    padding: 14px 20px !important; 
    color: #000000 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 16px !important;
    box-shadow: none !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

/* 2. تأثير عند الضغط والكتابة داخل مربع البحث (تغيير لون الإطار للأسود) */
html body [data-search="container"] input.global_input[data-search="input"]:focus,
html body [data-search="container"] input.global_input:focus {
    background: #ffffff !important;
    border: 1.5px solid #cccccc !important; /* لون الإطار عند الكتابة */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

/* 3. إجبار زر البحث على تغيير شكله بالكامل */
html body [data-search="container"] button[data-search="button"] {
    background: #000000 !important; /* خلفية الزر */
    color: #ffffff !important; 
    border-radius: 12px !important; 
    padding: 0 32px !important; /* تعديل الحشوة ليتناسق مع المربع */
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    border: 1.5px solid #000000 !important; /* إطار الزر */
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 52px !important; /* توحيد طول الزر مع مربع البحث */
    margin-left: 10px !important; /* مسافة بسيطة بين المربع والزر */
}

/* 4. تأثير عند المرور بالماوس على زر البحث */
html body [data-search="container"] button[data-search="button"]:hover {
    background: #333333 !important;
    border-color: #333333 !important;
}

/* 5. إخفاء كلمة Search (الـ Label) اللي فوق المربع */
html body [data-search="container"] label {
    display: none !important; 
}













/* 1. عنوان السلة (Cart) - تعديل آمن للسلة فقط */
[data-cart="title"] {
    font-family: 'Outfit', sans-serif !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    color: #000000 !important;
    letter-spacing: 0.05em !important;
}

/* 2. تجربة ألوان زر الدفع فقط */
[data-cart="checkout-wrapper"] button {
    background-color: #000000 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    border-color: transparent !important;
    margin-top: 25px
}

[data-cart="checkout-wrapper"] button:hover {
    background-color: #222222 !important;
}

/* =======================================================
   تصميم الكروت العائمة للمنتجات (GEN X Card Design)
   ======================================================= */

/* 1. الكارت الفردي: خلفية بيضاء، حواف دائرية ناعمة، وظل خفيف */
[data-cart="item"] {
    position: relative !important;
    background-color: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0 4px 20px rgb(0 0 0 / 0%) !important;
    padding: 16px !important;
    margin-bottom: 15px !important;
    margin-top: 15px !important;
}

/* 2. صندوق الصورة المصغرة */
[data-cart="item-image-wrapper"] {
    border-radius: 12px !important;
    border: 1px solid #eeeeee !important;
    background-color: #fafafa !important;
    padding: 4px !important;
}

/* 3. حاوية تفاصيل المنتج (مسافة أمان عشان الاسم ميخبطش في سلة المحذوفات) */
[data-cart="item-info"] {
    padding-right: 60px !important;
}

/* 4. اسم المنتج والخطوط */
[data-cart="item-info"] h3,
[data-cart="item-info"] a {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #000000 !important;
}

/* 5. تفاصيل المقاس والستايل (تم تعديل المسافات لتكون طبيعية) */
[data-cart="item-info"] p {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    color: #666666 !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

/* =======================================================
   تنسيق وترتيب مكان زر الحذف والسعر داخل كارت المنتج
   ======================================================= */

/* 1. تظبيط شكل السعر ونقله لتحت على اليمين بأمان */
[data-cart="item"] [data-cart*="price"],
[data-cart="item-price"] {
    position: absolute !important;
    bottom: 19px !important; /* دي اللي هتنزل السعر تحت موازي للكمية */
    right: 25px !important;
    margin: 0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    color: #000000 !important;
}

/* 2. الحفاظ على الخط العريض لأي عنصر تاني (زي الاسم) من غير ما يتسحب من مكانه */
[data-cart="item"] .font-bold {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    color: #000000 !important;
    position: static !important; 
}

/* 3. تثبيت مكان زر الحذف نفسه في أعلى يمين الكارت */
[data-cart="item-remove"] {
    position: absolute !important;
    top: 15px !important; 
    right: 15px !important; 
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
}

/* 4. أيقونة سلة المحذوفات وتفاصيلها */
.custom-trash-btn.custom-trash-btn[data-cart="item-remove"]::before {
    content: "" !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    vertical-align: middle !important;
    -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%2012V17%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M14%2012V17%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4%207H20%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%2010V18C6%2019.6569%207.34315%2021%209%2021H15C16.6569%2021%2018%2019.6569%2018%2018V10%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9%205C9%203.89543%209.89543%203%2011%203H13C14.1046%203%2015%203.89543%2015%205V7H9V5Z%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E) !important;
    mask-image: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%2012V17%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M14%2012V17%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4%207H20%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%2010V18C6%2019.6569%207.34315%2021%209%2021H15C16.6569%2021%2018%2019.6569%2018%2018V10%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9%205C9%203.89543%209.89543%203%2011%203H13C14.1046%203%2015%203.89543%2015%205V7H9V5Z%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    background-color: var(--buy-btn-bg, #cc2134) !important;
}

/* تأثير عند المرور بالماوس على الأيقونة */
[data-cart="item-remove"]:hover .custom-trash-btn::before {
    background-color: #000000 !important;
}

/* =======================================================
   تنسيقات إضافية (المجموع النهائي)
   ======================================================= */
dl.space-y-6 dd {
    font-weight: 800 !important;
    color: #000 !important;
    font-size: 20px !important;
}

/* إلغاء اللون الأحمر من أيقونات الهيدر وجعلها تتكيف مع لون الهيدر (أبيض/أسود) */
.ab-icon-btn.cart-btn:hover::before,
.ab-icon-btn.cart-btn:focus-visible::before,
.ab-icon-btn.search-btn:hover::before,
.ab-icon-btn.search-btn:focus-visible::before,
.ab-icon-btn:hover::before {
    background: currentColor !important;
}

/* إلغاء اللون الأحمر من زر القائمة الجانبية عند الهوفر وجعله يتكيف مع لون الهيدر */
.ab-hamburger:hover,
.ab-hamburger:focus-visible {
    color: inherit !important;
}



/* =======================================================
   تصميم حالة السلة الفارغة (Premium Floating Card Style)
   ======================================================= */

/* 1. إنشاء الأنيميشن (حركة الطفو للأيقونة) */
@keyframes floatIcon {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* 2. تصميم الحاوية (كارت فخم بتدرج لوني وظل ناعم) */
[data-cart="empty-state"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 20px !important;
    min-height: 65vh !important;
    /* خلفية متدرجة من الأبيض للرمادي الفاتح جداً */
    background: linear-gradient(145deg, #ffffff, #f7f7f7) !important; 
    border-radius: 24px !important; /* حواف دائرية أكبر وأكثر نعومة */
    /* ظل خفيف جداً لإعطاء عمق للشاشة */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important; 
    /* إطار أبيض رفيع يعطي تأثير زجاجي أنيق */
    border: 1px solid #ffffff !important; 
}

/* 3. أيقونة السلة (مع إضافة حركة الطفو) */
[data-cart="empty-title"]::before {
    content: "" !important;
    display: block !important;
    width: 75px !important; /* كبرنا الأيقونة سنة بسيطة */
    height: 75px !important;
    margin: 0 auto 25px auto !important;
    background-color: #111111 !important; /* لون أسود غني */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none'%3E%3Cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 7H3.577A2 2 0 0 0 1.64 9.497l2.051 8A2 2 0 0 0 5.63 19H16.37a2 2 0 0 0 1.937-1.503l2.052-8A2 2 0 0 0 18.422 7H11Zm0 0V1'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none'%3E%3Cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 7H3.577A2 2 0 0 0 1.64 9.497l2.051 8A2 2 0 0 0 5.63 19H16.37a2 2 0 0 0 1.937-1.503l2.052-8A2 2 0 0 0 18.422 7H11Zm0 0V1'/%3E%3C/svg%3E") !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    /* تشغيل الأنيميشن */
    animation: floatIcon 3s ease-in-out infinite !important; 
}

/* 4. تنسيق عنوان السلة الفارغة */
[data-cart="empty-title"] {
    font-family: 'Outfit', sans-serif !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #111111 !important;
    text-align: center !important;
    letter-spacing: 0px !important;
}

/* 5. تنسيق النص الفرعي */
[data-cart="empty-subtitle"] {
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    color: #777777 !important;
    text-align: center !important;
    margin-top: 10px !important;
}

[data-cart="panel"] {
    max-width: 450px !important; /* ده العرض الجديد، تقدر تكبره لـ 600px لو عاوزها أعرض */
    width: 100vw !important;
}


/* تطبيق التعديلات فقط على شاشات الكمبيوتر بناءً على قياسات القالب */
@media (min-width: 980px) {
    
    /* 1. ضبط الحاوية الرئيسية */
    .ab-header-inner {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* 2. نقل الشعار لليسار وإلغاء الـ Absolute Position */
    .header-col-center {
        position: relative !important; 
        left: auto !important;
        top: auto !important;
        transform: none !important;
        order: 1 !important; /* الترتيب الأول في اليسار */
        flex: 1 !important;
        display: flex !important;
        justify-content: flex-start !important; 
        pointer-events: auto !important;
    }

    /* 3. نقل حاوية الروابط للمنتصف */
    .header-col-left {
        order: 2 !important; /* الترتيب الثاني في المنتصف */
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important; 
        max-width: 100% !important; /* تجاوز العرض المقيد القديم */
    }

    /* تأكيد توسيط الروابط نفسها داخل حاويتها */
    .ab-nav {
        justify-content: center !important;
        width: 100% !important;
    }

    /* 4. إبقاء الأيقونات في اليمين مع تأكيد الترتيب */
    .header-col-right {
        order: 3 !important; /* الترتيب الثالث في اليمين */
        flex: 1 !important;
        display: flex !important;
        justify-content: flex-end !important;
    }
}


/* =======================================================
   تحويل شبكة بحث المنصة لشبكة GEN X وتجهيز الكروت
   ======================================================= */

/* 1. تحويل حاوية البحث لشبكة متجاوبة (2 موبايل، 3 تابلت، 5 كمبيوتر) */
.ab-pgrid-wrap {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
}

@media (min-width: 768px) {
    .ab-pgrid-wrap {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 24px !important;
    }
}

@media (min-width: 1024px) {
    .ab-pgrid-wrap {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

/* 2. إخفاء المحتوى القديم للكارت بأمان (بدون حذف العنصر نفسه) */
.ab-pgrid-card > .ab-pgrid-badge-stack,
.ab-pgrid-card > .ab-pgrid-media,
.ab-pgrid-card > .ab-pgrid-info {
    display: none !important; 
}

/* 3. تنسيق الرابط الأساسي وإزالة أي ظل أو تأثيرات افتراضية من المنصة */
.ab-pgrid-card,
.ab-pgrid-card:hover,
.ab-pgrid-card:focus {
    display: block !important;
    text-decoration: none !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important; /* الضربة القاضية للظل القديم */
    outline: none !important;
    transform: none !important;
}





























/* استدعاء خط Outfit */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

body, .font-sans, h1, h2, h3, button, span, p, div {
    font-family: 'Outfit', sans-serif !important;
}

/* =========================================
   تنسيق أزرار المقاسات (Size)
========================================= */
html body .button_variation {
    width: 55px !important;
    height: 35px !important;
    border-radius: 1rem !important; 
    border: 2px solid #f5f5f5 !important; 
    background-color: #ffffff !important;
    color: #4b5563 !important; 
    font-weight: 700 !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.button_variation:hover {
    border-color: #d1d5db !important;
}

/* حالة التحديد للمقاس */
div[aria-checked="true"] > .button_variation,
.button_variation.bg-skin-primary,
.button_variation[style*="background"] {
    border-color: #111111 !important;
    background-color: #111111 !important;
    color: #ffffff !important;
}

/* =========================================
   تنسيق أزرار الاستايل / الصور (إصلاح المربع)
========================================= */
#headlessui-radiogroup-\:rc\: > div.flex, 
div[role="radiogroup"] > div.flex.w-fit.flex-wrap {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 0.5rem !important; 
    width: 100% !important;
}

.image_variation {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; /* إجبار المربع */
    padding: 4px !important; 
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    display: block !important; 
    position: relative !important;
    border: 2px solid transparent !important;
    border-radius: 1rem !important;
}

.image_variation:hover {
    border-color: #e5e7eb !important; 
}

/* الحل الجذري لمنع المحتوى من إفساد شكل المربع على الموبايل */
.image_variation > div {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0.75rem !important; 
    overflow: hidden !important;
    position: relative !important; 
}

.image_variation img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important; 
}

/* حالة التحديد للاستايل */
div[aria-checked="true"] > .image_variation,
.image_variation.border-skin-primary {
    border-color: #111111 !important;
}
div[aria-checked="true"] > .image_variation:hover {
    border-color: #111111 !important; 
}

/* =========================================
   تنسيق المخزون الوهمي + أنيميشن النبض (Ping)
========================================= */
.ab-fake-stock {
    background-color: #fef2f2 !important; 
    border-radius: 1rem !important; 
    padding: 1rem !important; 
    margin-bottom: 0.5rem !important; 
    border: 1px solid #fee2e2 !important;
    gap: 0px !important; 
}

.ab-fs-row {
    margin-bottom: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
}

.ab-fs-dot {
    display: none !important;
}

/* أنيميشن النبض */
@keyframes ping-animation {
    0% { transform: scale(1); opacity: 0.8; }
    75%, 100% { transform: scale(2.5); opacity: 0; }
}

.ab-fs-text {
    font-size: 0.875rem !important; 
    font-weight: 600 !important; 
    color: #d92d20 !important; 
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

/* النقطة الثابتة */
.ab-fs-text::before {
    content: '';
    display: block;
    width: 12px;
    min-width: 12px;
    height: 12px;
    background-color: #d92d20;
    border-radius: 50%;
    margin-right: 8px;
    z-index: 2;
    position: relative;
}

/* النقطة المتحركة (Ping) */
.ab-fs-text::after {
    content: '';
    position: absolute;
    left: 1px;
    top: 55%;
    margin-top: -6px;
    width: 10px;
    height: 10px;
    background-color: #d92d20;
    border-radius: 50%;
    z-index: 1;
    animation: ping-animation 1.5s cubic-bezier(0, 0, 0.2, 1) infinite !important;
}

/* شريط التقدم */
.ab-fs-bar {
    width: 100% !important;
    background-color: rgb(254 202 202 / 0.5) !important; 
    border-radius: 9999px !important; 
    height: 0.375rem !important; 
    margin-top: 0.25rem !important; 
    overflow: hidden !important;
}

.ab-fs-fill {
    background-color: #d92d20 !important; 
    height: 100% !important;
    border-radius: 9999px !important;
}


/* =========================================
   تنسيق حقل الكمية (تمت المعالجة الجذوريه)
========================================= */
.quantity_btn_container {
    background-color: #ffffff !important; 
    border: 2px solid #e5e7eb !important; 
    border-radius: 1rem !important; 
    padding: 0 0.375rem !important; 
    height: 3.5rem !important; 
    width: 8rem !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important; /* إزالة هوامش المنصة الافتراضية */
    gap: 0 !important; /* إلغاء التباعد الافتراضي للمنصة */
    flex-shrink: 0 !important;
}

/* أزرار الزيادة والنقصان */
.quantity_btn_container button {
    width: 2.5rem !important; 
    height: 2.5rem !important; 
    border-radius: 0.75rem !important; 
    background-color: transparent !important;
    color: #6b7280 !important; 
    border: none !important;
    margin: 0 !important; /* التخلص من كلاس mx-2 الخاص بالمنصة */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
}

/* توسيط الأيقونة (SVG) داخل الزر */
.quantity_btn_container button svg {
    width: 1rem !important;
    height: 1rem !important;
    margin: 0 !important;
}

.quantity_btn_container button:hover {
    background-color: #ffffff !important; 
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2) !important; 
}

/* رقم الكمية */
.quantity_btn_container p {
    font-weight: 700 !important;
    color: #111111 !important;
    font-size: 1rem !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 2rem !important;
    text-align: center !important;
}

/* =========================================
   تعديل الخط الفاصل بين السعر وبين المقاس (Quantity)
========================================= */
.ab-pd-divider {
    width: 100%;
    height: 1px;
    background-color: var(--body-text, #000000) !important;
    margin: 0px 0px 25px !important;
    border: 0;
    opacity: 0.1 !important;
}

@media screen and (max-width: 767px) {
.ab-pd-divider {
    margin-top: 15px !important;
    margin-bottom: 5px !important;
}
}

[role=radiogroup].mt-2, [role=radiogroup].mt-3 {
    padding-inline-start: 0px !important;
}

.mt-4.md\:mt-6.lg\:col-span-5.\[\&_h2\]\:font-bold form {
    display: flex;
    flex-direction: column;
    gap: 20px !important;
}

body .variation_name, 
body h2.text-base.font-bold.text-gray-900.whitespace-nowrap.flex.items-center.gap-1.flex-wrap {
    /* الخصائص بتاعتك */
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--body-text, #000000) !important;
    margin-bottom: 10px !important;
    justify-content: center !important;
}