.elementor-567 .elementor-element.elementor-element-82a7b33{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--margin-top:-263px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-567 .elementor-element.elementor-element-60b6680{text-align:center;}.elementor-567 .elementor-element.elementor-element-60b6680 .elementor-heading-title{font-size:30px;font-weight:600;color:#FFFFFF;}.elementor-567 .elementor-element.elementor-element-9e224c9{--display:flex;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-567 .elementor-element.elementor-element-82a7b33{--content-width:1600px;--margin-top:-195px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}/* Start custom CSS for metform, class: .elementor-element-025d013 *//* 🖤 كود التنسيق السينمائي الفخم لفورم بوم بوكس 🚀 */

/* 1. حاوية الفورم بالكامل (البوكس الخلفي) */
.elementor-widget-metform {
    background: #0b0b0b !important; /* أسود عميق جداً */
    padding: 35px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.03) !important; /* إطار خفيف غير مرئي تقريباً */
}

/* 2. تنسيق حقول الإدخال (رقم الموبايل وكلمة السر) */
.elementor-widget-metform .mf-input, 
.elementor-widget-metform input[type="number"], 
.elementor-widget-metform input[type="password"] {
    background-color: #161616 !important; /* رمادي داكن مريح للعين */
    border: 1px solid #2a2a2a !important; /* إطار هادي */
    border-radius: 12px !important; /* حواف ناعمة دائرية */
    color: #ffffff !important; /* كتابة بيضاء صريحة */
    padding: 16px 20px !important;
    font-size: 15px !important;
    transition: all 0.3s ease-in-out !important; /* سرعة الأنيميشن */
}

/* 3. الأنيميشن الفسفوري الساحر عند الضغط (Focus) */
.elementor-widget-metform .mf-input:focus,
.elementor-widget-metform input[type="number"]:focus,
.elementor-widget-metform input[type="password"]:focus {
    border-color: #D4FF00 !important; /* ينور فسفوري */
    box-shadow: 0 0 15px rgba(212, 255, 0, 0.15) !important; /* توهج فسفوري خفيف خلف الحقل */
    background-color: #1c1c1c !important;
    transform: translateY(-2px) !important; /* الحقل يرتفع تكة بسيطة لفوق بنعومة */
}

/* 4. تنسيق أسماء الخانات (Labels) */
.elementor-widget-metform .mf-input-label,
.elementor-widget-metform label {
    color: #a0a0a0 !important; /* لون رمادي هادي للعنوان */
    font-size: 14px !important;
    margin-bottom: 8px !important;
    display: block !important;
    font-weight: 500 !important;
}

/* 5. تنسيق زرار تسجيل الدخول */
.elementor-widget-metform .mf-btn-wraper button,
.elementor-widget-metform .mf-btn {
    background-color: #D4FF00 !important; /* لون زرار فسفوري صريح */
    color: #000000 !important; /* كتابة سوداء قوية جواه */
    border-radius: 12px !important;
    padding: 16px !important;
    font-weight: bold !important;
    font-size: 16px !important;
    width: 100% !important; /* واخد عرض الفورم كله */
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease-in-out !important;
    box-shadow: 0 4px 12px rgba(212, 255, 0, 0.1) !important;
}

/* 6. حركة الزرار لما الماوس ييجي عليه (Hover) */
.elementor-widget-metform .mf-btn-wraper button:hover,
.elementor-widget-metform .mf-btn:hover {
    background-color: #ffffff !important; /* يقلب أبيض فخم */
    color: #000000 !important;
    transform: translateY(-3px) !important; /* يرتفع لفوق بنعومة */
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.15) !important; /* توهج أبيض */
}


/* ضبط اتجاه النص ليكون من اليمين لليسار (عربي) */
.elementor-widget-metform .mf-input, 
.elementor-widget-metform input[type="number"], 
.elementor-widget-metform input[type="password"] {
    text-align: right !important;
    direction: rtl !important;
}













/* 💥 الحل النهائي والدقيق لرسائل MetForm 💥 */

/* 1. تصفير الحاويات تماماً لمسح أي خلفية بيضاء */
.elementor-widget-metform .mf-main-response-wrap,
.elementor-widget-metform .mf-response-msg-wrap {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 15px !important;
}

/* 2. إخفاء أي محتوى قديم (أيقونات أو نصوص) من الإضافة */
.elementor-widget-metform .mf-response-msg i,
.elementor-widget-metform .mf-response-msg p,
.elementor-widget-metform .mf-response-msg svg {
    display: none !important;
}

/* =========================================
   🛑 حالة الخطأ (رسالة حمراء)
   ========================================= */
.elementor-widget-metform .mf-error-res .mf-response-msg {
    background-color: #1a0505 !important;
    border: 1px solid #ff4d4d !important;
    border-radius: 12px !important;
    padding: 14px !important;
    display: block !important;
    box-shadow: 0 4px 15px rgba(255, 77, 77, 0.1) !important;
}

.elementor-widget-metform .mf-error-res .mf-response-msg::after {
    content: "عفواً، البيانات غير صحيحة!" !important;
    color: #ff4d4d !important;
    font-size: 15px !important;
    font-weight: bold !important;
    display: block !important;
    text-align: center !important;
    direction: rtl !important;
}

/* =========================================
   ✅ حالة النجاح (رسالة فسفورية) - باستخدام خدعة الـ Not
   ========================================= */
.elementor-widget-metform .mf-main-response-wrap[data-show="1"]:not(.mf-error-res) .mf-response-msg {
    background-color: #101200 !important;
    border: 1px solid #D4FF00 !important;
    border-radius: 12px !important;
    padding: 14px !important;
    display: block !important;
    box-shadow: 0 4px 15px rgba(212, 255, 0, 0.1) !important;
}

.elementor-widget-metform .mf-main-response-wrap[data-show="1"]:not(.mf-error-res) .mf-response-msg::after {
    content: "تم بنجاح، جاري التحويل..." !important;
    color: #D4FF00 !important;
    font-size: 15px !important;
    font-weight: bold !important;
    display: block !important;
    text-align: center !important;
    direction: rtl !important;
}/* End custom CSS */