/* =====================================================================
 * qudurat-348-ui-fixes.css
 * ---------------------------------------------------------------------
 * إصلاحات الهوية البصرية بعد تحديث القالب الأب Workreap 3.4.8.
 * التحديث أعاد توليد style.css المُجمَّع من SCSS بلون أساسي أخضر-تركوازي
 * (#1bccae / #49d6be / #76e0ce) طغى على مكوّنات الطلبات والنزاعات والدفع.
 *
 * ألوان الهوية:
 *   - السماوي:        #1699CA
 *   - السماوي الداكن:  #1385af   (حالة hover — يبقى ضمن العائلة السماوية)
 *   - الكحلي:         #0A2540
 *
 * الأقسام:
 *   [1] صندوق «تفاصيل الطلب/المحفظة» في السلة (wr-walletsystem)
 *   [2] صندوق «موعد تسليم الخدمة» في تفاصيل الطلب (wr-taskdeadline)
 *   [3] زر الحالة الدائري (wr-btnvtwo) — الدائرة الخضراء
 *   [4] أزرار صفحة النزاع (الرد على الاسترداد / أضف رداً)
 *   [5] صفحة اتمام الطلب (block checkout) — هوية بصرية كاملة
 *   [6] صفحة «تم استلام الطلب» — إصلاح الجدول على الهاتف + الهوية
 *   [7] حالة زر إنشاء النزاع الخامل (مع qudurat-frontend-engine.js)
 *
 * ملاحظة: كل القواعد بـ !important لأن style.css المُجمَّع للأب يستعمل
 * !important في بعض القواعد ويُحمَّل بعد master CSS.
 * يُحمَّل عبر: qudurat_enqueue_main_assets() بأولوية 999 (بعد أصول الأب).
 * @version 1.0
 * @encoding UTF-8
 * ===================================================================== */


/* =====================================================================
 * [1] صندوق المحفظة في السلة (شاشة: user-dashboard/?ref=cart)
 * الأصل: .wr-walletsystem { background-color:#76e0ce }
 * الهدف: خلفية مزدوجة — كحلي مع توهّج سماوي (radial + linear)
 * ===================================================================== */
