/* Add custom CSS styles below */ /* 1. إعدادات الشاشة العامة */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
}

/* 2. الهيدر (ألوان فقط) */
.s-header, .s-header-group {
    background-color: #121212 !important;
    border-bottom: 2px solid #c5a059 !important;
}
.main-menu-list > li > a, .s-header-menu-link { color: #ffffff !important; }

/* 3. حل تداخل السعر مع حرف الراء (للجوال والويندوز) */
.product-card-price, .s-product-card__price, .price, .product-details__price {
    display: block !important; /* لضمان أن السعر يأخذ سطر كامل */
    direction: rtl !important;
    unicode-bidi: isolate !important;
    padding: 5px 0 !important;
    text-align: inherit;
}

/* إضافة مسافة إجبارية بين الرقم والعملة */
.product-card-price span, .price span, .s-product-card__price span {
    margin-left: 5px !important;
    display: inline-block !important;
}

/* 4. عبارة (الكمية محدودة) - حل مشكلة الخروج عن الشاشة */
.product-details__price::after, .price-wrapper::after, .product-price::after {
    content: "⚠️ الكمية محدودة.. اطلب قبل ما يخلص المزاج 🔥" !important;
    display: block !important;
    clear: both !important;
    margin: 15px auto 5px auto !important; /* توسيط المسافات */
    padding: 8px 5px !important;
    background-color: #fffaf0 !important;
    border: 1px dashed #d4a017 !important;
    border-radius: 8px !important;
    color: #b8860b !important;
    font-weight: bold !important;
    text-align: center !important;
    width: 100% !important; /* تأخذ عرض الحاوية فقط */
    max-width: 100% !important; 
    box-sizing: border-box !important; /* لضمان بقاء الحواف داخل الشاشة */
    white-space: normal !important; /* السماح للنص بالنزول لسطرين */
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* 5. بطاقات المنتجات والأزرار */
.s-product-card, .product-card {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid #eee !important;
    background: #fff;
}
.s-button-primary, .btn-submit {
    background: linear-gradient(45deg, #c5a059, #b08e4f) !important;
    color: #ffffff !important;
    border-radius: 25px !important;
}

/* 6. الواتساب */
.s-whatsapp-container { position: fixed !important; z-index: 9999 !important; }
.s-whatsapp-container a { animation: whatsapp-pulse 2s infinite; }
@keyframes whatsapp-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* 7. أهم كود لضبط الجوال ومنع خروج النص */
@media (max-width: 768px) {
    .container, .main-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* تصغير العبارة قليلاً في الجوال لتناسب أصغر الشاشات */
    .product-details__price::after, .price-wrapper::after, .product-price::after {
        font-size: 11.5px !important;
        padding: 6px 4px !important;
    }

    /* منع تداخل السعر في الجوال */
    .product-card-price, .price {
        font-size: 15px !important;
        letter-spacing: -0.5px; /* تقريب الأرقام قليلاً لتوفير مساحة للراء */
    }
}