/* Add custom CSS styles below */ 
/* إخفاء زرار سلة الافتراضي لدليل المقاسات */
.center-between salla-button[onclick*="size-guide"] {
    display: none !important;
}

/* تنسيق إضافي عشان الزرار بتاعنا يظهر بشكل ممتاز على الموبايل والديسكتوب */
#custom-size-btn:hover {
    background-color: #102a43 !important;
    color: #ffffff !important;
    transition: all 0.3s ease;
}

/* خلفية النافذة الضبابية */
.sg-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 99999;
    justify-content: center; align-items: center; backdrop-filter: blur(3px);
}

/* المربع الأساسي */
.sg-box {
    background: #fff; width: 92%; max-width: 420px;
    padding: 30px 25px; border-radius: 12px;
    direction: rtl; position: relative;
    font-family: inherit; /* بيسحب خط سلة */
    box-sizing: border-box; box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* زرار الإغلاق (X) */
.sg-close {
    position: absolute; top: 15px; left: 15px; /* على الشمال في الـ RTL */
    cursor: pointer; font-size: 20px; color: #6b7280; line-height: 1;
}

/* النصوص والعناوين */
.sg-title { font-size: 1.25rem; font-weight: bold; text-align: center; color: #1e293b; margin-bottom: 25px; }
.sg-label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.95rem; color: #374151; text-align: right; }

/* حقول الإدخال */
.sg-input {
    width: 100%; padding: 12px 15px; border: 1px solid #e5e7eb;
    border-radius: 8px; font-family: inherit; font-size: 0.95rem;
    box-sizing: border-box; margin-bottom: 20px; color: #1f2937;
}
.sg-input::placeholder { color: #9ca3af; }
.sg-input:focus { outline: none; border-color: #1e293b; }

/* أزرار تركيبة الجسم */
.sg-body-types { display: flex; gap: 10px; margin-bottom: 25px; }
.sg-type-btn {
    flex: 1; padding: 10px 5px; border: 1px solid #e5e7eb;
    background: #fff; border-radius: 8px; color: #6b7280;
    font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: 0.2s;
}
.sg-type-btn.active {
    border-color: #1e293b; background: #f3f4f6; color: #1e293b;
}

/* الزرار الرئيسي (الكحلي) */
.sg-main-btn {
    background: #1e293b; color: #fff; border: none;
    width: 100%; padding: 14px; border-radius: 8px;
    font-weight: bold; font-size: 1rem; cursor: pointer;
    font-family: inherit; transition: 0.3s;
}
.sg-main-btn:hover { background: #0f172a; }

/* شاشة النتيجة */
#sg-step2 { display: none; text-align: center; }
.sg-result-val { font-size: 3.5rem; font-weight: bold; color: #1e293b; margin: 10px 0 20px; }
.sg-disclaimer { font-size: 0.85rem; color: #6b7280; line-height: 1.6; margin-bottom: 25px; }


/* تغيير لون زرار "اعتمد المقاس" للون البراند */
button[onclick="window.applySizeAndAddToCart()"] {
    background-color: #1C2A42 !important; /* حط كود اللون بتاعك هنا (أنا حطيت لك كحلي كمثال) */
    color: #ffffff !important;
    border: none !important;
}

/* لون الزرار لما العميل يقف عليه بالماوس (Hover) */
button[onclick="window.applySizeAndAddToCart()"]:hover {
    background-color: #0a1b2b !important; /* حط هنا درجة أغمق سنة من لون البراند */
}