.wr-walletsystem {
    background:
        radial-gradient(130% 120% at 12% -20%, rgba(22, 153, 202, 0.45) 0%, rgba(22, 153, 202, 0) 55%),
        linear-gradient(150deg, #0A2540 0%, #0D3355 55%, #11517C 100%) !important;
}

/* النصوص داخل الصندوق تتحول لأبيض لتباين كافٍ على الكحلي */
.wr-walletsystem .wr-additionolinfo > span,
.wr-walletsystem .wr-walletamount span,
.wr-walletsystem .wr-additionalservices__content .wr-additionalservices-title p {
    color: #ffffff !important;
}
.wr-walletsystem .wr-additionolinfo > em {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* مربع الاختيار «استخدم رصيد محفظتي» — واضح على الخلفية الداكنة */
.wr-walletsystem .form-check-input:not(:checked) {
    border-color: rgba(255, 255, 255, 0.65) !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
}

/* زر «شحن رصيد المحفظة» (الأصل #16a38b) → سماوي، ويبقى سماوياً مع hover */
.wr-btnsfund {
    background-color: #1699CA !important;
    border-color: #1699CA !important;
    color: #ffffff !important;
}
.wr-btnsfund:hover,
.wr-btnsfund:focus {
    background-color: #1385af !important;
    border-color: #1385af !important;
    color: #ffffff !important;
}

/* زر «متابعة للدفع الآمن» أسفل الصندوق → سماوي، ويبقى سماوياً مع hover */
.wr-btnwallet a {
    background-color: #1699CA !important;
    border-color: #1699CA !important;
    color: #ffffff !important;
}
.wr-btnwallet a:hover,
.wr-btnwallet a:focus {
    background-color: #1385af !important;
    border-color: #1385af !important;
    color: #ffffff !important;
}


/* =====================================================================
 * [2] صندوق «موعد تسليم الخدمة» في تفاصيل الطلب/المشروع
 * الأصل: .wr-taskdeadline { background:#1bccae }
 * نفس الخلفية المزدوجة (كحلي + توهّج سماوي) لتوحيد الهوية
 *
 * تنبيه بنيوي: القالب يضع wr-taskdeadline على عنصرين متداخلين —
 * الغلاف الخارجي <div class="wr-asideholder wr-taskdeadline"> (يحوي
 * بطاقة الدفع البيضاء كاملة) والصندوق الداخلي <div class="wr-taskdeadline">
 * (العدّاد + زر النزاع فقط). التدرج يستهدف الداخلي فقط عبر
 * :not(.wr-asideholder) — وإلا تسرّب الكحلي خلف بطاقة الدفع.
 * ===================================================================== */
.wr-taskdeadline:not(.wr-asideholder) {
    background:
        radial-gradient(130% 120% at 12% -20%, rgba(22, 153, 202, 0.45) 0%, rgba(22, 153, 202, 0) 55%),
        linear-gradient(150deg, #0A2540 0%, #0D3355 55%, #11517C 100%) !important;
}

/* الغلاف الخارجي يبقى أبيض صريحاً (يحسم أي تعارض ترتيب مع قاعدة الأب
   .wr-taskdeadline{background:#1bccae} التي تسبق .wr-asideholder{#fff}) */
.wr-asideholder.wr-taskdeadline {
    background: #ffffff !important;
}

/* فواصل عدّاد الوقت (الأصل #638ffa) — أهدأ على الكحلي */
.wr-taskdeadline .wr-countdownno li::after {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* زر «إنشاء طلب استرداد أموال» أسفل الصندوق (الأصل #49d6be) → سماوي */
.wr-raisedispute a.wr-btn,
.wr-raisedispute span {
    background-color: #1699CA !important;
    color: #ffffff !important;
}
.wr-raisedispute a.wr-btn:hover,
.wr-raisedispute a.wr-btn:focus,
.wr-raisedispute span:hover,
.wr-raisedispute span:focus {
    background-color: #1385af !important;
    color: #ffffff !important;
}


/* =====================================================================
 * [3] زر الحالة الدائري (الدائرة الخضراء بجانب «جاري التنفيذ»)
 * الأصل: .wr-btnvtwo { background-color:#1bccae } + hover #49d6be
 * يشمل كل استخدامات wr-btnvtwo في لوحة التحكم لتوحيد الهوية
 * ===================================================================== */
.wr-btnvtwo,
.wr-deadlinebtn .wr-btnvtwo {
    background-color: #1699CA !important;
    color: #ffffff !important;
}
.wr-btnvtwo:hover,
.wr-btnvtwo:focus,
.wr-deadlinebtn .wr-btnvtwo:hover,
.wr-deadlinebtn .wr-btnvtwo:focus {
    background-color: #1385af !important;
    color: #ffffff !important;
}


/* =====================================================================
 * [4] أزرار صفحة النزاع (user-dashboard/?ref=disputes&mode=detail)
 * - «الرد على طلب الاسترداد» (tab) الأصل #1bccae → سماوي
 * - «أضف رداً» / زر Submit (dispute-reply-btn) → سماوي
 * - «السماح باسترداد الأموال» (أخضر #00cc8d) و«رفض» (أحمر) تبقى
 *   بألوانها الدلالية — قواعد #wr-form-refund/#wr-form-decline الأعلى
 *   تحديداً (ID) تبقى فائزة عمداً.
 * ===================================================================== */
.wr-replytabbtn,
.wr-refunddetailttabs .nav-tabs li a.wr-replytabbtn {
    background-color: #1699CA !important;
    color: #ffffff !important;
}
.wr-replytabbtn:hover,
.wr-replytabbtn:focus,
.wr-refunddetailttabs .nav-tabs li a.wr-replytabbtn:hover {
    background-color: #1385af !important;
    color: #ffffff !important;
}

/* زر إرسال رد النزاع (في نموذج «الرد للإدارة» ونموذج «إضافة رد») */
a#dispute-reply-btn {
    background-color: #1699CA !important;
    border-color: #1699CA !important;
    color: #ffffff !important;
}
a#dispute-reply-btn:hover,
a#dispute-reply-btn:focus {
    background-color: #1385af !important;
    border-color: #1385af !important;
    color: #ffffff !important;
}

/* زر «الرد» على تعليقات النزاع */
a.workreap-comment-reply.wr-btn {
    background-color: #1699CA !important;
    color: #ffffff !important;
}
a.workreap-comment-reply.wr-btn:hover,
a.workreap-comment-reply.wr-btn:focus {
    background-color: #1385af !important;
    color: #ffffff !important;
}


/* =====================================================================
 * [5] صفحة اتمام الطلب (WooCommerce Block Checkout)
 * الخلفية تبقى بيضاء — تُضبط العناوين والحقول والأزرار على الهوية
 * ===================================================================== */

/* عنوان الصفحة «اتمام الطلب» + عناوين الخطوات → كحلي */
body.woocommerce-checkout .wr-checkoutheader h1,
body.woocommerce-checkout .wr-checkoutheader .workreap-entry-title,
body.woocommerce-checkout .wc-block-components-checkout-step__title,
body.woocommerce-checkout .wc-block-components-title.wc-block-components-title {
    color: #0A2540 !important;
    font-weight: 600 !important;
}

/* بطاقة ملخص الطلب — حدود هادئة وظل خفيف وشريط علوي سماوي */
body.woocommerce-checkout .is-large .wp-block-woocommerce-checkout-order-summary-block {
    border: 1px solid #E3ECF3 !important;
    border-top: 3px solid #1699CA !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 24px rgba(10, 37, 64, 0.06) !important;
}

/* قيمة «الإجمالي» في الملخص → كحلي بارز */
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: #0A2540 !important;
    font-weight: 700 !important;
}

/* الحقول: حدود هادئة وتركيز سماوي واضح */
body.woocommerce-checkout .wc-block-components-text-input input[type="text"],
body.woocommerce-checkout .wc-block-components-text-input input[type="email"],
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type="tel"],
body.woocommerce-checkout .wc-block-components-textarea,
body.woocommerce-checkout .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input {
    border: 1px solid #E3ECF3 !important;
    border-radius: 10px !important;
}
body.woocommerce-checkout .wc-block-components-text-input input[type="text"]:focus,
body.woocommerce-checkout .wc-block-components-text-input input[type="email"]:focus,
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type="tel"]:focus,
body.woocommerce-checkout .wc-block-components-textarea:focus,
body.woocommerce-checkout .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus {
    border-color: #1699CA !important;
    box-shadow: 0 0 0 3px rgba(22, 153, 202, 0.15) !important;
}

