/* =========================================
   تنسيقات عامة (الخلفية والعناوين)
   ========================================= */
/* توسيط عنوان المراجعات بناءً على الكلاس الذي أضفناه */
.center-title .title {
    text-align: center !important;
    display: block !important;
}

/* إجبار خلفية الموقع على الظهور بلون مخصص فوراً لمنع الومضة البيضاء */
html, body, .main-page-wrapper, .website-wrapper {
    background-color: #FBF5EA !important;
}

/* =========================================
   تنسيقات النكهات (مربعات الاختيار - اختر 5 أصناف)
   الكلاس المستخدم: limit-5-items
   ========================================= */
/* 1. إجبار الحاوية الرئيسية على عرض العناصر بجانب بعضها */
.limit-5-items .wapf-field-input,
.limit-5-items .wapf-options {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
}

/* 2. إضافة التباعد (8 بكسل) */
.limit-5-items .wapf-checkable,
.limit-5-items .wapf-field-row {
    display: inline-block !important;
    width: auto !important; 
    margin: 0 0 8px 8px !important; 
    padding: 0 !important;
    flex: 0 0 auto !important;
}

/* 3. إخفاء مربع الاختيار الافتراضي وعلامة الصح تماماً */
.limit-5-items .wapf-checkable input[type="checkbox"],
.limit-5-items .wapf-checkable .wapf-checkmark,
.limit-5-items .wapf-checkable::before,
.limit-5-items .wapf-checkable::after {
    display: none !important;
}

/* 4. تصميم الزر (حجم صغير) */
.limit-5-items .wapf-checkable .wapf-label-text {
    display: inline-block !important;
    padding: 5px 10px !important; 
    background-color: #FBF5EA !important; 
    border: 1px solid #3D0A14 !important; 
    border-radius: 30px !important; 
    color: #3D0A14 !important; 
    font-size: 12px !important; 
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
    white-space: nowrap !important; 
}

/* 5. تأثير مرور الماوس (Hover) */
.limit-5-items .wapf-checkable:hover .wapf-label-text {
    background-color: #3D0A14 !important;
    color: #FBF5EA !important;
    opacity: 0.8 !important; 
}

/* 6. تصميم الزر (بعد الضغط - الحالة المحددة) */
.limit-5-items .wapf-checkable input[type="checkbox"]:checked ~ .wapf-label-text {
    background-color: #3D0A14 !important; 
    color: #FBF5EA !important; 
    border-color: #3D0A14 !important;
    box-shadow: 0 2px 5px rgba(61, 10, 20, 0.3) !important; 
}

/* =========================================
   تنسيقات المكان (أزرار الراديو - Location CORNER)
   الكلاس المستخدم: custom-radio-pills
   ========================================= */
/* 1. عرض الأزرار بجانب بعضها مع مسافة */
.custom-radio-pills .wapf-options {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.custom-radio-pills .wapf-checkable {
    display: inline-block !important;
    width: auto !important; 
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. إخفاء دوائر الراديو الافتراضية */
.custom-radio-pills input[type="radio"],
.custom-radio-pills .wapf-checkmark {
    display: none !important;
}

/* 3. تصميم الزر الخاص بالموقع */
.custom-radio-pills .wapf-label-text {
    display: inline-block !important;
    padding: 8px 16px !important;
    background-color: #FBF5EA !important;
    border: 1px solid #3D0A14 !important;
    border-radius: 30px !important; 
    color: #3D0A14 !important; 
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
}

/* 4. الحالة عند اختيار الموقع */
.custom-radio-pills input[type="radio"]:checked ~ .wapf-label-text {
    background-color: #3D0A14 !important;
    color: #FBF5EA !important;
    border-color: #3D0A14 !important;
}

/* =========================================
   تنسيقات القوائم المنسدلة (مثل: عدد الأشخاص)
   ========================================= */
.wapf-field-row select.wapf-input {
    background-color: #FBF5EA !important;
    color: #3D0A14 !important;
    border: 1px solid #3D0A14 !important;
    border-radius: 8px !important; 
    padding: 10px 15px !important;
    padding-right: 35px !important; /* مساحة إضافية يمين الكلمة لمنع التداخل مع السهم */
    font-size: 14px !important;
    font-weight: 600 !important;
    width: 100% !important;
    height: auto !important;
    cursor: pointer !important;
    appearance: none !important; /* إخفاء سهم المتصفح الافتراضي */
    /* إضافة سهم مخصص متناسق مع الألوان جهة اليمين */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%233D0A14' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important; 
}

.wapf-field-row select.wapf-input option {
    background-color: #FBF5EA !important;
    color: #3D0A14 !important;
    padding: 10px !important;
}