/* بطاقة العنوان + رابط «تحرير» */
body.woocommerce-checkout .wc-block-components-address-card {
    border: 1px solid #E3ECF3 !important;
    border-radius: 10px !important;
}
body.woocommerce-checkout .wc-block-components-address-card__edit,
body.woocommerce-checkout .wc-block-components-checkout-step__description a,
body.woocommerce-checkout .wc-block-components-checkout-terms-block a {
    color: #1699CA !important;
}

/* الراديو (خيارات الدفع): نقطة وإطار سماويان + تمييز الخيار المحدد */
body.woocommerce-checkout .wc-block-components-radio-control__input:checked {
    border-color: #1699CA !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__input:checked::before {
    background: #1699CA !important;
}
body.woocommerce-checkout .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted,
body.woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    border: 1px solid #1699CA !important;
    box-shadow: 0 0 0 3px rgba(22, 153, 202, 0.12) !important;
    background-color: rgba(22, 153, 202, 0.03) !important;
}

/* مربعات الاختيار (الموافقة على الشروط / إضافة ملحوظة) */
body.woocommerce-checkout .wc-block-components-checkbox__input:checked {
    background-color: #1699CA !important;
    border-color: #1699CA !important;
}

/* زر إتمام الطلب: سماوي، وhover كحلي (نفس سلوك أزرار لوحة التحكم) */
body.woocommerce-checkout .wc-block-components-checkout-place-order-button,
body.theme-workreap .wr-theme-box .wc-block-components-button:not(.is-link) {
    background-color: #1699CA !important;
    border-color: #1699CA !important;
    color: #ffffff !important;
    border-radius: 10px !important;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:focus,
body.theme-workreap .wr-theme-box .wc-block-components-button:not(.is-link):hover {
    background-color: #0A2540 !important;
    border-color: #0A2540 !important;
    color: #ffffff !important;
}


/* =====================================================================
 * [6] صفحة «تم استلام الطلب» (checkout/order-received)
 * تنطبق على الحالات الثلاث: طلب خدمة، مشروع، شحن محفظة —
 * فكلها تمر عبر نفس قالب الشكر الكلاسيكي (.woocommerce-order)
 * ===================================================================== */

/* لمسات الهوية على كل المقاسات */
body.woocommerce-order-received .woocommerce-thankyou-order-received {
    color: #0A2540 !important;
    font-weight: 600 !important;
}
body.woocommerce-order-received .woocommerce ul.order_details li strong {
    color: #0A2540 !important;
}
body.woocommerce-order-received .woocommerce-order h2,
body.woocommerce-order-received .woocommerce-column__title {
    color: #0A2540 !important;
}

/* إصلاح الجدول المشوّه على الهاتف */
@media (max-width: 767.98px) {

    body.woocommerce-order-received .woocommerce-order {
        padding: 20px 14px !important;
    }

    /* شريط معلومات الطلب العلوي (رقم الطلب/التاريخ/الإجمالي/وسيلة الدفع)
       يتكدّس عمودياً بدل التزاحم الأفقي */
    body.woocommerce-order-received .woocommerce ul.order_details {
        display: block !important;
        padding: 0 !important;
        margin: 0 0 20px !important;
    }
    body.woocommerce-order-received .woocommerce ul.order_details li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 10px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #eeeeee !important;
        font-size: 13px !important;
        line-height: 22px !important;
    }

    /* جدول تفاصيل الطلب: يتمرّر أفقياً داخل حاويته بدل تكسّر الأعمدة */
    body.woocommerce-order-received .woocommerce table.shop_table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border: 0 !important;
    }
    body.woocommerce-order-received .woocommerce table.shop_table th,
    body.woocommerce-order-received .woocommerce table.shop_table td {
        padding: 10px 12px !important;
        font-size: 13px !important;
        white-space: normal !important;
    }
    /* اسم المنتج (خدمة/مشروع/شحن محفظة) قد يطول — لفّ الكلمات */
    body.woocommerce-order-received .woocommerce table.shop_table td.woocommerce-table__product-name,
    body.woocommerce-order-received .woocommerce table.shop_table td.product-name {
        word-break: break-word !important;
        min-width: 140px;
    }

    /* عناوين الفوترة/الشحن أسفل الصفحة: عمود واحد */
    body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column--1,
    body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column--2 {
        width: 100% !important;
        float: none !important;
        margin: 0 0 15px !important;
    }
}


/* =====================================================================
 * [7] سياسة النزاع (البانر هو واجهة التصعيد الوحيدة)
 * ---------------------------------------------------------------------
 * التصعيد يجري من بانر الحالة أعلى صفحة الطلب:
 *   workreap/dashboard/dashboard-freelancers-dispute-notificaton.php (override).
 * القالب الأب يطبع أيضاً زر تصعيد مكرَّراً في الشريط الجانبي
 * (.wr-raisedispute span[data-dispute_id]) وهو مُقيَّد بالمهلة فيبدو خاملاً
 * ضمن اليوم — نُخفيه لتبقى واجهة واحدة واضحة. زر «إنشاء طلب استرداد»
 * (#taskrefundrequest بلا data-dispute_id) يبقى ظاهراً.
 * ===================================================================== */

/* إخفاء الزر «الميّت» فقط في الشريط الجانبي: القالب الأب يطبع ضمن المهلة
 * <span id="" data-dispute_id> بلا مُعرِّف فعّال (بلا معالج) فيبدو زراً لكنه
 * لا يعمل. نُخفي هذا الزر الميّت **حصراً** (id != taskdisputerequest)، بينما
 * الزر الفعّال (id="taskdisputerequest") يبقى ظاهراً دائماً. هكذا لا نُخفي
 * أبداً زراً يعمل، والتصعيد يجري من البانر أعلى الصفحة. زر «طلب الاسترداد»
 * (بلا data-dispute_id) غير متأثّر. */
.wr-raisedispute span.wr-btn[data-dispute_id]:not([id="taskdisputerequest"]) {
    display: none !important;
}

/* الزر المعطّل «إنشاء نزاع» ضمن مهلة ردّ المستقل — مظهر غير مُفعَّل. */
.qudurat-dispute-wait {
    background-color: #9aa7b2 !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
    opacity: .85;
}
.qudurat-dispute-wait:hover,
.qudurat-dispute-wait:focus {
    background-color: #8a97a2 !important;
    color: #ffffff !important;
}

/* =====================================================================
 * [8] صفحة الباقات (pricing-plans) — الأخضر المتبقي → كحلي (يوليو 2026)
 * ---------------------------------------------------------------------
 * بقايا أخضر #1bccae من style.css المُجمَّع للأب:
 *   - العنوان الفرعي فوق «اختر الباقة…» (style.css:18033)
 *   - شارة «جاري التنفيذ» في صندوق الباقة الحالية (style.css:3804)
 * إطار الباقة الأكثر شعبية عولج بتصحيح كلاس في qudurat-master.css [ز].
 * شارة «منتهية» (.wr-expire) تبقى حمراء دلاليًّا — لذا الاستثناء.
 * ===================================================================== */
.wr-pricingholder .wr-sectioninfov2 .wr-sectiontitle h3 {
    color: #0A2540 !important;
}
.wr-onging:not(.wr-expire) {
    background: #0A2540 !important;
    color: #ffffff !important;
}

/* =====================================================================
 * [9] مفتاح Milestones في إضافة مشروع (add-project) → سماوي بالكامل
 * ---------------------------------------------------------------------
 * الأصل أخضر: .wr-switch .form-check-input:checked { border #22C55E }
 * و ::before (العقدة) #22C55E (style.css:26568-26578)، وفوقهما
 * .wr-project-wrapper.wr-aboutprojectstep .form-check-input:checked
 * { border-color:#22C55E !important } (style.css:26737 — تحديد أعلى،
 * لذا أُدرج مطابقه في السلسلة). عند التفعيل: مسار سماوي مملوء + عقدة
 * بيضاء («كله سماوي» كما طلب المالك). حالة عدم التفعيل تبقى رمادية.
 * ===================================================================== */
.wr-switch .form-check-input:checked,
.wr-project-wrapper .wr-switch .form-check-input:checked,
.wr-project-wrapper.wr-aboutprojectstep .wr-switch .form-check-input:checked {
    border-color: #1699CA !important;
    background-color: #1699CA !important;
}
.wr-switch .form-check-input:checked::before,
.wr-project-wrapper.wr-aboutprojectstep .wr-switch .form-check-input:checked::before {
    background-color: #ffffff !important;
}
