@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@700&display=swap');
/* =========================================================
   Local Font: Tajawal
   ========================================================= */

@font-face {
    font-family: 'Tajawal';
    src: url('/assets/fonts/tajawal/tajawal-arabic-300-normal.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('/assets/fonts/tajawal/tajawal-arabic-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('/assets/fonts/tajawal/tajawal-arabic-500-normal.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('/assets/fonts/tajawal/tajawal-arabic-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('/assets/fonts/tajawal/tajawal-arabic-800-normal.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('/assets/fonts/tajawal/tajawal-arabic-900-normal.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

body,
button,
input,
select,
textarea,
.btn,
.navbar,
.dropdown-menu,
.modal,
.card,
.header,
.main-header,
.site-header,
.footer,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
li {
    font-family: 'Cairo', 'Tajawal', Arial, sans-serif !important;
}

/* =========================================================
   Quick Donation + Side Actions - Final Responsive Version
   ========================================================= */

/* إخفاء نصوص قارئ الشاشة */
.quick-donation-wrapper .sr-only,
.quick-donation-wrapper .visually-hidden,
.quick-donation-wrapper .d-none {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* منع تمرير الصفحة الخلفية عند فتح المودل */
body.quick-donation-is-open {
    overflow: hidden !important;
}

/* في الديسكتوب نخلي الصفحة قابلة للتمرير لأن التبرع جانبي */
@media (min-width: 992px) {
    body.quick-donation-is-open {
        overflow: auto !important;
    }
}

/* =========================================================
   القائمة الجانبية السريعة - Desktop
   ========================================================= */

@media (min-width: 992px) {
    .site-side-actions {
        position: fixed;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 6200;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    .site-side-actions .side-action-btn {
        width: 54px;
        height: 54px;
        border-radius: 18px;
        border: 0;
        outline: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        text-decoration: none;
        cursor: pointer;
        box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
        transition: all .22s ease;
        position: relative;
        overflow: visible;
    }

    .site-side-actions .side-action-btn i {
        font-size: 22px;
        line-height: 1;
        position: relative;
        z-index: 2;
    }

    .site-side-actions .side-action-btn span {
        position: absolute;
        left: 64px;
        top: 50%;
        transform: translateY(-50%);
        background: #fff;
        color: #1f2937;
        min-width: 88px;
        padding: 8px 12px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 800;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .14);
        transition: all .22s ease;
    }

    .site-side-actions .side-action-btn:hover {
        transform: translateX(4px);
        box-shadow: 0 16px 34px rgba(15, 23, 42, .24);
    }

    .site-side-actions .side-action-btn:hover span {
        opacity: 1;
        visibility: visible;
        left: 70px;
    }

    .site-side-actions .side-donate-btn {
        background: var(--site-gradient,
                linear-gradient(135deg, var(--site-primary, var(--primary-color)), var(--site-secondary, var(--secondary-color)))) !important;
    }

    .site-side-actions .side-whatsapp-btn {
        background: linear-gradient(135deg, #25D366, #128C7E) !important;
    }

    .site-side-actions .side-call-btn {
        background: linear-gradient(135deg,
                var(--site-secondary, var(--secondary-color)),
                color-mix(in srgb, var(--site-secondary, var(--secondary-color)) 70%, #000)) !important;
    }

    .float,
    .whatsapp-float,
    a[href*="wa.me"].float,
    a[href*="whatsapp"].float {
        display: none !important;
    }
}

/* =========================================================
   صندوق التبرع السريع - Desktop
   ========================================================= */

@media (min-width: 992px) {
    .fixed-side-menu.quick-donation-wrapper {
        position: fixed !important;
        top: 50% !important;
        left: -410px !important;
        right: auto !important;
        width: 360px !important;
        max-width: 360px !important;
        transform: translateY(-50%) !important;
        z-index: 6100 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: left .25s ease, opacity .2s ease, visibility .2s ease !important;
        overflow: visible !important;
        background: transparent !important;
    }

    .fixed-side-menu.quick-donation-wrapper.has-focus,
    .fixed-side-menu.quick-donation-wrapper.qd-opened,
    .fixed-side-menu.quick-donation-wrapper.bottom-nav-quick-open {
        left: 92px !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .fixed-side-menu.quick-donation-wrapper>.clickable,
    .fixed-side-menu.quick-donation-wrapper>.d-flex.clickable,
    .fixed-side-menu.quick-donation-wrapper>.title,
    .fixed-side-menu.quick-donation-wrapper>.icon {
        display: none !important;
    }
}

/* =========================================================
   صندوق التبرع السريع - Mobile
   ========================================================= */

@media (max-width: 767.98px) {
    .site-side-actions {
        display: none !important;
    }

    .fixed-side-menu.quick-donation-wrapper {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        z-index: 9999 !important;
        background: rgba(15, 23, 42, .45) !important;
        display: none !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding: 72px 12px 24px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        transition: none !important;
    }

    .fixed-side-menu.quick-donation-wrapper.has-focus,
    .fixed-side-menu.quick-donation-wrapper.qd-opened,
    .fixed-side-menu.quick-donation-wrapper.bottom-nav-quick-open {
        display: flex !important;
    }

    .fixed-side-menu.quick-donation-wrapper>.clickable,
    .fixed-side-menu.quick-donation-wrapper>.d-flex.clickable {
        display: none !important;
    }
}

/* =========================================================
   صندوق التبرع السريع - Tablet / iPad / Surface / Nest Hub
   ========================================================= */

@media (min-width: 768px) and (max-width: 1199.98px) {
    .site-side-actions {
        display: none !important;
    }

    .fixed-side-menu.quick-donation-wrapper {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        z-index: 9999 !important;
        background: rgba(15, 23, 42, .44) !important;
        display: none !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 32px 24px !important;
        margin: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        transition: none !important;
    }

    .fixed-side-menu.quick-donation-wrapper.has-focus,
    .fixed-side-menu.quick-donation-wrapper.qd-opened,
    .fixed-side-menu.quick-donation-wrapper.bottom-nav-quick-open {
        display: flex !important;
    }

    .fixed-side-menu.quick-donation-wrapper>.clickable,
    .fixed-side-menu.quick-donation-wrapper>.d-flex.clickable {
        display: none !important;
    }
}

/* =========================================================
   Side Actions - Align With Main Content
   ضبط أزرار التبرع/واتساب/اتصال مع حاوية الموقع عند Ctrl + -
========================================================= */

@media (min-width: 1200px) {

    .site-side-actions,
    .site-side-actions.d-xl-flex {
        position: fixed !important;
        top: 50% !important;

        /* left: max(18px, calc((100vw - 1180px) / 2 - 70px)) !important; */
        left: 15px;
        right: auto !important;
        transform: translateY(-50%) !important;
        z-index: 6200 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        align-items: center !important;
    }
}

/* في الشاشات الواسعة جدًا لا تبتعد الأزرار زيادة */
@media (min-width: 1800px) {

    .site-side-actions,
    .site-side-actions.d-xl-flex {
        left: calc((100vw - 1180px) / 2 - 70px) !important;
    }
}

/* التابلت والجوال: إخفاء نهائي لأنها موجودة داخل القائمة الجانبية */
@media (max-width: 1199.98px) {

    .site-side-actions,
    .site-side-actions.d-xl-flex {
        display: none !important;
    }
}

/* =========================================================
   الكرت الداخلي
   ========================================================= */

.fixed-side-menu.quick-donation-wrapper .options {
    display: none;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #fff !important;
    border-radius: 22px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    box-shadow: 0 22px 55px rgba(15, 23, 42, .22) !important;
    box-sizing: border-box !important;
}

.fixed-side-menu.quick-donation-wrapper.has-focus .options,
.fixed-side-menu.quick-donation-wrapper.qd-opened .options,
.fixed-side-menu.quick-donation-wrapper.bottom-nav-quick-open .options {
    display: block !important;
}

@media (min-width: 1200px) {
    .fixed-side-menu.quick-donation-wrapper .options {
        width: 360px !important;
        max-width: 360px !important;
        max-height: calc(100vh - 130px) !important;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .fixed-side-menu.quick-donation-wrapper .options {
        width: min(390px, calc(100vw - 48px)) !important;
        max-width: 390px !important;
        max-height: calc(100dvh - 64px) !important;
        margin: auto !important;
    }
}

@media (max-width: 767.98px) {
    .fixed-side-menu.quick-donation-wrapper .options {
        width: min(380px, calc(100vw - 24px)) !important;
        max-height: calc(100dvh - 100px) !important;
        margin: 0 auto !important;
    }
}

/* رأس الكرت */
.fixed-side-menu.quick-donation-wrapper .options::before {
    content: "التبرع السريع";
    display: block;
    width: 100%;
    background: var(--site-gradient,
            linear-gradient(135deg, var(--site-primary, var(--primary-color)), var(--site-secondary, var(--secondary-color)))) !important;
    box-shadow: 0 12px 25px color-mix(in srgb, var(--site-primary, var(--primary-color)) 22%, transparent) !important;

    color: #fff;
    font-size: 21px;
    font-weight: 900;
    text-align: center;
    padding: 15px 48px 15px 12px;
    line-height: 1.4;
    box-sizing: border-box;
    margin-bottom: 6px !important;
}

/* =========================================================
   زر إغلاق مودل التبرع السريع
   ========================================================= */

.fixed-side-menu.quick-donation-wrapper .qd-modal-close {
    position: absolute !important;
    top: 10px !important;
    left: 12px !important;
    z-index: 30 !important;
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, .18) !important;
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: all .2s ease !important;
    padding: 0 !important;
}

.fixed-side-menu.quick-donation-wrapper .qd-modal-close:hover {
    background: rgba(255, 255, 255, .32) !important;
    transform: rotate(90deg);
}

/* وصف التبرع */
.fixed-side-menu.quick-donation-wrapper .text-desc {
    display: block !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.7 !important;
    text-align: center !important;
    margin: 12px 16px 10px !important;
}

/* تبويبات أنواع التبرع */
.fixed-side-menu.quick-donation-wrapper .options .nav-tabs,
.fixed-side-menu.quick-donation-wrapper #qd-options {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 4px 14px 14px !important;
    margin: 12px 0 0 !important;
    border: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #fff !important;
}

.fixed-side-menu.quick-donation-wrapper .options .nav-tabs li,
.fixed-side-menu.quick-donation-wrapper #qd-options li {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 58px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    color: var(--site-primary, var(--primary-color)) !important;
    padding: 8px 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
    text-align: center !important;
    white-space: normal !important;
    box-sizing: border-box !important;
    cursor: pointer;
    transition: all .18s ease;
}

.fixed-side-menu.quick-donation-wrapper .options .nav-tabs li:hover,
.fixed-side-menu.quick-donation-wrapper #qd-options li:hover {
    border-color: var(--site-primary, var(--primary-color)) !important;
    background: color-mix(in srgb, var(--site-primary, var(--primary-color)) 8%, #ffffff) !important;
}

.fixed-side-menu.quick-donation-wrapper .options .nav-tabs li.active,
.fixed-side-menu.quick-donation-wrapper #qd-options li.active {
    color: #fff !important;
    background: var(--site-gradient,
            linear-gradient(135deg, var(--site-primary, var(--primary-color)), var(--site-secondary, var(--secondary-color)))) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--site-primary, var(--primary-color)) 22%, transparent) !important;
    border-color: transparent !important;

}

/* محتوى التبرع */
.fixed-side-menu.quick-donation-wrapper .tab-content,
.fixed-side-menu.quick-donation-wrapper .amount-field {
    width: 100% !important;
    padding: 18px 16px 20px !important;
    background: linear-gradient(180deg, #f8fafc, #fff) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* إصلاح ظهور محتوى التبويب */
.fixed-side-menu.quick-donation-wrapper .tab-content {
    display: block !important;
}

.fixed-side-menu.quick-donation-wrapper .tab-content>.tab-pane,
.fixed-side-menu.quick-donation-wrapper #fixed-side-menu-tab1,
.fixed-side-menu.quick-donation-wrapper .tab-content>.tab-pane.fade,
.fixed-side-menu.quick-donation-wrapper .tab-content>.tab-pane.fade.in,
.fixed-side-menu.quick-donation-wrapper .tab-content>.tab-pane.fade.show,
.fixed-side-menu.quick-donation-wrapper .tab-content>.tab-pane.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.fixed-side-menu.quick-donation-wrapper .amount-field,
.fixed-side-menu.quick-donation-wrapper .amount-field.collapse,
.fixed-side-menu.quick-donation-wrapper .amount-field.collapse.show,
.fixed-side-menu.quick-donation-wrapper .amount-field.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
}

/* إخفاء نموذج الدفع بالبطاقة في البداية */
.fixed-side-menu.quick-donation-wrapper #creditCardFromDetailsQuickMenu:not(.show) {
    display: none !important;
}

/* عنوان مبلغ التبرع */
.fixed-side-menu.quick-donation-wrapper .amount-field::before {
    content: "اختر مبلغ التبرع";
    display: block;
    color: var(--site-primary, var(--primary-color)) !important;
    font-size: 22px;
    font-weight: 900;
    text-align: center;
    margin: 0 0 14px;
    line-height: 1.4;
}

/* أزرار المبالغ */
.fixed-side-menu.quick-donation-wrapper #qd-pre-amounts {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.fixed-side-menu.quick-donation-wrapper #qd-pre-amounts .pre-amount,
.fixed-side-menu.quick-donation-wrapper button[data-amount],
.fixed-side-menu.quick-donation-wrapper .amount-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    padding: 0 4px !important;
    border-radius: 12px !important;
    border: 1px solid #dbe3ea !important;
    background: #fff !important;
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

.fixed-side-menu.quick-donation-wrapper #qd-pre-amounts .pre-amount.active,
.fixed-side-menu.quick-donation-wrapper button[data-amount].active {
    border-color: var(--site-primary, var(--primary-color)) !important;
    color: var(--site-primary, var(--primary-color)) !important;
    background: color-mix(in srgb, var(--site-primary, var(--primary-color)) 8%, #ffffff) !important;

}

/* حقل المبلغ */
.fixed-side-menu.quick-donation-wrapper .price-details {
    width: 100% !important;
    min-height: 52px !important;
    margin: 0 0 12px !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
    border: 1px solid #dbe3ea !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}

.fixed-side-menu.quick-donation-wrapper .price-details input,
.fixed-side-menu.quick-donation-wrapper input.amount,
.fixed-side-menu.quick-donation-wrapper input[name="total_amount"],
.fixed-side-menu.quick-donation-wrapper input[name="amount"],
.fixed-side-menu.quick-donation-wrapper input[type="number"] {
    flex: 1 !important;
    width: 100% !important;
    height: 34px !important;
    border: 0 !important;
    outline: 0 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-align: right !important;
    color: #0f172a !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

.fixed-side-menu.quick-donation-wrapper .price-details input::placeholder {
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

/* رسالة الحد الأدنى */
.fixed-side-menu.quick-donation-wrapper .qd-min-error {
    display: none;
    margin: 0 0 12px;
    padding: 9px 12px;
    border-radius: 12px;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.fixed-side-menu.quick-donation-wrapper .qd-min-error.show {
    display: block;
}

/* زر التبرع */
.fixed-side-menu.quick-donation-wrapper button[type="submit"],
.fixed-side-menu.quick-donation-wrapper input[type="submit"],
.fixed-side-menu.quick-donation-wrapper .submit,
.fixed-side-menu.quick-donation-wrapper .btn-primary,
.fixed-side-menu.quick-donation-wrapper .btn-primary-blue,
.fixed-side-menu.quick-donation-wrapper .btn-gradient {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    border: 0 !important;
    background: var(--site-gradient,
            linear-gradient(135deg, var(--site-primary, var(--primary-color)), var(--site-secondary, var(--secondary-color)))) !important;
    box-shadow: 0 12px 25px color-mix(in srgb, var(--site-primary, var(--primary-color)) 22%, transparent) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    margin-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.fixed-side-menu.quick-donation-wrapper button[type="submit"]:hover,
.fixed-side-menu.quick-donation-wrapper input[type="submit"]:hover,
.fixed-side-menu.quick-donation-wrapper .btn-primary-blue:hover,
.fixed-side-menu.quick-donation-wrapper .btn-gradient:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(13, 143, 117, .28) !important;
}

/* منع السكرول الأفقي */
.fixed-side-menu.quick-donation-wrapper,
.fixed-side-menu.quick-donation-wrapper *,
.fixed-side-menu.quick-donation-wrapper *::before,
.fixed-side-menu.quick-donation-wrapper *::after {
    box-sizing: border-box !important;
}

/* =========================================================
   تحسين الجوال الصغير
   ========================================================= */

@media (max-width: 575.98px) {
    .fixed-side-menu.quick-donation-wrapper {
        padding-top: 72px !important;
    }

    .fixed-side-menu.quick-donation-wrapper .options::before {
        font-size: 19px;
        padding: 13px 46px 13px 10px;
    }

    .fixed-side-menu.quick-donation-wrapper .qd-modal-close {
        width: 32px !important;
        height: 32px !important;
        top: 9px !important;
        left: 10px !important;
        font-size: 18px !important;
    }

    .fixed-side-menu.quick-donation-wrapper .options .nav-tabs,
    .fixed-side-menu.quick-donation-wrapper #qd-options {
        gap: 6px !important;
        padding: 0 10px 12px !important;
    }

    .fixed-side-menu.quick-donation-wrapper .options .nav-tabs li,
    .fixed-side-menu.quick-donation-wrapper #qd-options li {
        min-height: 54px !important;
        font-size: 10.5px !important;
        padding: 7px 4px !important;
    }

    .fixed-side-menu.quick-donation-wrapper .tab-content,
    .fixed-side-menu.quick-donation-wrapper .amount-field {
        padding: 16px 12px 18px !important;
    }

    .fixed-side-menu.quick-donation-wrapper .amount-field::before {
        font-size: 20px;
    }

    .fixed-side-menu.quick-donation-wrapper #qd-pre-amounts {
        gap: 6px !important;
    }

    .fixed-side-menu.quick-donation-wrapper #qd-pre-amounts .pre-amount {
        font-size: 11px !important;
    }
}

/* =========================================================
   تحسين التابلت - Landscape
   ========================================================= */

@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
    .fixed-side-menu.quick-donation-wrapper {
        padding: 20px 24px !important;
        align-items: center !important;
    }

    .fixed-side-menu.quick-donation-wrapper .options {
        width: min(360px, calc(100vw - 48px)) !important;
        max-width: 360px !important;
        max-height: calc(100dvh - 40px) !important;
    }

    .fixed-side-menu.quick-donation-wrapper .options::before {
        font-size: 18px !important;
        padding: 10px 46px 10px 10px !important;
    }

    .fixed-side-menu.quick-donation-wrapper .qd-modal-close {
        top: 6px !important;
        left: 8px !important;
        width: 30px !important;
        height: 30px !important;
        font-size: 17px !important;
    }

    .fixed-side-menu.quick-donation-wrapper #qd-options,
    .fixed-side-menu.quick-donation-wrapper .options .nav-tabs {
        gap: 6px !important;
        padding: 10px 10px 8px !important;
        margin-top: 0 !important;
    }

    .fixed-side-menu.quick-donation-wrapper #qd-options li,
    .fixed-side-menu.quick-donation-wrapper .options .nav-tabs li {
        min-height: 48px !important;
        font-size: 9.8px !important;
        padding: 6px 3px !important;
    }

    .fixed-side-menu.quick-donation-wrapper .tab-content,
    .fixed-side-menu.quick-donation-wrapper .amount-field {
        padding: 13px 13px 15px !important;
    }

    .fixed-side-menu.quick-donation-wrapper .amount-field::before {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }

    .fixed-side-menu.quick-donation-wrapper #qd-pre-amounts {
        gap: 6px !important;
        margin-bottom: 10px !important;
    }

    .fixed-side-menu.quick-donation-wrapper #qd-pre-amounts .pre-amount {
        height: 36px !important;
        font-size: 10px !important;
    }

    .fixed-side-menu.quick-donation-wrapper .price-details {
        min-height: 44px !important;
        margin-bottom: 10px !important;
    }

    .fixed-side-menu.quick-donation-wrapper button[type="submit"],
    .fixed-side-menu.quick-donation-wrapper .btn-primary-blue,
    .fixed-side-menu.quick-donation-wrapper .btn-gradient {
        min-height: 42px !important;
        font-size: 14px !important;
    }
}

/* =========================================================
   تحسين التابلت - Portrait
   ========================================================= */

@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: portrait) {
    .fixed-side-menu.quick-donation-wrapper {
        padding: 80px 24px 32px !important;
        align-items: flex-start !important;
    }

    .fixed-side-menu.quick-donation-wrapper .options {
        width: min(400px, calc(100vw - 48px)) !important;
        max-width: 400px !important;
        max-height: calc(100dvh - 120px) !important;
    }
}

/* =========================================================
   Home Projects Section - Grid Desktop / Slider Mobile
   قسم مشاريع تنتظر دعمكم
========================================================= */

.projects-section {
    position: relative !important;
    padding: clamp(34px, 5vw, 64px) 0 !important;
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--site-primary) 2.2%, #ffffff) 0%,
            color-mix(in srgb, var(--site-primary) 1.2%, #ffffff) 48%,
            #ffffff 100%) !important;
    overflow: hidden;
}

.projects-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 20%,
            color-mix(in srgb, var(--site-primary) 2.2%, transparent),
            transparent 46%);
    pointer-events: none;
    z-index: 0;
}

.projects-section .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   Section Title
========================================================= */

.projects-section .section-title {
    /* margin-bottom: 18px; */
    font-size: clamp(25px, 3vw, 36px);
    font-weight: 900;
    color: var(--site-primary, var(--primary-color));
}

.projects-section .section-title::after {
    width: 110px;
    height: 3px;
    margin-top: 12px;
    background: var(--site-secondary, var(--secondary-color));
}

/* =========================================================
   Tabs
========================================================= */

.projects-section .donation-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px !important;
    margin-bottom: clamp(24px, 3vw, 36px) !important;
}

.projects-section .donation-tabs .nav-item {
    margin: 0;
}

.projects-section .donation-tabs .nav-link {
    min-width: 118px;
    min-height: 46px;
    margin: 0;
    padding: 10px 24px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: rgba(255, 255, 255, .92);
    color: #475569;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
    transition: all .22s ease;
}

.projects-section .donation-tabs .nav-link.active,
.projects-section .donation-tabs .nav-link:hover {
    background: var(--site-gradient);
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--site-primary) 18%, transparent);
}

/* =========================================================
   Wrapper / Desktop Grid / Mobile Slider
========================================================= */

.projects-responsive-wrapper {
    width: 100%;
    position: relative;
}

.home-projects-swiper {
    width: 100%;
    overflow: visible;
}

@media (min-width: 992px) {
    .projects-grid-desktop {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px;
        transform: none !important;
    }

    .projects-grid-desktop .project-slide-item {
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
    }

    .home-projects-pagination {
        display: none !important;
    }
}

/* =========================================================
   Project Card
========================================================= */

.projects-section .project-card {
    height: 100%;
    border: 1px solid rgba(15, 23, 42, .07);
    border-top: 4px solid var(--site-secondary, var(--secondary-color));
    border-radius: 22px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.projects-section .project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 13px 30px rgba(15, 23, 42, .075);
    border-top-color: var(--site-primary, var(--primary-color));
}

.projects-section .project-content {
    padding: 18px 18px 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.projects-section .project-title {
    min-height: 28px;
    margin-bottom: 12px;
    font-size: 17px;
    font-weight: 900;
    color: #111827;
    text-decoration: none;
}

.projects-section .project-title:hover {
    color: var(--site-primary, var(--primary-color));
}



/* =========================================================
   Quick Amount Buttons
========================================================= */

.projects-section .quick-amounts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.projects-section .amount-btn {
    min-height: 38px;
    padding: 6px 8px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
    transition: all .2s ease;
}

.projects-section .amount-btn:hover,
.projects-section .amount-btn.active {
    background: color-mix(in srgb, var(--site-primary) 9%, #ffffff);
    color: var(--site-primary);
    border-color: var(--site-primary);
}

/* =========================================================
   Donation Controls
   المبلغ + التبرع + السلة + رسالة الحد الأدنى
========================================================= */

.projects-section .project-donation-box {
    width: 100%;
    margin-top: auto;
}

.projects-section .input-group-custom {
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

.projects-section .donation-form {
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.projects-section .cart-input,
.projects-section .amount-input {
    width: 100%;
    height: 44px;
    min-width: 0;
    padding: 0 18px;
    border: 1px solid color-mix(in srgb, var(--site-primary) 13%, #e5e7eb);
    border-radius: 999px;
    background: #f8fafc;
    color: var(--site-text, #111827);
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    outline: none;
    transition: all .22s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

.projects-section .cart-input::placeholder,
.projects-section .amount-input::placeholder {
    color: #8b95a5;
    font-weight: 700;
}

.projects-section .cart-input:focus,
.projects-section .amount-input:focus {
    background: #fff;
    border-color: var(--site-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--site-primary) 10%, transparent);
}

.projects-section .amount-input.is-invalid,
.projects-section .project-donation-box.has-error .amount-input {
    border-color: #ef4444 !important;
    background: #fff7f7 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .10) !important;
}

.projects-section .project-donation-box.is-valid .amount-input {
    border-color: var(--site-primary) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--site-primary) 9%, transparent) !important;
}

.projects-section .btn-donate {
    width: auto;
    min-width: 92px;
    height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--site-gradient);
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--site-primary) 20%, transparent);
    transition: all .22s ease;
    white-space: nowrap;
}

.projects-section .btn-donate:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--site-primary) 26%, transparent);
}

.projects-section .btn-donate i {
    font-size: 14px;
}

.projects-section .btn-cart {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    border: 1px solid var(--site-primary);
    background: #fff;
    color: var(--site-primary, var(--primary-color));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .22s ease;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
}

.projects-section .btn-cart:hover {
    background: var(--site-primary);
    color: #fff;
    transform: translateY(-2px);
}

.projects-section .btn-cart:disabled {
    opacity: .75;
    cursor: not-allowed;
    transform: none;
}

.projects-section .amount-min-message {
    display: none;
    width: 100%;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 14px;
    background: #fff7ed;
    color: #dc2626;
    border: 1px solid #fed7aa;
    font-size: 12.5px;
    font-weight: 900;
    line-height: 1.5;
    text-align: center;
}

.projects-section .project-donation-box.has-error .amount-min-message,
.projects-section .amount-min-message[style*="display: block"] {
    display: block !important;
}

/* =========================================================
   Project Card Image Ratio - 800x500
   النسبة المعتمدة لصور المشاريع: 16:10
========================================================= */

.projects-section .project-img-wrapper,
.projects-page-section .project-img-wrapper {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    background: #f1f5f9 !important;
    border-radius: 0 0 18px 18px !important;
    overflow: hidden !important;
}

.projects-section .project-img-wrapper>a,
.projects-page-section .project-img-wrapper>a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.projects-section .project-img-wrapper img,
.projects-page-section .project-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* =========================================================
   Completed Project Card - Home + Projects Page
   ختم وتعطيل المشروع المكتمل بألوان ديناميكية
========================================================= */

.projects-section .project-img-wrapper,
.projects-page-section .project-img-wrapper {
    position: relative !important;
    overflow: hidden !important;
}

.projects-section .project-card.is-completed,
.projects-page-section .project-card.is-completed {
    border-top-color: var(--site-primary, var(--primary-color)) !important;
}

.projects-section .project-card.is-completed .project-img-wrapper>a img,
.projects-page-section .project-card.is-completed .project-img-wrapper>a img {
    filter: saturate(.94) brightness(.98) !important;
}

.projects-section .project-completed-stamp,
.projects-page-section .project-completed-stamp {
    position: absolute !important;
    inset: 0 !important;
    z-index: 6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
}

.projects-section .project-completed-stamp img,
.projects-page-section .project-completed-stamp img {
    width: min(60%, 185px) !important;
    max-width: 185px !important;
    height: auto !important;
    object-fit: contain !important;
    opacity: .86 !important;
    transform: rotate(-14deg) !important;
    filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--site-primary, var(--primary-color)) 18%, transparent)) !important;
}

.projects-section .project-completed-badge,
.projects-page-section .project-completed-badge {
    position: absolute !important;
    right: 12px !important;
    bottom: 12px !important;
    z-index: 7 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--site-primary, var(--primary-color)) 92%, transparent) !important;
    color: #fff !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--site-primary, var(--primary-color)) 20%, transparent) !important;
    pointer-events: none !important;
}

.projects-section .project-card.is-completed .amount-btn,
.projects-section .project-card.is-completed .amount-input,
.projects-section .project-card.is-completed .cart-input,
.projects-section .project-card.is-completed .btn-donate,
.projects-section .project-card.is-completed .btn-cart,
.projects-page-section .project-card.is-completed .amount-btn,
.projects-page-section .project-card.is-completed .amount-input,
.projects-page-section .project-card.is-completed .cart-input,
.projects-page-section .project-card.is-completed .btn-donate,
.projects-page-section .project-card.is-completed .btn-cart {
    opacity: .85 !important;
    filter: grayscale(12%) !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

.projects-section .project-card.is-completed .share-btn,
.projects-section .project-card.is-completed .project-qr-thumb-btn,
.projects-page-section .project-card.is-completed .share-btn,
.projects-page-section .project-card.is-completed .project-qr-thumb-btn {
    opacity: .85 !important;
    filter: grayscale(15%) !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

.projects-section .project-card.is-completed .share-btn i,
.projects-section .project-card.is-completed .project-qr-thumb-btn img,
.projects-page-section .project-card.is-completed .share-btn i,
.projects-page-section .project-card.is-completed .project-qr-thumb-btn img {
    opacity: .85 !important;
}

.projects-section .project-card.is-completed .quick-amounts,
.projects-section .project-card.is-completed .project-donation-box,
.projects-page-section .project-card.is-completed .quick-amounts,
.projects-page-section .project-card.is-completed .project-donation-box {
    opacity: .88 !important;
    filter: grayscale(8%) !important;
}

.projects-section .project-card.is-completed .project-title,
.projects-section .project-card.is-completed .progress-wrapper,
.projects-section .project-card.is-completed .donation-stats,
.projects-page-section .project-card.is-completed .project-title,
.projects-page-section .project-card.is-completed .progress-wrapper,
.projects-page-section .project-card.is-completed .donation-stats {
    opacity: 1 !important;
    filter: none !important;
}

.projects-section .project-completed-note,
.projects-page-section .project-completed-note {
    width: 100%;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--site-primary, var(--primary-color)) 9%, #ffffff);
    color: color-mix(in srgb, var(--site-primary, var(--primary-color)) 82%, #000000);
    border: 1px solid color-mix(in srgb, var(--site-primary, var(--primary-color)) 22%, #ffffff);
    font-size: 14px;
    font-weight: 900;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

@media (max-width: 991.98px) {

    .projects-section .project-completed-stamp img,
    .projects-page-section .project-completed-stamp img {
        width: min(56%, 155px) !important;
        max-width: 155px !important;
        opacity: .78 !important;
    }

    .projects-section .project-completed-badge,
    .projects-page-section .project-completed-badge {
        right: 10px !important;
        bottom: 10px !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 575.98px) {

    .projects-section .project-completed-stamp img,
    .projects-page-section .project-completed-stamp img {
        width: min(50%, 125px) !important;
        max-width: 125px !important;
        opacity: .72 !important;
        transform: rotate(-12deg) !important;
    }

    .projects-section .project-completed-badge,
    .projects-page-section .project-completed-badge {
        right: 8px !important;
        bottom: 8px !important;
        padding: 5px 9px !important;
        font-size: 11px !important;
        gap: 5px !important;
    }

    .projects-section .project-completed-note,
    .projects-page-section .project-completed-note {
        margin-top: 10px;
        padding: 8px 10px;
        font-size: 12px;
        border-radius: 12px;
    }
}

/* =========================================================
   Completed Project Details - Final Dynamic Touch
   تحسين عرض المشروع المكتمل في صفحة التفاصيل بألوان ديناميكية
========================================================= */

/* صندوق المشروع مكتمل */
.completed-donation-box {
    text-align: center !important;
    padding: 26px 18px !important;
    border-radius: 22px !important;

    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--site-primary, var(--primary-color)) 10%, #ffffff),
            color-mix(in srgb, var(--site-primary, var(--primary-color)) 5%, #ffffff)) !important;

    border: 1px solid color-mix(in srgb, var(--site-primary, var(--primary-color)) 24%, #ffffff) !important;
    color: color-mix(in srgb, var(--site-primary, var(--primary-color)) 82%, #000000) !important;
}

/* دائرة أيقونة الصح */
.completed-donation-box i {
    width: 58px !important;
    height: 58px !important;
    margin: 0 auto 12px !important;
    border-radius: 50% !important;

    background: var(--site-gradient,
            linear-gradient(135deg,
                var(--site-primary, var(--primary-color)),
                var(--site-secondary, var(--secondary-color)))) !important;

    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 30px !important;
    line-height: 1 !important;

    box-shadow: 0 12px 26px color-mix(in srgb, var(--site-primary, var(--primary-color)) 24%, transparent) !important;
}

/* تأكيد ظهور أيقونة FontAwesome */
.completed-donation-box i::before {
    color: #fff !important;
    display: inline-block !important;
}

/* عنوان المشروع مكتمل */
.completed-donation-box h5 {
    color: color-mix(in srgb, var(--site-primary, var(--primary-color)) 84%, #000000) !important;
    font-size: 21px !important;
    font-weight: 1000 !important;
    margin-bottom: 8px !important;
}

/* نص الشكر */
.completed-donation-box p {
    color: color-mix(in srgb, var(--site-primary, var(--primary-color)) 58%, #334155) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    margin-bottom: 14px !important;
}

/* زر تصفح مشاريع أخرى */
.completed-donation-box a {
    min-height: 38px !important;
    padding: 7px 18px !important;
    border-radius: 999px !important;

    color: var(--site-primary, var(--primary-color)) !important;
    border: 1px solid var(--site-primary, var(--primary-color)) !important;
    background: #fff !important;

    font-weight: 900 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    transition: .22s ease !important;
}

/* تأثير الزر */
.completed-donation-box a:hover {
    color: #fff !important;

    background: var(--site-gradient,
            linear-gradient(135deg,
                var(--site-primary, var(--primary-color)),
                var(--site-secondary, var(--secondary-color)))) !important;

    border-color: transparent !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--site-primary, var(--primary-color)) 22%, transparent) !important;
}


/* تقليل الفراغ لو وصف المشروع فاضي */
.project-details-description:empty,
.project-details-description:has(+ .project-details-stats-box):empty {
    display: none !important;
}

/* الجوال */
@media (max-width: 575.98px) {
    .completed-donation-box {
        padding: 22px 14px !important;
        border-radius: 18px !important;
    }

    .completed-donation-box i {
        width: 50px !important;
        height: 50px !important;
        font-size: 24px !important;
        margin-bottom: 12px !important;
    }

    .completed-donation-box h5 {
        font-size: 18px !important;
        margin-bottom: 7px !important;
    }

    .completed-donation-box p {
        font-size: 12.5px !important;
        margin-bottom: 12px !important;
    }

    .completed-donation-box a {
        min-height: 35px !important;
        padding: 6px 15px !important;
        font-size: 12.5px !important;
    }
}

/* =========================================================
   Home Project Arrow Buttons + Small Phrase
========================================================= */

.arrow-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 14px;
}

.arrow-amount-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    border: 1px solid color-mix(in srgb, var(--site-primary, #006b4f) 30%, #d9dee7) !important;
    background: #fff !important;
    color: var(--site-text, #1f2937) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    transition: all .22s ease !important;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .05);
}

.arrow-amount-btn:hover,
.arrow-amount-btn.active {
    background: var(--site-primary, #006b4f) !important;
    color: #fff !important;
    border-color: var(--site-primary, #006b4f) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--site-primary, #006b4f) 18%, transparent);
}

.arrow-amount-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* صندوق العبارة يكون صغير مثل الموقع الأصلي */
.arrow-phrase-box {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    max-width: 94%;
    margin: 8px auto 10px !important;
    padding: 6px 13px 6px 12px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--site-primary, #006b4f) 8%, #fff) !important;
    color: var(--site-primary, #006b4f) !important;
    border: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    box-shadow: none !important;
    animation: arrowPhraseFade .2s ease both;
}

/* الأيقونة الافتراضية الصغيرة قبل النص */
.arrow-phrase-box::before {
    content: "\f05a";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-left: 6px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--site-primary, #006b4f);
    color: #fff;
    font-size: 9px;
    line-height: 1;
}

.arrow-phrase-box.d-none {
    display: none !important;
}

.arrow-phrase-text {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* إلغاء أي أيقونات قديمة لو كانت موجودة من الكود السابق */
.arrow-phrase-icon,
.arrow-phrase-icon i,
.arrow-amount-btn i {
    display: none !important;
}

@keyframes arrowPhraseFade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 575.98px) {
    .arrow-amounts {
        gap: 7px;
        margin-top: 12px;
    }

    .arrow-amount-btn {
        min-height: 32px;
        padding: 7px 11px !important;
        font-size: 12px !important;
    }

    .arrow-phrase-box {
        max-width: 92%;
        font-size: 11.5px !important;
        padding: 5px 11px !important;
    }

    .arrow-phrase-box::before {
        width: 17px;
        height: 17px;
        min-width: 17px;
        font-size: 8px;
    }
}

/* =========================================================
   Toast
========================================================= */

.site-toast-container {
    position: fixed;
    top: 92px;
    left: 24px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.site-toast {
    min-width: 260px;
    max-width: min(360px, calc(100vw - 32px));
    padding: 13px 15px;
    border-radius: 16px;
    background: #fff;
    color: #111827;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
    border: 1px solid #eef2f7;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateX(-18px);
    opacity: 0;
    transition: all .25s ease;
    pointer-events: auto;
    direction: rtl;
}

.site-toast.show {
    transform: translateX(0);
    opacity: 1;
}

.site-toast .toast-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    color: #fff;
    background: var(--site-primary, var(--primary-color)) !important;
}

.site-toast.toast-success .toast-icon {
    background: #16a34a;
}

.site-toast.toast-error .toast-icon {
    background: #ef4444;
}

.site-toast .toast-text {
    flex: 1;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.6;
}

/* =========================================================
   Tablet + Mobile
========================================================= */

@media (max-width: 991.98px) {
    .projects-section {
        padding: 42px 0 56px !important;
    }

    .projects-section .container {
        max-width: 100%;
        padding-inline: 16px;
    }

    .projects-section .text-center.mb-5 {
        margin-bottom: 26px !important;
    }

    .projects-section .donation-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-content: center !important;
        gap: 9px;
        overflow: visible !important;
        padding: 0;
        margin-bottom: 24px !important;
        width: 100%;
    }

    .projects-section .donation-tabs .nav-item {
        width: 100%;
        min-width: 0;
    }

    .projects-section .donation-tabs .nav-link {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        padding: 8px 8px;
        border-radius: 999px;
        font-size: 12.5px;
        line-height: 1.3;
        white-space: normal;
        text-align: center;
    }

    .projects-responsive-wrapper {
        padding-bottom: 34px;
    }

    .home-projects-swiper {
        overflow: hidden;
        padding: 4px 0 38px;
    }

    .home-projects-swiper .swiper-wrapper {
        align-items: stretch;
    }

    .home-projects-swiper .swiper-slide {
        height: auto;
    }

    .projects-section .project-card {
        max-width: 420px;
        margin: 0 auto;
        box-shadow: 0 6px 16px rgba(15, 23, 42, .035) !important;
        border-color: rgba(15, 23, 42, .06);
    }

    .projects-section .project-card:hover {
        transform: none;
        box-shadow: 0 6px 16px rgba(15, 23, 42, .035) !important;
    }

    .home-projects-pagination {
        bottom: 0 !important;
    }

    .home-projects-pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background: var(--site-primary, var(--primary-color));
        opacity: .28;
    }

    .home-projects-pagination .swiper-pagination-bullet-active {
        width: 24px;
        border-radius: 999px;
        opacity: 1;
        background: var(--site-secondary, var(--secondary-color)) !important;
    }
}

/* =========================================================
   Small Mobile
========================================================= */

@media (max-width: 575.98px) {
    .projects-section {
        padding-top: 26px !important;
        padding-bottom: 42px !important;
    }

    .projects-section .project-card {
        box-shadow: 0 4px 12px rgba(15, 23, 42, .028) !important;
    }

    .projects-section .text-center.mb-5,
    .projects-section .text-center.mb-4,
    .projects-section .text-center.mb-3 {
        margin-bottom: 10px !important;
    }

    .projects-section .section-title {
        font-size: 20px !important;
        margin-bottom: 12px !important;
    }

    .projects-section .section-title::after {
        width: 72px;
        margin-top: 8px;
    }

    .projects-section .donation-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 18px !important;
    }

    .projects-section .donation-tabs .nav-link {
        min-height: 36px !important;
        padding: 7px 8px !important;
        font-size: 11.5px !important;
        box-shadow: 0 6px 16px rgba(15, 23, 42, .04);
    }

    .projects-section .donation-tabs .nav-item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        width: 50%;
        margin-inline: auto;
    }

    .projects-responsive-wrapper {
        padding-bottom: 22px !important;
    }

    .home-projects-swiper {
        padding: 2px 0 30px !important;
    }


    .projects-section .input-group-custom,
    .projects-section .donation-form {
        gap: 7px;
    }

    .projects-section .cart-input,
    .projects-section .amount-input {
        height: 40px;
        padding: 0 10px;
        font-size: 13px;
    }

    .projects-section .btn-donate {
        min-width: 76px;
        height: 40px;
        padding: 0 13px;
        font-size: 13px;
    }

    .projects-section .btn-cart {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .projects-section .amount-min-message {
        margin-top: 7px;
        padding: 7px 10px;
        font-size: 11.5px;
    }

    .projects-section .quick-amounts {
        gap: 6px;
    }

    .projects-section .amount-btn {
        min-height: 34px;
        font-size: 12px;
        padding-inline: 4px;
    }

    .site-toast-container {
        top: auto;
        bottom: 82px;
        left: 12px;
        right: 12px;
    }

    .site-toast {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 390px) {
    .projects-section .donation-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .projects-section .donation-tabs .nav-link {
        min-height: 38px;
        font-size: 12px;
        padding: 7px 6px;
    }
}

/* Tabs Icons */
.donation-tabs .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    direction: rtl !important;
    flex-direction: row !important;
}

.donation-tabs .nav-link i {
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--site-primary, var(--primary-color));
    font-size: 16px !important;
    line-height: 1 !important;
    transition: all 0.25s ease !important;
}

/* لما تمرر على التاب غير النشط */
.donation-tabs .nav-link:hover i {
    color: #fff;
    transform: translateY(-1px) scale(1.08);
}

/* التاب النشط */
.donation-tabs .nav-link.active i {
    color: #fff !important;
}

/* لو التاب نشط وتم تمرير الماوس عليه، لا تختفي الأيقونة */
.donation-tabs .nav-link.active:hover i {
    color: #fff !important;
    opacity: 1 !important;
}

/* النص داخل التاب */
.donation-tabs .nav-link span {
    line-height: 1;
}

/* =========================================================
   Project Share Modal
========================================================= */

.project-share-modal .modal-content {
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
}

.project-share-modal .modal-header {
    background: var(--site-gradient);
    color: #fff;
    border: 0;
    padding: 16px 20px;
}

.project-share-modal .modal-title {
    color: #fff;
    font-size: 20px;
    font-weight: 900;
}

.project-share-modal .btn-close {
    margin: 0;
    filter: brightness(0) invert(1);
    opacity: .9;
}

.project-share-modal .modal-body {
    padding: 22px;
    background: #fff;
}

.project-share-modal .share-label {
    color: var(--site-text, #111827);
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 8px;
}

.project-share-modal .share-link-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    direction: rtl;
}

.project-share-modal .share-url-input {
    height: 44px;
    border-radius: 12px;
    border: 1px solid #dbe3ea;
    background: #f8fafc;
    color: #334155;
    padding: 0 12px;
    font-size: 13px;
    direction: ltr;
    text-align: left;
}

.project-share-modal .share-copy-btn {
    height: 44px;
    min-width: 82px;
    border-radius: 12px;
    border: 1px solid var(--site-primary);
    background: #fff;
    color: var(--site-primary);
    font-weight: 900;
    transition: .22s ease;
}

.project-share-modal .share-copy-btn:hover {
    background: var(--site-primary);
    color: #fff;
}

.project-share-modal .share-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.project-share-modal .share-social-btn {
    min-height: 78px;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #334155;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 900;
    transition: .22s ease;
}

.project-share-modal .share-social-btn i {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
}

.project-share-modal .share-social-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .10);
}

.project-share-modal .share-whatsapp i {
    background: #25d366;
}

.project-share-modal .share-facebook i {
    background: #1877f2;
}

.project-share-modal .share-x i {
    background: #111827;
}

.project-share-modal .share-telegram i {
    background: #229ed9;
}

.project-share-modal .share-email i {
    background: #64748b;
}

.project-share-modal .share-native i {
    background: var(--site-primary);
}

.project-share-modal .share-native {
    cursor: pointer;
}

@media (max-width: 575.98px) {
    .project-share-modal .modal-dialog {
        margin: 12px;
    }

    .project-share-modal .modal-body {
        padding: 18px;
    }

    .project-share-modal .share-link-row {
        grid-template-columns: 1fr;
    }

    .project-share-modal .share-copy-btn {
        width: 100%;
    }

    .project-share-modal .share-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.projects-section .clickable-project-card {
    cursor: pointer;
}

.projects-section .clickable-project-card input,
.projects-section .clickable-project-card button,
.projects-section .clickable-project-card a {
    cursor: auto;
}

.projects-section .clickable-project-card:hover .project-title {
    color: var(--site-primary, var(--primary-color));
}

/* =========================================================
   Project QR Thumb Button + QR Modal
========================================================= */

.projects-section .project-qr-thumb-btn {
    width: 36px;
    height: 36px;
    padding: 3px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .14);
    transition: all .22s ease;
    position: relative;
    z-index: 5;
    overflow: hidden;
}

.projects-section .project-qr-thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 7px;
    display: block;
}

.projects-section .project-qr-thumb-btn:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
}

.project-qr-modal .modal-content {
    border: 0;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .25);
}

.project-qr-modal .modal-header {
    border: 0;
    padding: 16px 20px;
    background: var(--site-gradient);
    color: #fff;
}

.project-qr-modal .modal-title {
    color: #fff;
    font-size: 19px;
    font-weight: 900;
}

.project-qr-modal .btn-close {
    margin: 0;
    filter: brightness(0) invert(1);
    opacity: .85;
}

.project-qr-modal .modal-body {
    padding: 24px;
    text-align: center;
    background:
        radial-gradient(circle at top center,
            color-mix(in srgb, var(--site-primary) 5%, transparent),
            transparent 45%),
        #fff;
}

.project-qr-modal .qr-project-name {
    margin-bottom: 16px;
    color: var(--site-text, #111827);
    font-size: 17px;
    font-weight: 900;
}

.project-qr-modal .qr-image-box {
    width: min(280px, 78vw);
    height: min(280px, 78vw);
    margin: 0 auto 18px;
    padding: 14px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .10);
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-qr-modal .qr-image-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: auto;
}

.project-qr-modal .qr-note {
    margin: 0 0 16px;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.project-qr-modal .qr-open-link {
    height: 42px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--site-gradient);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--site-primary) 20%, transparent);
    transition: all .22s ease;
}

.project-qr-modal .qr-open-link:hover {
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 575.98px) {
    .project-qr-modal .modal-dialog {
        margin: 10px auto;
        max-width: calc(80vw - 20px);
    }

    .project-qr-modal .modal-content {
        border-radius: 20px;
    }

    .project-qr-modal .modal-header {
        padding: 12px 16px;
    }

    .project-qr-modal .modal-title {
        font-size: 16px;
    }

    .project-qr-modal .modal-body {
        padding: 14px 14px 16px;
    }

    .project-qr-modal .qr-project-name {
        margin-bottom: 10px;
        font-size: 14px;
    }

    .project-qr-modal .qr-image-box {
        width: min(180px, 72vw);
        height: min(180px, 72vw);
        padding: 10px;
        border-radius: 18px;
        margin-bottom: 12px;
    }

    .project-qr-modal .qr-note {
        margin-bottom: 12px;
        font-size: 11px;
        line-height: 1.6;
    }

    .project-qr-modal .qr-open-link {
        height: 36px;
        padding: 0 16px;
        font-size: 12px;
    }

    .projects-section .project-qr-thumb-btn {
        width: 34px;
        height: 34px;
        padding: 3px;
        border-radius: 9px;
    }
}

/* =========================================================
   Donor Testimonials - Modern Design
   قسم آراء المتبرعين
========================================================= */

.donorTestimonials {
    position: relative;
    padding: clamp(44px, 6vw, 78px) 0 !important;
    background:
        radial-gradient(circle at 12% 18%,
            color-mix(in srgb, var(--site-primary, var(--primary-color)) 4%, transparent),
            transparent 34%),
        radial-gradient(circle at 88% 82%,
            color-mix(in srgb, var(--site-secondary, var(--secondary-color)) 5%, transparent),
            transparent 32%),
        linear-gradient(180deg,
            #ffffff 0%,
            color-mix(in srgb, var(--site-primary, var(--primary-color)) 1.8%, #ffffff) 52%,
            #ffffff 100%);
    overflow: hidden;
}

.donorTestimonials::before {
    content: "";
    position: absolute;
    top: 70px;
    right: -90px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--site-primary, var(--primary-color)) 5%, transparent);
    pointer-events: none;
}

.donorTestimonials::after {
    content: "";
    position: absolute;
    bottom: -120px;
    left: -100px;
    width: 290px;
    height: 290px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--site-secondary, var(--secondary-color)) 5%, transparent);
    pointer-events: none;
}

.donorTestimonials .container {
    position: relative;
    z-index: 2;
}

/* Header */
.donorTestimonials .dt-head {
    margin-bottom: clamp(26px, 4vw, 42px) !important;
}

.donorTestimonials .dt-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 15px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--site-primary, var(--primary-color)) 8%, #ffffff);
    color: var(--site-primary, var(--primary-color));
    border: 1px solid color-mix(in srgb, var(--site-primary, var(--primary-color)) 14%, #ffffff);
    font-size: 12px;
    font-weight: 900;
}

.donorTestimonials .dt-title {
    color: var(--site-primary, var(--primary-color));
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 900;
    line-height: 1.35;
    margin-bottom: 8px !important;
}

.donorTestimonials .dt-title::after {
    content: "";
    display: block;
    width: 86px;
    height: 3px;
    border-radius: 999px;
    margin: 12px auto 0;
    background: var(--site-secondary, var(--secondary-color));
}

.donorTestimonials .dt-sub {
    color: #667085;
    font-size: 15px;
    font-weight: 500;
    padding-top: 15px;
}

/* Cards */
.donorTestimonials .dt-card {
    position: relative;
    height: 100%;
    padding: 22px 20px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(15, 23, 42, .07);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .055);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.donorTestimonials .dt-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: var(--site-gradient, var(--site-primary, var(--primary-color)));
    opacity: .90;
}

.donorTestimonials .dt-card::after {
    content: "";
    position: absolute;
    top: -44px;
    left: -44px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--site-primary, var(--primary-color)) 5%, transparent);
    pointer-events: none;
}

.donorTestimonials .dt-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--site-primary, var(--primary-color)) 18%, #ffffff);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .09);
}

.donorTestimonials .dt-top {
    position: relative;
    z-index: 2;
    gap: 10px;
}

.donorTestimonials .dt-avatar {
    width: 46px;
    height: 46px;
    margin-left: 10px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--site-primary, var(--primary-color)) 9%, #ffffff);
    color: var(--site-primary, var(--primary-color));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .055);
}

.donorTestimonials .dt-avatar i {
    font-size: 18px;
}

.donorTestimonials .dt-name {
    color: #111827;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.4;
}

.donorTestimonials .dt-role {
    color: #667085;
    font-size: 12px;
    font-weight: 700;
    margin-top: 2px;
}

.donorTestimonials .dt-quote {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--site-secondary, var(--secondary-color)) 8%, #ffffff);
    color: var(--site-secondary, var(--secondary-color));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
}

.donorTestimonials .dt-quote i {
    font-size: 14px;
}

/* Stars */
.donorTestimonials .dt-card .text-warning {
    color: #f59e0b !important;
    font-size: 13px;
    margin-inline-start: 1px;
}

/* Text */
.donorTestimonials .dt-text {
    position: relative;
    z-index: 2;
    color: #344054;
    font-size: 13.5px;
    line-height: 1.85;
    min-height: 50px;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer */
.donorTestimonials .dt-footer {
    position: relative;
    z-index: 2;
}

.donorTestimonials .dt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    border: 1px solid #edf2f7;
    font-size: 11.5px;
    font-weight: 800;
}

.donorTestimonials .dt-chip i {
    color: var(--site-primary, var(--primary-color));
}

/* Button */
.donorTestimonials .dt-btn {
    min-width: 132px;
    height: 42px;
    padding: 0 24px !important;
    border: 0;
    background: var(--site-gradient, var(--site-primary, var(--primary-color)));
    color: #fff !important;
    font-size: 14px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--site-primary, var(--primary-color)) 18%, transparent);
    transition: all .22s ease;
}

.donorTestimonials .dt-btn:hover {
    transform: translateY(-2px);
    color: #fff !important;
    box-shadow: 0 16px 34px color-mix(in srgb, var(--site-primary, var(--primary-color)) 24%, transparent);
}

/* Empty State */
.donorTestimonials .col-12.text-center p {
    display: inline-flex;
    padding: 14px 24px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #edf2f7;
    color: #667085;
    font-weight: 700;
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width: 991.98px) {
    .donorTestimonials .dt-card {
        padding: 20px 18px;
        border-radius: 20px;
    }
}

/* =========================================================
   Donor Testimonials - Compact Mobile
   تصغير كروت آراء المتبرعين في الجوال
========================================================= */

@media (max-width: 575.98px) {
    .donorTestimonials {
        padding: 30px 0 34px !important;
    }

    .donorTestimonials .dt-head {
        margin-bottom: 18px !important;
    }

    .donorTestimonials .dt-title {
        font-size: 23px !important;
    }

    .donorTestimonials .dt-sub {
        font-size: 12px !important;
    }

    /* نخلي الكروت 2 في الصف في الجوال */
    .donorTestimonials .row.g-3 {
        --bs-gutter-x: 10px;
        --bs-gutter-y: 10px;
    }

    .donorTestimonials .row.g-3>[class*="col-"] {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-bottom: 0 !important;
    }

    .donorTestimonials .dt-card {
        padding: 12px 10px !important;
        border-radius: 16px !important;
        min-height: 158px;
        box-shadow: 0 5px 13px rgba(15, 23, 42, .04) !important;
    }

    .donorTestimonials .dt-card::before {
        width: 3px;
    }

    .donorTestimonials .dt-card::after {
        width: 72px;
        height: 72px;
        top: -28px;
        left: -28px;
    }

    .donorTestimonials .dt-top {
        align-items: flex-start !important;
    }

    .donorTestimonials .dt-avatar {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        border-radius: 10px !important;
        margin-left: 6px !important;
    }

    .donorTestimonials .dt-avatar i {
        font-size: 13px !important;
    }

    .donorTestimonials .dt-name {
        font-size: 12px !important;
        line-height: 1.35 !important;

        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .donorTestimonials .dt-role {
        font-size: 10px !important;
        margin-top: 1px !important;
    }

    .donorTestimonials .dt-quote {
        width: 24px !important;
        height: 24px !important;
        flex: 0 0 24px !important;
        border-radius: 9px !important;
    }

    .donorTestimonials .dt-quote i {
        font-size: 10px !important;
    }

    .donorTestimonials .dt-card .mt-2.mb-2 {
        margin-top: 7px !important;
        margin-bottom: 6px !important;
        line-height: 1;
    }

    .donorTestimonials .dt-card .text-warning {
        font-size: 10.5px !important;
        margin-inline-start: 0 !important;
    }

    .donorTestimonials .dt-text {
        font-size: 10.8px !important;
        line-height: 1.55 !important;
        min-height: 34px !important;
        margin-top: 5px !important;

        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .donorTestimonials .dt-footer {
        margin-top: 8px !important;
    }

    .donorTestimonials .dt-chip {
        min-height: 22px !important;
        padding: 3px 7px !important;
        font-size: 9.5px !important;
        gap: 4px !important;
    }

    .donorTestimonials .dt-chip i {
        font-size: 9px !important;
    }

    .donorTestimonials .dt-btn {
        height: 34px !important;
        min-width: 106px !important;
        font-size: 11.5px !important;
        margin-top: 4px;
    }
}

/* الشاشات الصغيرة جدًا */
@media (max-width: 360px) {
    .donorTestimonials .dt-card {
        padding: 11px 9px !important;
        min-height: 150px;
    }

    .donorTestimonials .dt-name {
        font-size: 11.5px !important;
    }

    .donorTestimonials .dt-text {
        font-size: 10.3px !important;
    }
}

/* =========================================================
   Partners Section - Modern Design
   قسم شركاؤنا في النجاح
========================================================= */

.partners-section {
    position: relative;
    padding: clamp(40px, 6vw, 72px) 0 !important;
    overflow: hidden;
}

.partners-section::before {
    content: "";
    position: absolute;
    top: -90px;
    right: -90px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    /* background: color-mix(in srgb, var(--site-secondary, var(--secondary-color)) 5%, transparent); */
    pointer-events: none;
}

.partners-section::after {
    content: "";
    position: absolute;
    bottom: -120px;
    left: -100px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--site-primary, var(--primary-color)) 4%, transparent);
    pointer-events: none;
}

.partners-section .container {
    position: relative;
    z-index: 2;
}

.partners-section .section-title {
    color: var(--site-primary, var(--primary-color));
    font-size: clamp(25px, 3vw, 38px);
    font-weight: 900;
    margin-bottom: 0;
}

.partners-section .section-title::after {
    content: "";
    display: block;
    width: 90px;
    height: 3px;
    border-radius: 999px;
    margin: 12px auto 0;
    background: var(--site-secondary, var(--secondary-color));
}

/* Swiper */
.partners-section .partners-swiper {
    padding: 18px 4px 8px;
}

.partners-section .swiper-wrapper {
    align-items: center;
}

.partners-section .swiper-slide {
    height: auto;
}

/* Logo Card */
.partners-section .partner-logo {
    width: 100%;
    height: 118px;
    padding: 18px 22px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(15, 23, 42, .07);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.partners-section .partner-logo:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--site-primary, var(--primary-color)) 18%, #ffffff);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .085);
}

.partners-section .partner-logo img {
    max-width: 100%;
    max-height: 74px;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    filter: grayscale(.15);
    opacity: .92;
    transition: transform .25s ease, filter .25s ease, opacity .25s ease;
}

.partners-section .partner-logo:hover img {
    transform: scale(1.04);
    filter: grayscale(0);
    opacity: 1;
}

/* Pagination */
.partners-section .swiper-pagination {
    margin-top: 20px !important;
}

.partners-section .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: color-mix(in srgb, var(--site-primary, var(--primary-color)) 28%, #ffffff);
    opacity: 1;
    transition: all .25s ease;
}

.partners-section .swiper-pagination-bullet-active {
    width: 26px;
    border-radius: 999px;
    background: var(--site-gradient, var(--site-primary, var(--primary-color)));
}

/* Tablet */
@media (max-width: 991.98px) {
    .partners-section .partner-logo {
        height: 104px;
        padding: 16px 18px;
        border-radius: 20px;
    }

    .partners-section .partner-logo img {
        max-height: 62px;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .partners-section {
        padding: 34px 0 42px !important;
    }

    .partners-section .section-title {
        font-size: 24px;
    }

    .partners-section .partners-swiper {
        padding-top: 12px;
    }

    .partners-section .partner-logo {
        height: 86px;
        padding: 13px 15px;
        border-radius: 18px;
        box-shadow: 0 5px 14px rgba(15, 23, 42, .04);
    }

    .partners-section .partner-logo:hover {
        transform: none;
        box-shadow: 0 5px 14px rgba(15, 23, 42, .04);
    }

    .partners-section .partner-logo img {
        max-height: 50px;
    }

    .partners-section .swiper-pagination {
        margin-top: 14px !important;
    }

    .partners-section .swiper-pagination-bullet {
        width: 7px;
        height: 7px;
    }

    .partners-section .swiper-pagination-bullet-active {
        width: 22px;
    }
}

/* =========================================================
   Main Footer - Final Clean Version
   منسق داخل ui-refresh.css لأنه آخر ملف CSS محمل في master.blade.php
========================================================= */

.main-footer {
    position: relative;
    padding: 50px 0 0 !important;
    overflow: hidden;
    color: rgba(255, 255, 255, .88) !important;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .055), transparent 28%),
        radial-gradient(circle at 88% 76%, rgba(255, 255, 255, .045), transparent 28%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--site-primary, var(--primary-color)) 94%, #000 6%) 0%,
            var(--site-primary, var(--primary-color)) 52%,
            color-mix(in srgb, var(--site-secondary, var(--secondary-color)) 70%, var(--site-primary, var(--primary-color))) 100%) !important;
}

.main-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(0, 0, 0, .11));
    pointer-events: none;
}

.main-footer::after {
    content: "";
    position: absolute;
    width: 310px;
    height: 310px;
    left: -125px;
    bottom: -150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
    pointer-events: none;
}

.main-footer .container {
    position: relative;
    z-index: 2;
}

.main-footer .row {
    align-items: flex-start;
    row-gap: 22px;
}

.main-footer .footer-widget {
    height: auto !important;
    padding: 6px 6px 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.main-footer .footer-title {
    position: relative;
    margin-bottom: 16px !important;
    padding-bottom: 10px;
    color: #fff !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
}

.main-footer .footer-title::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 38px !important;
    height: 3px !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
}

.main-footer .footer-widget p {
    color: rgba(255, 255, 255, .84) !important;
    font-size: 14px !important;
    line-height: 2 !important;
    margin-bottom: 0;
}

.main-footer .footer-links {
    margin-bottom: 0;
    padding: 0;
}

.main-footer .footer-links li {
    margin-bottom: 9px;
}

.main-footer .footer-links a {
    color: rgba(255, 255, 255, .85) !important;
    text-decoration: none;
    font-size: 14.5px !important;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: all .22s ease;
}

.main-footer .footer-links a:hover {
    color: #fff !important;
    transform: translateX(-4px);
}

.main-footer .footer-links i {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .11);
    color: #fff !important;
    font-size: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 23px;
}

.main-footer h6.text-white {
    color: #fff !important;
    font-size: 13.5px;
    font-weight: 800;
    margin-bottom: 12px;
}

.main-footer .social-icons-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 10px !important;
}

.main-footer .social-btn {
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: #fff !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .14) !important;
    transition: transform .22s ease, box-shadow .22s ease, opacity .22s ease !important;
}

.main-footer .social-btn i {
    color: inherit !important;
    font-size: 16px !important;
}

.main-footer .social-btn:hover {
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: 0 13px 24px rgba(0, 0, 0, .18) !important;
    opacity: .96;
}

/* ألوان المنصات حسب الكلاسات الموجودة في footer.blade.php، وليس حسب الترتيب */
.main-footer .social-btn.sb-facebook {
    background: #1877F2 !important;
}

.main-footer .social-btn.sb-twitter {
    background: #000000 !important;
}

.main-footer .social-btn.sb-instagram {
    background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4) !important;
}

.main-footer .social-btn.sb-youtube {
    background: #FF0000 !important;
}

.main-footer .social-btn.sb-snapchat {
    background: #FFFC00 !important;
    color: #111 !important;
}

.main-footer .social-btn.sb-snapchat i {
    color: #111 !important;
}

.main-footer .social-btn.sb-telegram {
    background: #229ED9 !important;
}

.main-footer .social-btn.sb-tiktok {
    background: #111111 !important;
}

.main-footer .footer-map {
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
}

.main-footer .footer-map iframe {
    width: 100% !important;
    height: 166px !important;
    border: 0 !important;
    display: block;
    border-radius: 16px !important;
}

.main-footer .donation-license {
    margin-top: 14px !important;
}

.main-footer .donation-license p {
    color: rgba(255, 255, 255, .86) !important;
    font-size: 12.5px !important;
    font-weight: 800;
    margin-bottom: 8px;
}

.main-footer .donation-license button {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.main-footer .donation-license img {
    width: 100%;
    max-width: 250px;
    max-height: 84px !important;
    object-fit: contain;
    border-radius: 13px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    background: rgba(255, 255, 255, .05);
    transition: transform .22s ease;
}

.main-footer .donation-license img:hover {
    transform: translateY(-2px);
}

.main-footer .copyright-area {
    position: relative;
    z-index: 2;
    margin-top: 26px !important;
    padding: 13px 0 !important;
    background: rgba(0, 0, 0, .18) !important;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.main-footer .copyright-area p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, .88) !important;
    font-size: 13px;
    line-height: 1.8;
}

.main-footer .copyright-area a,
.main-footer .copyright-area strong {
    color: #fff !important;
    font-weight: 800;
    text-decoration: none;
}

#donationLicenseModal .modal-body img {
    max-height: 86vh;
    object-fit: contain;
}

@media (max-width: 991.98px) {
    .main-footer {
        padding-top: 42px !important;
    }

    .main-footer .footer-widget {
        text-align: center;
        padding: 6px 4px 14px !important;
    }

    .main-footer .footer-title {
        font-size: 19px !important;
        margin-bottom: 13px !important;
    }

    .main-footer .footer-title::after {
        right: 50% !important;
        transform: translateX(50%) !important;
    }

    .main-footer .footer-links a,
    .main-footer .footer-widget p {
        font-size: 13px !important;
    }

    .main-footer .footer-links a {
        justify-content: center;
    }

    .main-footer .social-icons-wrapper {
        justify-content: center;
    }

    .main-footer .footer-map {
        max-width: 320px;
        margin-inline: auto;
    }

    .main-footer .footer-map iframe {
        height: 150px !important;
    }
}

@media (max-width: 575.98px) {
    .main-footer {
        padding-top: 28px !important;
    }

    .main-footer .container {
        padding-inline: 14px !important;
    }

    .main-footer .row {
        row-gap: 16px !important;
    }

    .main-footer .row>[class*="col-"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
    }

    .main-footer .row>[class*="col-"]:not(:last-child) {
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .main-footer .footer-widget {
        padding: 0 !important;
    }

    .main-footer .footer-title {
        font-size: 16.5px !important;
        margin-bottom: 9px !important;
        padding-bottom: 8px !important;
        line-height: 1.4 !important;
    }

    .main-footer .footer-title::after {
        width: 34px !important;
        height: 2px !important;
    }

    .main-footer .footer-widget p {
        max-width: 300px;
        margin-inline: auto;
        font-size: 11.5px !important;
        line-height: 1.8 !important;
    }

    .main-footer .footer-links li {
        margin-bottom: 5px !important;
    }

    .main-footer .footer-links a {
        min-height: 22px;
        gap: 6px;
        font-size: 11.5px !important;
    }

    .main-footer .footer-links i {
        width: 18px !important;
        height: 18px !important;
        flex: 0 0 18px !important;
        font-size: 7px !important;
    }

    .main-footer h6.text-white {
        font-size: 11.5px !important;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }

    .main-footer .social-icons-wrapper {
        gap: 7px !important;
        margin-top: 8px !important;
    }

    .main-footer .social-btn {
        width: 32px !important;
        height: 32px !important;
        border-radius: 9px !important;
    }

    .main-footer .social-btn i {
        font-size: 13px !important;
    }

    .main-footer .footer-map {
        max-width: 280px;
        border-radius: 14px;
    }

    .main-footer .footer-map iframe {
        height: 130px !important;
        border-radius: 14px !important;
    }

    .main-footer .donation-license {
        margin-top: 10px !important;
    }

    .main-footer .donation-license p {
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }

    .main-footer .donation-license img {
        max-width: 220px !important;
        max-height: 74px !important;
        border-radius: 12px !important;
    }

    .main-footer .copyright-area {
        margin-top: 18px !important;
        padding: 10px 12px !important;
    }

    .main-footer .copyright-area p {
        max-width: 310px;
        margin-inline: auto;
        font-size: 10.5px !important;
        line-height: 1.7 !important;
    }
}

/* =========================================================
   Projects Page Cards Alignment + Tabs Center
   ضبط تبويبات صفحة المشاريع + تثبيت أزرار الكارد بالأسفل
========================================================= */

/* تبويبات التصنيفات: النص في المنتصف تماماً */
.projects-page-section .donation-tabs .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

/* الكارد في صفحة المشاريع يحافظ على نفس الارتفاع داخل الصف */
.projects-page-section .project-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* المحتوى يرجع Flex حتى زر السلة والتبرع ينزلوا أسفل الكارد */
.projects-page-section .project-content {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
}

/* العنوان يبقى بمساحة ثابتة حتى لا يزحزح بقية العناصر */
.projects-page-section .project-title {
    min-height: 30px !important;
    margin-bottom: 12px !important;
}

/* أزرار المبالغ تتوزع حسب العدد بدون كسر التصميم */
.projects-page-section .quick-amounts {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
    min-height: 38px !important;
}

/* إذا ما فيه مبالغ، نحافظ على مكان بسيط حتى لا يطلع زر السلة فوق */
.projects-page-section .quick-amounts:empty {
    min-height: 38px !important;
    margin-bottom: 14px !important;
}

/* زر المبلغ */
.projects-page-section .amount-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 5px 6px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}

/* صندوق التبرع ينزل لأسفل الكارد دائماً */
.projects-page-section .project-donation-box {
    margin-top: auto !important;
    width: 100% !important;
}

/* صف السلة + التبرع + حقل المبلغ */
.projects-page-section .input-group-custom {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 9px !important;
    align-items: center !important;
}

.projects-page-section .donation-form {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 9px !important;
    align-items: center !important;
    min-width: 0 !important;
}

/* توحيد ارتفاع عناصر التحكم */
.projects-page-section .cart-input,
.projects-page-section .amount-input,
.projects-page-section .btn-donate,
.projects-page-section .btn-cart {
    height: 42px !important;
}

.projects-page-section .btn-cart {
    width: 42px !important;
    flex: 0 0 42px !important;
}

/* التابلت */
@media (max-width: 991.98px) {
    .projects-page-section .quick-amounts {
        grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)) !important;
        min-height: 38px !important;
    }
}

/* الجوال */
@media (max-width: 575.98px) {
    .projects-page-section .quick-amounts {
        grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)) !important;
        gap: 6px !important;
        margin-bottom: 12px !important;
        min-height: 34px !important;
    }

    .projects-page-section .quick-amounts:empty {
        min-height: 34px !important;
        margin-bottom: 12px !important;
    }

    .projects-page-section .amount-btn {
        min-height: 34px !important;
        font-size: 12px !important;
        padding-inline: 4px !important;
    }

    .projects-page-section .cart-input,
    .projects-page-section .amount-input,
    .projects-page-section .btn-donate,
    .projects-page-section .btn-cart {
        height: 40px !important;
    }

    .projects-page-section .btn-cart {
        width: 40px !important;
        flex-basis: 40px !important;
    }
}

/* =========================================================
   Pagination Style
========================================================= */

.projects-pagination {
    display: flex;
    justify-content: center;
}

.projects-pagination .pagination {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0;
}

.projects-pagination .page-link {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 999px !important;
    border: 1px solid #e5e7eb;
    color: var(--site-primary, var(--primary-color));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    box-shadow: none;
}

.projects-pagination .page-item.active .page-link {
    background: var(--site-gradient, var(--site-primary, var(--primary-color)));
    border-color: transparent;
    color: #fff;
}

.projects-pagination .page-link:hover {
    background: var(--site-primary, var(--primary-color));
    color: #fff;
}

#projectsAjaxContent {
    transition: opacity .2s ease;
}

#projectsAjaxContent.projects-loading {
    opacity: .45;
    pointer-events: none;
}

/* مهم لعناصر المشاريع القادمة بالـ AJAX */
#projectsAjaxContent .project-card {
    visibility: visible !important;
}

/* =========================================================
   Project Details Page - Final Clean CSS
   تفاصيل المشروع + صندوق التبرع + الجوال
========================================================= */

/* =========================================================
   Layout
========================================================= */

.project-details-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* =========================================================
   Project Image
   صورة تفاصيل المشروع بنفس نسبة كارد المشاريع 800x500
========================================================= */

.project-details-image-box,
.project-hero-wrapper.project-details-image-box {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    border-radius: 26px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e7eef3 !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .08) !important;
}

/* الصورة داخل التفاصيل */
.project-details-image-box .project-hero-img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    border-radius: 26px !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: #f1f5f9 !important;
}

/* زر الباركود */
.project-details-image-box .project-barcode,
.project-details-image-box .project-qr-thumb-btn {
    position: absolute !important;
    top: 16px !important;
    inset-inline-start: 16px !important;
    z-index: 8 !important;
    width: 64px !important;
    height: 64px !important;
    padding: 6px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, .14) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.project-details-image-box .project-barcode img,
.project-details-image-box .project-qr-thumb-btn img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* =========================================================
   Project Details Completed State
   ختم اكتمال المشروع + تعطيل الباركود
========================================================= */

.project-details-image-box .completed-overlay-details {
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
}

.project-details-image-box .completed-overlay-details img {
    width: min(42%, 230px) !important;
    max-width: 230px !important;
    height: auto !important;
    object-fit: contain !important;
    opacity: .86 !important;
    transform: rotate(-14deg) !important;
    filter: drop-shadow(0 8px 16px rgba(15, 23, 42, .12)) !important;
}

/* الصورة وقت الاكتمال تظل واضحة */
.project-details-image-box:has(.completed-overlay-details) .project-hero-img {
    filter: saturate(.94) brightness(.98) !important;
}

/* تعطيل الباركود إذا المشروع مكتمل */
.project-details-image-box:has(.completed-overlay-details) .project-barcode,
.project-details-image-box:has(.completed-overlay-details) .project-qr-thumb-btn,
.project-details-image-box .project-barcode:disabled,
.project-details-image-box .project-qr-thumb-btn:disabled {
    opacity: .85 !important;
    filter: grayscale(15%) !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

.project-details-image-box:has(.completed-overlay-details) .project-barcode img,
.project-details-image-box:has(.completed-overlay-details) .project-qr-thumb-btn img,
.project-details-image-box .project-barcode:disabled img,
.project-details-image-box .project-qr-thumb-btn:disabled img {
    opacity: .85 !important;
}

/* تعطيل أزرار المشاركة في حالة الاكتمال */
.donation-sidebar-modern .details-share-btn:disabled,
.donation-sidebar-modern .details-share-btn.is-disabled {
    opacity: .72 !important;
    filter: grayscale(20%) !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}


/* الجوال */
@media (max-width: 575.98px) {

    .project-details-image-box,
    .project-hero-wrapper.project-details-image-box {
        border-radius: 18px !important;
    }

    .project-details-image-box .project-hero-img {
        border-radius: 18px !important;
    }

    .project-details-image-box .project-barcode,
    .project-details-image-box .project-qr-thumb-btn {
        width: 44px !important;
        height: 44px !important;
        top: 8px !important;
        inset-inline-start: 8px !important;
        border-radius: 12px !important;
        padding: 4px !important;
    }

    .project-details-image-box .completed-overlay-details img {
        width: min(50%, 150px) !important;
        max-width: 150px !important;
        opacity: .78 !important;
        transform: rotate(-12deg) !important;
    }

    .completed-donation-box {
        padding: 20px 14px !important;
        border-radius: 18px !important;
    }

    .completed-donation-box h5 {
        font-size: 17px !important;
    }

    .completed-donation-box p {
        font-size: 12.5px !important;
    }
}

/* =========================================================
   Progress Card
========================================================= */

.project-details-progress-card {
    padding: 24px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #e7eef3;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .07);
}

.project-details-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.project-details-progress-head .progress-label {
    color: #667085;
    font-size: 14px;
    font-weight: 700;
}

.project-details-progress-head strong {
    color: var(--site-primary, var(--primary-color));
    font-size: 21px;
    font-weight: 1000;
}

.project-percent-value {
    min-width: 58px;
    height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--site-primary, var(--primary-color)) 8%, #ffffff) !important;
    color: var(--site-primary, var(--primary-color)) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 1000;
}

/* نفس شكل شريط الرئيسية والمشاريع */
.details-progress-wrapper {
    margin: 0 0 18px !important;
}

.project-details-progress-card .custom-progress,
.project-details-progress-card .project-progress-track {
    position: relative;
    width: 100%;
    height: 18px;
    border-radius: 999px;
    background: #edf2f5;
    overflow: visible;
    box-shadow: inset 0 2px 6px rgba(15, 23, 42, .08);
}

.project-details-progress-card .progress-bar-fill,
.project-details-progress-card .project-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--site-gradient,
            linear-gradient(135deg, var(--site-primary, var(--primary-color)), var(--site-secondary, var(--secondary-color)))) !important;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--site-primary, var(--primary-color)) 22%, transparent) !important;

}

.project-details-progress-card .progress-percent-badge {
    position: absolute;
    top: 50%;
    transform: translate(50%, -50%);
    min-width: 48px;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #cfe5df;
    color: var(--site-primary, var(--primary-color));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 1000;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .10);
    z-index: 2;
}

/* في حالة النسبة 0 لا يطلع البادج خارج الشريط */
.project-details-progress-card .progress-percent-badge[style*="right: 0"] {
    right: 0 !important;
    transform: translate(0, -50%);
}

.project-details-progress-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.project-details-progress-stats>div {
    padding: 14px 16px;
    border-radius: 18px;
    background: #f8fbfc;
    border: 1px solid #edf2f5;
}

.project-details-progress-stats small {
    display: block;
    margin-bottom: 5px;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
}

.project-details-progress-stats span {
    color: #111827;
    font-size: 16px;
    font-weight: 1000;
}

.project-details-progress-stats .remaining {
    color: #dc2626;
}

/* =========================================================
   Info Card
========================================================= */

.project-details-info-card {
    padding: 26px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #e7eef3;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .06);
}

.project-details-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.project-details-section-title .title-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--site-primary, var(--primary-color)) 8%, #ffffff) !important;
    color: var(--site-primary, var(--primary-color)) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.project-details-section-title h4 {
    margin: 0;
    color: #111827;
    font-size: 24px;
    font-weight: 1000;
    position: relative;
}

.project-details-section-title h4::after {
    content: "";
    position: absolute;
    bottom: -9px;
    inset-inline-start: 0;
    width: 72px;
    height: 3px;
    border-radius: 999px;
    background: var(--site-primary, var(--primary-color));
}

.project-details-description {
    color: #667085;
    font-size: 17px;
    line-height: 2;
    text-align: justify;
    margin: 0 0 15px;
}

/* =========================================================
   Stats Full Width
========================================================= */

.project-details-info-card .stats-box,
.project-details-info-card .project-details-stats-box {
    width: 100% !important;
    max-width: 100% !important;
    margin: 22px 0 0 !important;
}

.project-details-info-card .project-details-stats-box {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.project-details-info-card .project-details-stats-box .stat-item {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 150px !important;
    margin: 0 !important;
    padding: 22px 18px !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, #f8fbfc, #fff) !important;
    border: 1px solid #edf2f5 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.project-details-info-card .project-details-stats-box .stat-icon {
    width: 46px !important;
    height: 46px !important;
    margin: 0 auto 12px !important;
    border-radius: 15px !important;
    background: color-mix(in srgb, var(--site-primary, var(--primary-color)) 8%, #ffffff) !important;
    color: var(--site-primary, var(--primary-color)) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.project-details-info-card .project-details-stats-box .stat-item h4 {
    margin: 0 0 6px !important;
    color: var(--site-primary, var(--primary-color)) !important;
    font-size: 26px !important;
    font-weight: 1000 !important;
}

.project-details-info-card .project-details-stats-box .stat-item span:last-child {
    color: #667085 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.project-details-info-card .project-details-stats-box .stat-item:nth-child(3):last-child {
    grid-column: 1 / -1 !important;
}

/* =========================================================
   Donation Sidebar
========================================================= */

.donation-sidebar-modern {
    position: sticky;
    top: 110px;
    padding: 24px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid rgba(15, 118, 110, .12);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .10);
    overflow: hidden;
}

.donation-sidebar-modern::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: var(--site-gradient,
            linear-gradient(135deg, var(--site-primary, var(--primary-color)), var(--site-secondary, var(--secondary-color)))) !important;
}

.donation-sidebar-head {
    margin-bottom: 20px;
}

.donation-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--site-primary, var(--primary-color)) 8%, #ffffff) !important;
    color: var(--site-primary, var(--primary-color)) !important;
    font-size: 13px;
    font-weight: 900;
}

.amount-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.amount-grid-modern .amount-option-btn {
    min-height: 50px;
    border: 1px solid #dce8ee;
    border-radius: 16px;
    background: #fff;
    color: #344054;
    font-weight: 900;
    transition: .22s ease;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
}

.amount-grid-modern .amount-option-btn strong {
    display: inline-block;
    font-size: 15px;
}

.amount-grid-modern .amount-option-btn small {
    color: #667085;
    font-size: 11px;
    margin-inline-start: 2px;
}

.amount-grid-modern .amount-option-btn:hover,
.amount-grid-modern .amount-option-btn.active {
    background: var(--site-primary, var(--primary-color));
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(0, 128, 115, .22);
}

.amount-grid-modern .amount-option-btn:hover small,
.amount-grid-modern .amount-option-btn.active small {
    color: rgba(255, 255, 255, .85);
}

.donation-input-label {
    display: block;
    margin-bottom: 8px;
    color: #1f2937;
    font-size: 14px;
    font-weight: 900;
}

.custom-amount-modern {
    position: relative;
    display: flex;
    align-items: center;
    height: 52px;
    border: 1px solid #d7e5ea;
    border-radius: 18px;
    background: #f9fbfc;
    overflow: hidden;
    transition: .22s ease;
}

.custom-amount-modern:focus-within {
    border-color: var(--site-primary, var(--primary-color)) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--site-primary, var(--primary-color)) 10%, transparent) !important;
    background: #fff;
}

.custom-amount-modern .custom-amount-input {
    width: 100%;
    height: 100%;
    border: 0 !important;
    outline: 0 !important;
    background: transparent;
    padding: 0 16px;
    font-weight: 900;
    color: #111827;
}

.custom-amount-modern .currency-suffix {
    height: 100%;
    min-width: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 12px;
    background: color-mix(in srgb, var(--site-primary, var(--primary-color)) 7%, #ffffff) !important;
    color: var(--site-primary, var(--primary-color)) !important;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.donation-min-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 2px 14px;
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}

.btn-donate-modern,
.btn-cart-modern {
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-weight: 900;
    transition: .22s ease;
}

.btn-donate-modern {
    background: var(--site-gradient,
            linear-gradient(135deg, var(--site-primary, var(--primary-color)), var(--site-secondary, var(--secondary-color)))) !important;
    color: #fff;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--site-primary, var(--primary-color)) 22%, transparent) !important;

}

.btn-donate-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px color-mix(in srgb, var(--site-primary, var(--primary-color)) 22%, transparent) !important;

}

.btn-cart-modern {
    background: #fff;
    color: var(--site-primary, var(--primary-color)) !important;
    border-color: color-mix(in srgb, var(--site-primary, var(--primary-color)) 25%, #ffffff) !important;
}

.btn-cart-modern:hover {
    background: color-mix(in srgb, var(--site-primary, var(--primary-color)) 7%, #ffffff) !important;
}

/* =========================================================
   Payment Methods
========================================================= */

.payment-methods-box {
    margin-top: 18px;
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(180deg, #fbfdff, #ffffff) !important;
    border: 1px solid #e6eef2 !important;
}

.payment-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-bottom: 12px;
    color: #344054;
    font-size: 13px;
    font-weight: 900;
}

.payment-title i {
    color: var(--site-primary, var(--primary-color));
}

.payment-icons-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.payment-icon {
    min-width: 48px;
    height: 34px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid #e5edf2 !important;
    background: #fff !important;
    color: #1f2937;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .06) !important;
    transition: .2s ease;
}

.payment-icon.payment-mada {
    color: #009b8f !important;
    border-color: rgba(0, 155, 143, .22) !important;
    background: rgba(0, 155, 143, .07) !important;
    font-size: 14px;
    font-weight: 1000 !important;
}

.payment-icon .fa-cc-visa {
    color: #1a1f71 !important;
}

.payment-icon .fa-cc-mastercard {
    color: #eb001b !important;
}

.payment-icon .fa-apple-pay {
    color: #111827 !important;
}

.payment-icon .fa-credit-card {
    color: #1e6b95 !important;
}

.payment-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .10) !important;
}

.payment-note {
    margin-top: 10px;
    color: #667085;
    font-size: 11.5px;
    text-align: center;
    font-weight: 600;
}

/* =========================================================
   Share Buttons
========================================================= */

.details-share-box {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #edf2f5;
    text-align: center;
}

.details-share-actions {
    display: flex;
    justify-content: center;
    gap: 9px;
    flex-wrap: wrap;
}

.details-share-btn {
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 900;
    transition: .2s ease;
}

.details-share-btn.whatsapp {
    background: #16c784;
    color: #fff;
}

.details-share-btn.copy,
.details-share-btn.copy-link-btn {
    background: #f2f4f7;
    color: #344054;
}

.details-share-btn.copy-link-btn:hover,
.details-share-btn.copy:hover {
    background: #e8eef3;
    color: var(--site-primary, var(--primary-color));
}

.details-share-btn:hover {
    transform: translateY(-2px);
    opacity: .92;
}

.completed-donation-box {
    border-radius: 22px;
}

/* =========================================================
   Responsive Tablet
========================================================= */

@media (max-width: 991.98px) {
    main.bg-white.pb-5 {
        padding-bottom: 110px !important;
    }

    .project-details-header {
        padding: 28px 0 22px !important;
        margin-bottom: 18px !important;
    }

    .project-details-header .container,
    main.bg-white.pb-5>.container {
        width: calc(100% - 24px) !important;
        max-width: 100% !important;
        padding-inline: 0 !important;
    }

    .project-details-header h1 {
        font-size: 22px !important;
        line-height: 1.5 !important;
    }

    .project-details-header .badge {
        font-size: 11px !important;
        padding: 6px 12px !important;
    }

    main.bg-white.pb-5>.container>.row {
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 18px !important;
    }

    main.bg-white.pb-5 .col-lg-8,
    main.bg-white.pb-5 .col-lg-4 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .project-details-main {
        gap: 16px !important;
    }

    .donation-sidebar-modern {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0 !important;
    }

    .project-details-info-card .project-details-stats-box {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .project-details-info-card .project-details-stats-box .stat-item {
        min-height: 130px !important;
        padding: 18px 12px !important;
    }
}

/* =========================================================
   Responsive Mobile
========================================================= */

@media (max-width: 575.98px) {
    body {
        overflow-x: hidden !important;
    }

    .project-details-header {
        padding: 22px 0 18px !important;
    }

    .project-details-header h1 {
        font-size: 20px !important;
        margin-bottom: 0 !important;
    }

    .project-details-image-box {
        border-radius: 18px !important;
        box-shadow: 0 10px 26px rgba(15, 23, 42, .07) !important;
    }

    .project-details-image-box .project-hero-img {
        border-radius: 18px !important;
    }

    .project-details-image-box .project-barcode {
        width: 44px !important;
        height: 44px !important;
        top: 8px !important;
        inset-inline-start: 8px !important;
        border-radius: 12px !important;
        padding: 4px !important;
    }

    .project-details-progress-card,
    .project-details-info-card {
        padding: 15px !important;
        border-radius: 18px !important;
    }

    .project-details-progress-head {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .project-details-progress-head .progress-label {
        font-size: 11px !important;
    }

    .project-details-progress-head strong {
        display: block !important;
        font-size: 14px !important;
        margin-top: 2px !important;
    }

    .project-percent-value {
        min-width: 46px !important;
        height: 28px !important;
        padding: 0 8px !important;
        font-size: 11px !important;
    }

    .project-details-progress-card .custom-progress,
    .project-details-progress-card .project-progress-track {
        height: 12px !important;
    }

    .project-details-progress-card .progress-percent-badge {
        min-width: 38px !important;
        height: 23px !important;
        padding: 0 7px !important;
        font-size: 10px !important;
    }

    .project-details-progress-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 12px !important;
    }

    .project-details-progress-stats>div {
        padding: 10px 8px !important;
        border-radius: 14px !important;
        text-align: center !important;
    }

    .project-details-progress-stats small {
        font-size: 10px !important;
        margin-bottom: 4px !important;
    }

    .project-details-progress-stats span {
        font-size: 12px !important;
        line-height: 1.5 !important;
        word-break: break-word !important;
    }

    .project-details-section-title {
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .project-details-section-title .title-icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 11px !important;
        font-size: 12px !important;
    }

    .project-details-section-title h4 {
        font-size: 17px !important;
    }

    .project-details-section-title h4::after {
        width: 52px !important;
        height: 2px !important;
        bottom: -7px !important;
    }

    .project-details-description {
        font-size: 12.5px !important;
        line-height: 1.9 !important;
        text-align: right !important;
        margin-bottom: 14px !important;
    }

    .project-details-info-card .project-details-stats-box {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 14px !important;
    }

    .project-details-info-card .project-details-stats-box .stat-item {
        min-height: 105px !important;
        padding: 12px 8px !important;
        border-radius: 14px !important;
    }

    .project-details-info-card .project-details-stats-box .stat-icon {
        width: 30px !important;
        height: 30px !important;
        border-radius: 10px !important;
        margin-bottom: 6px !important;
        font-size: 11px !important;
    }

    .project-details-info-card .project-details-stats-box .stat-item h4 {
        font-size: 16px !important;
        margin-bottom: 3px !important;
    }

    .project-details-info-card .project-details-stats-box .stat-item span:last-child {
        font-size: 10px !important;
        line-height: 1.4 !important;
    }

    .donation-sidebar-modern {
        padding: 15px !important;
        border-radius: 18px !important;
        box-shadow: 0 10px 26px rgba(15, 23, 42, .07) !important;
    }

    .donation-sidebar-head {
        margin-bottom: 14px !important;
    }

    .donation-label {
        padding: 5px 11px !important;
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }

    .donation-sidebar-head h4 {
        font-size: 17px !important;
    }

    .donation-sidebar-head p {
        font-size: 11.5px !important;
    }

    .amount-grid-modern {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .amount-grid-modern .amount-option-btn {
        min-height: 42px !important;
        border-radius: 13px !important;
    }

    .amount-grid-modern .amount-option-btn strong {
        font-size: 13px !important;
    }

    .amount-grid-modern .amount-option-btn small {
        font-size: 10px !important;
    }

    .donation-input-label {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }

    .custom-amount-modern {
        height: 44px !important;
        border-radius: 14px !important;
    }

    .custom-amount-modern .custom-amount-input {
        font-size: 13px !important;
        padding-inline: 12px !important;
    }

    .custom-amount-modern .currency-suffix {
        min-width: 48px !important;
        font-size: 11px !important;
    }

    .donation-min-note,
    .details-amount-message {
        font-size: 10.5px !important;
        margin: 6px 2px 10px !important;
    }

    .btn-donate-modern,
    .btn-cart-modern {
        height: 44px !important;
        border-radius: 14px !important;
        font-size: 13px !important;
    }

    .payment-methods-box {
        margin-top: 14px !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }

    .payment-title {
        font-size: 11.5px !important;
        margin-bottom: 9px !important;
    }

    .payment-icons-list {
        gap: 6px !important;
    }

    .payment-icon {
        min-width: 38px !important;
        height: 28px !important;
        padding-inline: 7px !important;
        border-radius: 9px !important;
        font-size: 17px !important;
    }

    .payment-icon.payment-mada {
        font-size: 11px !important;
    }

    .payment-note {
        font-size: 10px !important;
        margin-top: 8px !important;
    }

    .details-share-box {
        margin-top: 14px !important;
        padding-top: 14px !important;
    }

    .details-share-box h6 {
        font-size: 13px !important;
        margin-bottom: 10px !important;
    }

    .details-share-actions {
        gap: 7px !important;
    }

    .details-share-btn {
        min-height: 34px !important;
        padding: 7px 10px !important;
        font-size: 11.5px !important;
    }
}

/* =========================================================
   Checkout Payment Page - Clean Modern Layout
   تحسين صفحة الدفع بدون تغيير منطق الدفع
========================================================= */

.payment-page-modern {
    position: relative;
    padding: 0 0 130px !important;
    margin: 0 !important;
    min-height: 70vh;
    background:
        radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--site-primary, var(--primary-color)) 5.5%, transparent), transparent 28%),
        radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--site-secondary, var(--secondary-color)) 5%, transparent), transparent 26%),
        linear-gradient(180deg, #f8fbfc 0%, #ffffff 55%, #f8fbfc 100%) !important;
}

.payment-page-modern .container {
    max-width: 1120px;
}

.payment-checkout-row {
    align-items: flex-start !important;
    row-gap: 24px;
}

/* الكروت */
.payment-summary-card,
.payment-form-card {
    border: 1px solid #e7eef3 !important;
    border-radius: 28px !important;
    background: #fff !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .08) !important;
    overflow: hidden;
}

/* مهم: لا نخلي كارد الملخص يتمدد فاضي */
.payment-summary-card {
    position: sticky;
    top: 105px;
    height: auto !important;
    min-height: 0 !important;
}

/* رأس المبلغ */
.payment-summary-card .card-header {
    min-height: 230px;
    border: 0 !important;
    padding: 30px !important;
    background: var(--site-gradient,
            linear-gradient(135deg, var(--site-primary, var(--primary-color)), var(--site-secondary, var(--secondary-color)))) !important;
    color: #fff;
    overflow: hidden;
    box-shadow:
        0 14px 34px color-mix(in srgb, var(--site-primary, var(--primary-color)) 26%, transparent),
        inset 0 0 0 1px rgba(255, 255, 255, .16) !important;
}

/* هالة خفيفة داخل مربع المبلغ */
.payment-summary-card .card-header::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow:
        0 0 24px rgba(255, 255, 255, .13),
        0 0 42px color-mix(in srgb, var(--site-secondary, var(--secondary-color)) 22%, transparent);
    opacity: .75;
    pointer-events: none;
    animation: checkoutAmountGlow 3.2s ease-in-out infinite;
}

/* إخفاء صورة الخلفية التي سببت الخط داخل مربع المبلغ */
.payment-summary-card .card-header>img {
    display: none !important;
}

.payment-summary-card .card-header>img {
    position: absolute;
    inset: auto -35px -45px auto;
    width: 260px;
    max-width: 70%;
    opacity: .14;
    pointer-events: none;
}

.payment-summary-card .payment-sum {
    z-index: 2;
    min-height: 165px;
    justify-content: center;
    text-align: center;
}

.payment-summary-card .payment-sum::before {
    content: "\f4c0";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, .12),
        0 0 0 1px rgba(255, 255, 255, .22),
        0 0 28px rgba(255, 255, 255, .22) !important;
    animation: checkoutIconFloat 2.8s ease-in-out infinite;
}

/* شعارات الدفع نفسها */
.payment-summary-card .site-payment-logo {
    position: relative;
    box-shadow:
        0 8px 18px rgba(15, 23, 42, .08),
        0 0 0 1px rgba(255, 255, 255, .85) inset !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* ظل متحرك خفيف حول شعارات الدفع */
.payment-summary-card .site-payment-logo::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 14px;
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--site-primary, var(--primary-color)) 35%, transparent),
            color-mix(in srgb, var(--site-secondary, var(--secondary-color)) 28%, transparent));
    opacity: 0;
    filter: blur(8px);
    z-index: -1;
    transition: opacity .22s ease;
}

/* عند المرور على أي شعار */
.payment-summary-card .site-payment-logo:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--site-primary, var(--primary-color)) 25%, #ffffff) !important;
    box-shadow:
        0 13px 26px rgba(15, 23, 42, .13),
        0 0 0 1px color-mix(in srgb, var(--site-primary, var(--primary-color)) 18%, #ffffff) inset !important;
}

.payment-summary-card .site-payment-logo:hover::before {
    opacity: .65;
}

.payment-summary-card .payment-sum label {
    color: rgba(255, 255, 255, .88);
    font-size: 14px;
    font-weight: 800;
}

.payment-summary-card .payment-sum .amount {
    color: #fff;
    font-size: 42px;
    font-weight: 1000;
    line-height: 1.2;
    margin-bottom: 0;
}

.payment-summary-card .unit img {
    filter: brightness(0) invert(1);
}

/* جسم الملخص مثل المثال */
.payment-summary-body {
    padding: 24px;
    background: #fff;
}

.payment-summary-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #111827;
    font-size: 20px;
    font-weight: 1000;
    margin-bottom: 8px;
}

.payment-summary-title i {
    color: var(--site-primary, var(--primary-color));
}

.payment-summary-quote {
    margin: 0 auto 18px;
    text-align: center;
    color: #667085;
    font-size: 14px;
    font-weight: 700;
}

.payment-method-preview {
    padding: 16px;
    border-radius: 20px;
    background: #f8fbfc;
    border: 1px solid #edf2f5;
    text-align: center;
}

.payment-method-preview>span {
    display: block;
    margin-bottom: 12px;
    color: #344054;
    font-size: 13px;
    font-weight: 900;
}

.payment-preview-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pay-brand {
    min-width: 54px;
    height: 34px;
    padding: 0 10px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e5edf2;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .05);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 1000;
}

.pay-brand i {
    font-size: 24px;
}

.pay-brand.mada {
    color: #009b8f;
    background: rgba(0, 155, 143, .07);
    border-color: rgba(0, 155, 143, .20);
    font-size: 14px;
}

.pay-brand.visa i {
    color: #1a1f71;
}

.pay-brand.master i {
    color: #eb001b;
}

.pay-brand.apple i {
    color: #111827;
}

.payment-secure-note {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--site-primary, var(--primary-color)) 7%, #ffffff) !important;
    border-color: color-mix(in srgb, var(--site-primary, var(--primary-color)) 14%, #ffffff) !important;
    color: var(--site-primary, var(--primary-color)) !important;
    font-size: 12.5px;
    font-weight: 900;
    text-align: center;
}

/* كارد الفورم */
.payment-form-card {
    padding: 4px 26px 26px !important;
}

.payment-form-card .card-header {
    border: 0 !important;
}

.payment-card-title {
    margin: 0 !important;
    padding: 8px 0 0;
    color: #111827;
    font-size: 22px;
    font-weight: 1000;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.payment-card-title i {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    color: var(--site-primary, var(--primary-color));
    background: rgba(0, 128, 115, .08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.payment-form-card .card-body {
    padding-top: 6px !important;
}

.payment-form-card .optionWrapper,
.payment-form-card .do-payment {
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
}

.payment-form-card .payment {
    padding: 18px;
    border-radius: 22px;
    background: #f8fbfc;
    border: 1px solid #edf2f5;
}

.payment-form-card .form-label {
    margin-bottom: 7px !important;
    color: #344054 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.payment-form-card .form-control {
    min-height: 48px !important;
    height: 48px !important;
    border: 1px solid #dce8ee !important;
    border-radius: 15px !important;
    background: #fff !important;
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
    transition: .22s ease !important;
}

.payment-form-card .form-control:focus {
    border-color: var(--site-primary, var(--primary-color)) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--site-primary, var(--primary-color)) 10%, transparent) !important;

}

.payment-form-card .form-control::placeholder {
    color: #98a2b3;
    font-weight: 600;
}

/* أيقونة رقم البطاقة */
.payment-form-card .card-type {
    position: relative;
}

.payment-form-card .card-type::after {
    content: "\f09d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    inset-inline-start: 14px;
    transform: translateY(-50%);
    color: var(--site-primary, var(--primary-color));
    opacity: .75;
    pointer-events: none;
}

.payment-form-card .new-card-number {
    padding-inline-start: 42px !important;
}

/* تاريخ الانتهاء + CVV */
.payment-exp-cvv-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: end;
}

.payment-exp-cvv-row .form-group {
    min-width: 0;
}

.payment-form-card .card-dates {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.payment-form-card .card-dates .form-control,
.payment-form-card #cvv {
    width: 100% !important;
}

/* رسائل الخطأ */
.payment-form-card .error-message,
.payment-form-card label[role="alert"] {
    display: block;
    margin-top: 5px;
    color: #dc2626 !important;
    font-size: 12px !important;
    font-weight: 700;
}

/* الإجمالي داخل الفورم */
.payment-total-row {
    margin-top: 18px;
    padding: 14px 16px !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--site-primary, var(--primary-color)) 7%, #ffffff) !important;
    border-color: color-mix(in srgb, var(--site-primary, var(--primary-color)) 14%, #ffffff) !important;
    color: var(--site-primary, var(--primary-color)) !important;
}

.payment-total-row label {
    font-size: 15px;
    font-weight: 1000;
    color: var(--site-primary, var(--primary-color)) !important;
}

/* زر الدفع */
#submitNewCard {
    height: 52px;
    border: 0 !important;
    border-radius: 18px !important;
    background: var(--site-gradient,
            linear-gradient(135deg, var(--site-primary, var(--primary-color)), var(--site-secondary, var(--secondary-color)))) !important;
    color: #fff !important;
    font-size: 16px;
    font-weight: 1000 !important;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--site-primary, var(--primary-color)) 22%, transparent) !important;
    transition: .22s ease;
}

#submitNewCard:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px color-mix(in srgb, var(--site-primary, var(--primary-color)) 28%, transparent) !important;
}

/* عبارة الأمان أسفل الفورم */
.payment-page-modern .text-grey-4 {
    margin-top: 16px !important;
    color: #667085 !important;
}

.payment-page-modern .text-grey-4 i {
    color: var(--site-primary, var(--primary-color));
}

/* مودال رقم الجوال - تحسين شكل فقط */
#phoneModal.modal {
    background: rgba(15, 23, 42, .48) !important;
    backdrop-filter: blur(4px);
}

#phoneModal .modal-content {
    width: min(92%, 360px) !important;
    border: 0;
    border-radius: 22px;
    padding: 22px !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .20);
}

#phoneModal h4 {
    color: #111827;
    font-weight: 1000;
    margin-bottom: 14px;
}

#modalPhoneNumber {
    width: 100%;
    height: 46px;
    border: 1px solid #dce8ee;
    border-radius: 14px;
    padding: 0 14px;
    text-align: center;
    font-weight: 900;
    outline: none;
}

#modalPhoneNumber:focus {
    border-color: var(--site-primary, var(--primary-color)) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--site-primary, var(--primary-color)) 10%, transparent) !important;
}

#submitPhoneNumber {
    width: 100%;
    height: 44px;
    margin-top: 14px;
    border: 0;
    border-radius: 14px;
    background: var(--site-primary, var(--primary-color));
    color: #fff;
    font-weight: 900;
}

/* حركة بسيطة لكل الشعارات بدون ما تكون مزعجة */
.payment-summary-card .site-payment-methods .site-payment-logo {
    animation: checkoutPaymentLogoPulse 3.6s ease-in-out infinite;
}

.payment-summary-card .site-payment-methods .site-payment-logo:nth-child(2) {
    animation-delay: .25s;
}

.payment-summary-card .site-payment-methods .site-payment-logo:nth-child(3) {
    animation-delay: .5s;
}

.payment-summary-card .site-payment-methods .site-payment-logo:nth-child(4) {
    animation-delay: .75s;
}

.payment-summary-card .site-payment-methods .site-payment-logo:nth-child(5) {
    animation-delay: 1s;
}

.payment-summary-card .site-payment-methods .site-payment-logo:nth-child(6) {
    animation-delay: 1.25s;
}

@keyframes checkoutAmountGlow {

    0%,
    100% {
        opacity: .45;
        transform: scale(.985);
    }

    50% {
        opacity: .9;
        transform: scale(1);
    }
}

@keyframes checkoutIconFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes checkoutPaymentLogoPulse {

    0%,
    100% {
        box-shadow:
            0 8px 18px rgba(15, 23, 42, .07),
            0 0 0 1px rgba(255, 255, 255, .85) inset;
    }

    50% {
        box-shadow:
            0 11px 24px rgba(15, 23, 42, .11),
            0 0 18px color-mix(in srgb, var(--site-primary, var(--primary-color)) 12%, transparent),
            0 0 0 1px color-mix(in srgb, var(--site-primary, var(--primary-color)) 14%, #ffffff) inset;
    }
}

/* التابلت والجوال */
@media (max-width: 991.98px) {
    .payment-page-modern {
        padding: 0 0 115px !important;
    }

    .payment-summary-card {
        position: relative;
        top: auto;
    }

    .payment-summary-card .card-header {
        min-height: 185px;
    }

    .payment-summary-card .payment-sum .amount {
        font-size: 34px;
    }

    .payment-form-card {
        padding: 2px 18px 20px !important;
    }
}

/* الجوال */
@media (max-width: 575.98px) {
    .payment-page-modern {
        padding-top: 0 !important;
    }

    .payment-page-modern .container {
        width: calc(100% - 24px);
        padding-inline: 0;
    }

    .payment-summary-card,
    .payment-form-card {
        border-radius: 20px !important;
    }

    .payment-summary-card .card-header {
        min-height: 150px;
        padding: 20px !important;
    }

    .payment-summary-card .card-header::before {
        inset: 14px;
        opacity: .45;
        box-shadow:
            0 0 18px rgba(255, 255, 255, .10),
            0 0 28px color-mix(in srgb, var(--site-secondary, var(--secondary-color)) 16%, transparent);
    }

    .payment-summary-card .payment-sum::before {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        font-size: 18px;
        margin-bottom: 8px;
    }

    .payment-summary-card .payment-sum label {
        font-size: 12px;
    }

    .payment-summary-card .payment-sum .amount {
        font-size: 28px;
    }

    .payment-summary-body {
        padding: 16px;
    }

    .payment-summary-title {
        font-size: 17px;
    }

    .payment-summary-quote {
        font-size: 12px;
        margin-bottom: 12px;
    }

    .payment-method-preview {
        padding: 12px;
        border-radius: 16px;
    }

    .pay-brand {
        min-width: 44px;
        height: 30px;
        border-radius: 10px;
    }

    .pay-brand i {
        font-size: 19px;
    }

    .pay-brand.mada {
        font-size: 11px;
    }

    .payment-form-card {
        padding: 0 14px 16px !important;
    }

    .payment-card-title {
        font-size: 18px;
    }

    .payment-card-title i {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        font-size: 13px;
    }

    .payment-form-card .payment {
        padding: 14px;
        border-radius: 18px;
    }

    .payment-form-card .form-label {
        font-size: 12px !important;
    }

    .payment-form-card .form-control {
        min-height: 44px !important;
        height: 44px !important;
        border-radius: 13px !important;
        font-size: 13px !important;
    }

    .payment-exp-cvv-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .payment-total-row {
        padding: 12px 14px !important;
        border-radius: 15px !important;
    }

    .payment-total-row label {
        font-size: 13px;
    }

    #submitNewCard {
        height: 48px;
        border-radius: 15px !important;
        font-size: 14px;
    }

    .payment-summary-card .site-payment-logo {
        animation-duration: 4.5s;
    }

    .payment-summary-card .site-payment-logo:hover {
        transform: none;
    }
}

.payment-form-card img[src*="CVV"],
.payment-form-card img[src*="cvv"] {
    display: none !important;
}

/* =========================================================
   Checkout Mobile Final Touch
   تحسين ترتيب ومسافات صفحة الدفع في الجوال
========================================================= */

@media (max-width: 575.98px) {
    .payment-page-modern .container.pt-5.pb-5 {
        padding-top: 22px !important;
        padding-bottom: 28px !important;
    }

    .payment-checkout-row {
        row-gap: 18px !important;
    }

    .payment-summary-card .card-header {
        min-height: 132px !important;
        padding: 18px !important;
    }

    .payment-summary-card .payment-sum {
        min-height: 108px !important;
    }

    .payment-summary-card .payment-sum::before {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 7px !important;
    }

    .payment-summary-card .payment-sum .amount {
        font-size: 26px !important;
    }

    .payment-summary-body {
        padding: 14px !important;
    }

    .payment-secure-note {
        margin-top: 12px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        font-size: 11.5px !important;
    }

    .payment-form-card {
        padding: 0 14px 14px !important;
    }

    .payment-page-modern .text-grey-4 {
        margin-top: 10px !important;
        margin-bottom: 0 !important;
    }
}

/* =========================================================
   Global Payment Methods Logos - Final Clean
   شعارات وسائل الدفع العامة للموقع
========================================================= */

.site-payment-methods {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.site-payment-logo {
    width: 72px;
    height: 40px;
    padding: 4px 7px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #dfe9ee;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: .2s ease;
}

.site-payment-logo:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 18px rgba(15, 23, 42, .10);
}

.site-payment-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* =========================================================
   Large Version - صفحة الدفع
========================================================= */

.site-payment-methods.payment-methods-lg .site-payment-logo {
    width: 72px;
    height: 40px;
}

/* =========================================================
   Small Version - الفوتر / السلة / تفاصيل المشروع
========================================================= */

.site-payment-methods.payment-methods-sm {
    gap: 7px;
}

.site-payment-methods.payment-methods-sm .site-payment-logo {
    width: 58px;
    height: 32px;
    padding: 3px 5px;
    border-radius: 10px;
}

/* =========================================================
   Individual Logo Tweaks
   ضبط كل شعار حسب حجمه الحقيقي
========================================================= */

/* مدى */
.site-payment-logo.logo-mada img {
    transform: scale(1.70);
}

/* Visa */
.site-payment-logo.logo-visa img {
    transform: scale(1.08);
}

/* Mastercard */
.site-payment-logo.logo-mastercard img {
    transform: scale(1.05);
}

/* Apple Pay */
.site-payment-logo.logo-apple img {
    transform: scale(1.65);
}

/* Samsung Pay - بعد تغيير الأيقونة ما يحتاج تكبير قوي */
.site-payment-logo.logo-samsung img {
    transform: scale(1.18);
}

/* Bank Transfer */
.site-payment-logo.logo-bank img {
    transform: scale(1.02);
}

/* تقليل padding للشعارات التي فيها فراغ داخلي */
.site-payment-logo.logo-mada,
.site-payment-logo.logo-apple {
    padding: 2px 4px;
}

/* =========================================================
   Small Version Tweaks
========================================================= */

.site-payment-methods.payment-methods-sm .logo-mada img {
    transform: scale(1.50);
}

.site-payment-methods.payment-methods-sm .logo-visa img {
    transform: scale(1);
}

.site-payment-methods.payment-methods-sm .logo-mastercard img {
    transform: scale(1);
}

.site-payment-methods.payment-methods-sm .logo-apple img {
    transform: scale(1.45);
}

.site-payment-methods.payment-methods-sm .logo-samsung img {
    transform: scale(1.08);
}

.site-payment-methods.payment-methods-sm .logo-bank img {
    transform: scale(1);
}

/* =========================================================
   Mobile
========================================================= */

@media (max-width: 575.98px) {
    .site-payment-methods {
        gap: 8px;
    }

    .site-payment-logo {
        width: 62px;
        height: 36px;
        padding: 3px 5px;
        border-radius: 10px;
    }

    .site-payment-logo.logo-mada img {
        transform: scale(1.50);
    }

    .site-payment-logo.logo-visa img {
        transform: scale(1);
    }

    .site-payment-logo.logo-mastercard img {
        transform: scale(1);
    }

    .site-payment-logo.logo-apple img {
        transform: scale(1.45);
    }

    .site-payment-logo.logo-samsung img {
        transform: scale(1.08);
    }

    .site-payment-logo.logo-bank img {
        transform: scale(1);
    }

    .site-payment-methods.payment-methods-sm .site-payment-logo {
        width: 52px;
        height: 30px;
    }
}

/* =========================================================
   Checkout Payment Method Switch + Panels - Final
========================================================= */

.payment-method-switch {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 0 22px !important;
    padding: 7px !important;
    border-radius: 22px !important;
    background: #f8fbfc !important;
    border: 1px solid #edf2f5 !important;
}

.payment-method-btn {
    min-height: 52px !important;
    border: 0 !important;
    border-radius: 17px !important;
    background: #fff !important;
    color: #344054 !important;
    font-size: 14px !important;
    font-weight: 1000 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    cursor: pointer !important;
    transition: .22s ease !important;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .045) !important;
}

.payment-method-btn i {
    color: var(--site-primary, var(--primary-color)) !important;
    font-size: 16px !important;
}

.payment-method-btn.active {
    background: var(--site-gradient,
            linear-gradient(135deg, var(--site-primary, var(--primary-color)), var(--site-secondary, var(--secondary-color)))) !important;
    color: #fff !important;
    box-shadow: 0 13px 28px color-mix(in srgb, var(--site-primary, var(--primary-color)) 22%, transparent) !important;
}

.payment-method-btn.active i {
    color: #fff !important;
}

.payment-panel {
    display: none !important;
    width: 100% !important;
}

.payment-panel.active {
    display: block !important;
}

/* إصلاح عرض كارد الدفع بالبطاقة */
#cardPaymentPanel,
#cardPaymentPanel #paymentOptions,
#cardPaymentPanel #accordionPayment,
#cardPaymentPanel .accordion,
#cardPaymentPanel .accordion-body,
#cardPaymentPanel .optionWrapper,
#cardPaymentPanel .do-payment,
#cardPaymentPanel .payment {
    width: 100% !important;
    max-width: 100% !important;
}

#cardPaymentPanel .optionWrapper {
    margin: 0 !important;
    padding: 0 !important;
}

#cardPaymentPanel .accordion-body {
    padding: 0 !important;
}

.payment-form-card .payment {
    padding: 22px !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, #f8fbfc, #ffffff) !important;
    border: 1px solid #edf2f5 !important;
}

/* =========================================================
   Bank Transfer Checkout - Final Matching Site
========================================================= */

.payment-form-card #bankPaymentPanel .bank-transfer-box {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 24px 22px !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at top right,
            color-mix(in srgb, var(--site-primary, var(--primary-color)) 5%, transparent),
            transparent 42%),
        linear-gradient(180deg, #ffffff, #f8fbfc) !important;
    border: 1px solid #edf2f5 !important;
    box-shadow: none !important;
    text-align: right !important;
    direction: rtl !important;
    overflow: visible !important;
}

.bank-transfer-title {
    margin: 0 0 7px !important;
    color: #111827 !important;
    font-size: 23px !important;
    font-weight: 1000 !important;
    line-height: 1.4 !important;
    text-align: right !important;
}

.bank-transfer-desc {
    margin: 0 0 20px !important;
    color: #667085 !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    line-height: 1.8 !important;
    text-align: right !important;
}

.bank-step {
    display: none !important;
    width: 100% !important;
}

.bank-step.active {
    display: block !important;
}

.bank-step-title {
    margin-bottom: 18px !important;
    color: #111827 !important;
    font-size: 22px !important;
    font-weight: 1000 !important;
    line-height: 1.5 !important;
    text-align: right !important;
}

/* فاعل خير جهة اليمين */
.anonymous-row {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-direction: row !important;
    direction: rtl !important;
    gap: 9px !important;
    margin: 0 0 14px !important;
    color: #344054 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-align: right !important;
}

.anonymous-row label {
    margin: 0 !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    order: 1 !important;
}

.anonymous-check {
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
    accent-color: var(--site-primary, var(--primary-color)) !important;
    cursor: pointer !important;
    order: 2 !important;
}

/* حقول التحويل */
.bank-input,
.bank-transfer-box .form-control {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 18px !important;
    border: 1px solid #dce8ee !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-align: right !important;
    direction: rtl !important;
    box-shadow: none !important;
    outline: none !important;
    transition: .22s ease !important;
}

.bank-input:focus,
.bank-transfer-box .form-control:focus {
    border-color: var(--site-primary, var(--primary-color)) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--site-primary, var(--primary-color)) 10%, transparent) !important;
}

.bank-input::placeholder,
.bank-transfer-box .form-control::placeholder {
    color: #98a2b3 !important;
    font-weight: 700 !important;
    text-align: right !important;
}

.bank-transfer-box select.bank-input {
    cursor: pointer !important;
    text-align: right !important;
    text-align-last: right !important;
    direction: rtl !important;
    padding-inline-start: 16px !important;
    padding-inline-end: 38px !important;
}

/* =========================================================
   Checkout Bank Phone Input - Clean Final
   العلم يسار + الرقم يمين + إخفاء Search إلا عند فتح القائمة
========================================================= */

#bankPaymentPanel #bankStepPhone .iti {
    width: 100% !important;
    position: relative !important;
    display: block !important;
    direction: ltr !important;
    overflow: visible !important;
}

#bankPaymentPanel #bankStepPhone .iti__country-container {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    bottom: auto !important;
    width: 96px !important;
    height: 48px !important;
    z-index: 5 !important;
}

#bankPaymentPanel #bankStepPhone .iti__selected-country,
#bankPaymentPanel #bankStepPhone .iti__selected-flag {
    width: 96px !important;
    height: 48px !important;
    border-radius: 999px 0 0 999px !important;
    background: #f8fbfc !important;
    border-right: 1px solid #dce8ee !important;
    border-left: 0 !important;
    padding: 0 10px !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    position: relative !important;
    inset: auto !important;
}

#bankPaymentPanel #bankStepPhone .iti__flag {
    flex: 0 0 auto !important;
}

#bankPaymentPanel #bankStepPhone .iti__arrow {
    margin-right: 5px !important;
    margin-left: 0 !important;
}

#bankPaymentPanel #donor_phone_input {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;

    border-radius: 999px !important;
    border: 1px solid #dce8ee !important;
    background: #fff !important;

    direction: rtl !important;
    text-align: right !important;

    padding-right: 18px !important;
    padding-left: 112px !important;

    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 800 !important;

    box-shadow: none !important;
    outline: none !important;
}

#bankPaymentPanel #donor_phone_input::placeholder {
    direction: rtl !important;
    text-align: right !important;
    color: #98a2b3 !important;
    font-weight: 700 !important;
}

/* مهم: أخفي القائمة ومربع Search وهي مقفلة */
#bankPaymentPanel #bankStepPhone .iti__dropdown-content {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 7px) !important;
    left: 0 !important;
    right: auto !important;

    width: 330px !important;
    min-width: 280px !important;
    max-width: min(330px, calc(100vw - 32px)) !important;

    z-index: 999999 !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .16) !important;
}

/* تظهر فقط لما المكتبة تفتحها */
#bankPaymentPanel #bankStepPhone .iti__dropdown-content:not(.iti__hide) {
    display: block !important;
}

/* مربع البحث داخل قائمة الدول فقط */
#bankPaymentPanel #bankStepPhone .iti__search-input {
    width: 100% !important;
    height: 44px !important;
    border: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-radius: 0 !important;
    padding: 0 12px !important;
    direction: rtl !important;
    text-align: right !important;
    outline: none !important;
    box-shadow: none !important;
}

#bankPaymentPanel #bankStepPhone .iti__country-list {
    width: 100% !important;
    max-height: 230px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 0 !important;
    direction: rtl !important;
    text-align: right !important;
}

#bankPaymentPanel #bankStepPhone .iti__country {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 12px !important;
    direction: rtl !important;
    text-align: right !important;
    font-size: 13px !important;
    color: #111827 !important;
}

#bankPaymentPanel #bankStepPhone .iti__country:hover,
#bankPaymentPanel #bankStepPhone .iti__highlight {
    background: color-mix(in srgb, var(--site-primary, var(--primary-color)) 8%, #ffffff) !important;
}

#bankPaymentPanel #bankStepPhone .iti__dial-code {
    margin-right: auto !important;
    margin-left: 0 !important;
    direction: ltr !important;
    color: #667085 !important;
}

#bankPaymentPanel,
#bankStepPhone,
#bankPaymentPanel .bank-step,
#bankPaymentPanel .bank-transfer-box,
.payment-panel,
.payment-form-card,
.payment-form-card .card-body {
    overflow: visible !important;
}

.bank-validation-message {
    min-height: 20px !important;
    margin-top: 7px !important;
    color: #dc2626 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-align: right !important;
}

@media (max-width: 575.98px) {

    #bankPaymentPanel #bankStepPhone .iti__country-container,
    #bankPaymentPanel #bankStepPhone .iti__selected-country,
    #bankPaymentPanel #bankStepPhone .iti__selected-flag {
        width: 88px !important;
        height: 42px !important;
    }

    #bankPaymentPanel #donor_phone_input {
        height: 42px !important;
        min-height: 42px !important;
        padding-left: 98px !important;
        padding-right: 14px !important;
        font-size: 12.5px !important;
    }

    #bankPaymentPanel #bankStepPhone .iti__dropdown-content {
        width: min(310px, calc(100vw - 32px)) !important;
        min-width: 260px !important;
    }
}

/* =========================================================
   FINAL FIX - Bank Transfer Step Buttons + Transfer Screen
   يوضع آخر ملف CSS نهائيًا
========================================================= */

/* شاشة التحويل نفسها */
#bankPaymentPanel #bankStepTransfer {
    text-align: right !important;
}

/* ملخص الاسم والجوال */
#bankPaymentPanel .bank-donor-summary {
    width: 100% !important;
    margin-bottom: 16px !important;
    padding: 12px 16px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px dashed #dce8ee !important;
    color: #344054 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-align: right !important;
    line-height: 1.8 !important;
}

/* اختيار المصرف */
#bankPaymentPanel #bank_account_id {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 999px !important;
    border: 1px solid #dce8ee !important;
    background: #fff !important;
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-align: right !important;
    text-align-last: right !important;
    direction: rtl !important;
    padding: 0 18px !important;
    box-shadow: none !important;
}

/* رقم الآيبان */
#bankPaymentPanel .selected-bank-info {
    width: 100% !important;
    margin-top: 12px !important;
    margin-bottom: 16px !important;
}

#bankPaymentPanel .bank-copy-field {
    position: relative !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 52px 0 18px !important;
    border: 1px solid #dce8ee !important;
    border-radius: 999px !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    direction: ltr !important;
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    overflow: hidden !important;
}

#bankPaymentPanel .bank-copy-field span {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    direction: ltr !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

#bankPaymentPanel .bank-copy-field span::-webkit-scrollbar {
    display: none !important;
}

#bankPaymentPanel .copy-bank-number-btn {
    position: absolute !important;
    right: 12px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: color-mix(in srgb, var(--site-primary, var(--primary-color)) 9%, #ffffff) !important;
    color: var(--site-primary, var(--primary-color)) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 17px !important;
    padding: 0 !important;
    cursor: pointer !important;
}

#bankPaymentPanel .bank-copy-hint {
    display: block !important;
    margin-top: 7px !important;
    color: #667085 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

/* عنوان الإيصال */
#bankPaymentPanel .bank-label {
    display: block !important;
    margin: 14px 0 8px !important;
    color: var(--site-primary, var(--primary-color)) !important;
    font-size: 14px !important;
    font-weight: 1000 !important;
    text-align: right !important;
}

/* زر اختيار صورة الإيصال */
#bankPaymentPanel .receipt-upload-label {
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 16px !important;
    border: 1px solid #dce8ee !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #475467 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: .22s ease !important;
    margin-bottom: 6px !important;
}

#bankPaymentPanel .receipt-upload-label:hover {
    border-color: var(--site-primary, var(--primary-color)) !important;
    color: var(--site-primary, var(--primary-color)) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--site-primary, var(--primary-color)) 8%, transparent) !important;
}

#bankPaymentPanel input[type="file"] {
    display: none !important;
}

#bankPaymentPanel .receipt-file-name {
    min-height: 18px !important;
    margin-top: 5px !important;
    color: #667085 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

/* أزرار التالي / إرسال / رجوع */
#bankPaymentPanel .bank-send-btn,
#bankPaymentPanel .bank-back-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 0 !important;
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    font-family: inherit !important;
}

/* زر التالي وإرسال */
#bankPaymentPanel .bank-send-btn {
    min-width: 112px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 30px !important;
    border-radius: 15px !important;
    background: var(--site-gradient,
            linear-gradient(135deg, var(--site-primary, var(--primary-color)), var(--site-secondary, var(--secondary-color)))) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 1000 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--site-primary, var(--primary-color)) 20%, transparent) !important;
    transition: .22s ease !important;
    margin-top: 14px !important;
}

#bankPaymentPanel .bank-send-btn:hover {
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 32px color-mix(in srgb, var(--site-primary, var(--primary-color)) 26%, transparent) !important;
}

/* زر رجوع */
#bankPaymentPanel .bank-back-btn {
    min-width: 84px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 20px !important;
    border-radius: 14px !important;
    background: #f2f4f7 !important;
    color: #475467 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    margin-top: 14px !important;
    margin-right: 8px !important;
    transition: .22s ease !important;
}

#bankPaymentPanel .bank-back-btn:hover {
    background: color-mix(in srgb, var(--site-primary, var(--primary-color)) 8%, #ffffff) !important;
    color: var(--site-primary, var(--primary-color)) !important;
}

/* ترتيب الأزرار داخل خطوة الجوال وخطوة التحويل */
#bankPaymentPanel #bankStepPhone,
#bankPaymentPanel #bankStepTransfer {
    text-align: right !important;
}

#bankPaymentPanel #bankStepPhone .bank-send-btn,
#bankPaymentPanel #bankStepPhone .bank-back-btn,
#bankPaymentPanel #bankStepTransfer .bank-send-btn,
#bankPaymentPanel #bankStepTransfer .bank-back-btn {
    vertical-align: middle !important;
}

/* الجوال */
@media (max-width: 575.98px) {
    #bankPaymentPanel .bank-send-btn {
        min-width: 92px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 22px !important;
        border-radius: 13px !important;
        font-size: 12.5px !important;
    }

    #bankPaymentPanel .bank-back-btn {
        min-width: 76px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 16px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
    }

    #bankPaymentPanel .bank-copy-field,
    #bankPaymentPanel .receipt-upload-label,
    #bankPaymentPanel #bank_account_id {
        min-height: 42px !important;
        height: 42px !important;
        font-size: 12.5px !important;
    }
}

.bank-validation-message {
    min-height: 20px !important;
    margin-top: 7px !important;
    color: #dc2626 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-align: right !important;
}

/* أيقونات الدفع في سلة التبرعات تكون قابلة للضغط */
.payment-logo-trigger {
    cursor: pointer !important;
    transition: .22s ease !important;
    user-select: none !important;
}

.payment-logo-trigger:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .12) !important;
    border-color: var(--site-primary, var(--primary-color)) !important;
}

.payment-logo-trigger.active {
    border-color: var(--site-primary, var(--primary-color)) !important;
    background: color-mix(in srgb, var(--site-primary, var(--primary-color)) 9%, #ffffff) !important;
}

/* =========================================================
   Riyal Icon Effect - تأثير رمز الريال
========================================================= */

.currency-riyal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: 4px;
    vertical-align: middle;
    line-height: 1;
}

.currency-riyal img {
    width: 15px;
    height: 15px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.22));
    transform: translateY(-1px);
    transition: transform 0.25s ease, filter 0.25s ease;
}

/* تأثير عند المرور */
.currency-riyal:hover img {
    transform: translateY(-2px) scale(1.12);
    filter:
        drop-shadow(0 3px 5px rgba(0, 0, 0, 0.25)) drop-shadow(0 0 6px rgba(34, 147, 199, 0.28));
}

/* حجم صغير */
.currency-riyal-sm img {
    width: 13px;
    height: 13px;
}

/* حجم متوسط */
.currency-riyal-md img {
    width: 16px;
    height: 16px;
}

/* حجم كبير */
.currency-riyal-lg img {
    width: 22px;
    height: 22px;
}

/* =========================================================
   Unified Section Titles - نفس الشكل الأول لكل العناوين
========================================================= */

.section-title,
.stats-title,
.stats-section h3,
.donorTestimonials .dt-title,
.news-section-style2 .section-title,
.gallery-3d-section .section-title,
.video-section .section-title,
.partners-section .section-title,
.about-section .section-title,
.projects-section .section-title {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;

    margin: 0 !important;
    padding: 0 14px !important;

    color: var(--site-primary, var(--primary-color)) !important;
    font-size: clamp(25px, 3vw, 38px) !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.4px !important;
    text-align: center !important;

    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: 0 8px 20px color-mix(in srgb, var(--site-primary, var(--primary-color)) 14%, transparent) !important;
}

/* الزخارف الجانبية مثل الشكل الأول */
.section-title::before,
.section-title::after,
.stats-title::before,
.stats-title::after,
.stats-section h3::before,
.stats-section h3::after,
.donorTestimonials .dt-title::before,
.donorTestimonials .dt-title::after,
.news-section-style2 .section-title::before,
.news-section-style2 .section-title::after,
.gallery-3d-section .section-title::before,
.gallery-3d-section .section-title::after,
.video-section .section-title::before,
.video-section .section-title::after,
.partners-section .section-title::before,
.partners-section .section-title::after,
.about-section .section-title::before,
.about-section .section-title::after,
.projects-section .section-title::before,
.projects-section .section-title::after {
    content: "" !important;
    position: static !important;
    display: inline-block !important;

    width: 42px !important;
    height: 12px !important;
    flex: 0 0 42px !important;

    margin: 0 !important;
    border-radius: 999px !important;

    background:
        radial-gradient(circle, var(--site-secondary, var(--secondary-color)) 0 3px, transparent 4px),
        linear-gradient(90deg,
            transparent,
            color-mix(in srgb, var(--site-primary, var(--primary-color)) 55%, transparent),
            transparent) !important;

    background-size: 12px 12px, 100% 2px !important;
    background-position: center, center !important;
    background-repeat: no-repeat !important;

    opacity: .85 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* عكس الزخرفة اليمنى */
.section-title::before,
.stats-title::before,
.stats-section h3::before,
.donorTestimonials .dt-title::before,
.news-section-style2 .section-title::before,
.gallery-3d-section .section-title::before,
.video-section .section-title::before,
.partners-section .section-title::before,
.about-section .section-title::before,
.projects-section .section-title::before {
    transform: scaleX(-1) !important;
}

/* حركة خفيفة */
.section-title,
.stats-title,
.stats-section h3,
.donorTestimonials .dt-title {
    transition: transform 0.25s ease, text-shadow 0.25s ease !important;
}

.section-title:hover,
.stats-title:hover,
.stats-section h3:hover,
.donorTestimonials .dt-title:hover {
    transform: translateY(-2px) !important;
    text-shadow: 0 12px 24px color-mix(in srgb, var(--site-primary, var(--primary-color)) 20%, transparent) !important;
}

/* داخل قسم الإحصائيات الخلفية غامقة، خلي العنوان أبيض */
.stats-section h3,
.stats-section .stats-title {
    color: #fff !important;
    text-shadow: 0 8px 20px rgba(0, 0, 0, .18) !important;
}

.stats-section h3::before,
.stats-section h3::after,
.stats-section .stats-title::before,
.stats-section .stats-title::after {
    background:
        radial-gradient(circle, rgba(255, 255, 255, .95) 0 3px, transparent 4px),
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .75),
            transparent) !important;
}

/* الجوال */
@media (max-width: 575.98px) {

    .section-title,
    .stats-title,
    .stats-section h3,
    .donorTestimonials .dt-title,
    .news-section-style2 .section-title,
    .gallery-3d-section .section-title,
    .video-section .section-title,
    .partners-section .section-title,
    .about-section .section-title,
    .projects-section .section-title {
        font-size: 22px !important;
        margin: 0 !important;
        gap: 10px !important;
        padding: 0 6px !important;
        line-height: 1.35 !important;
    }

    .section-title::before,
    .section-title::after,
    .stats-title::before,
    .stats-title::after,
    .stats-section h3::before,
    .stats-section h3::after,
    .donorTestimonials .dt-title::before,
    .donorTestimonials .dt-title::after,
    .news-section-style2 .section-title::before,
    .news-section-style2 .section-title::after,
    .gallery-3d-section .section-title::before,
    .gallery-3d-section .section-title::after,
    .video-section .section-title::before,
    .video-section .section-title::after,
    .partners-section .section-title::before,
    .partners-section .section-title::after,
    .about-section .section-title::before,
    .about-section .section-title::after,
    .projects-section .section-title::before,
    .projects-section .section-title::after {
        width: 26px !important;
        flex-basis: 26px !important;
        height: 10px !important;
        background-size: 10px 10px, 100% 2px !important;
    }
}

/* ==================================================
   Waqf Certificate - Final Responsive Balanced Version
================================================== */

.waqf-certificate-modal {
    direction: rtl;

    /* ألوان ديناميكية من ألوان الموقع */
    --waqf-primary: var(--site-primary, var(--primary-color)) !important;
    --waqf-secondary: var(--site-secondary, var(--secondary-color)) !important;
    --waqf-primary-soft: color-mix(in srgb, var(--waqf-primary) 8%, #fff);

    /* ألوان ثابتة للصك حتى يبقى شكل الورق متناسق */
    --waqf-paper-bg: #f8f7f5;
    --waqf-paper-bg-2: #ffffff;

    --waqf-roll-start: #c7944d;
    --waqf-roll-mid: #efd091;
    --waqf-roll-end: #a86e2f;

    --waqf-text: #080500;
    --waqf-brown: var(--secondary-color);
    --waqf-border-soft: #d3bc92;
}

/* زر فتح الوثيقة */
.waqf-certificate-open-btn {
    width: 100%;
    min-height: 54px;
    margin-top: 14px;
    border: 0;
    border-radius: 16px;
    background: var(--site-gradient, linear-gradient(135deg, var(--waqf-primary), var(--waqf-secondary)));
    color: #fff;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.14);
    transition: 0.25s ease;
}

.waqf-certificate-open-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
}

/* المودال */
.waqf-certificate-modal .modal-dialog.modal-waqf-wide {
    max-width: 900px !important;
    width: calc(100% - 32px) !important;
    margin-inline: auto !important;
}

.waqf-certificate-modal .waqf-modal-content {
    width: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28) !important;
}

.waqf-certificate-modal .waqf-modal-body {
    max-height: 92vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 32px 26px !important;
    position: relative !important;
}

.waqf-modal-close {
    position: absolute !important;
    top: 20px !important;
    inset-inline-start: 20px !important;
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f2f4f7 !important;
    color: #667085 !important;
    z-index: 50 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: 0.2s ease !important;
}

.waqf-modal-close:hover {
    background: var(--waqf-primary) !important;
    color: #fff !important;
}

.waqf-modal-title {
    text-align: center !important;
    margin-bottom: 24px !important;
}

.waqf-modal-title h4 {
    margin: 0 0 8px !important;
    font-weight: 1000 !important;
    color: #1f2937 !important;
    font-size: 28px !important;
}

.waqf-modal-title p {
    margin: 0 !important;
    color: #667085 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* الصك الخارجي */
.waqf-certificate-paper {
    position: relative !important;
    width: 100% !important;
    max-width: 620px !important;
    min-height: 820px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    /* background: linear-gradient(180deg, #faf5ea 0%, #f3ead6 100%) !important; */
    box-shadow:
        inset 0 0 0 12px var(--waqf-primary),
        inset 0 0 0 22px rgba(255, 255, 255, 0.22),
        0 24px 58px rgba(0, 0, 0, 0.16) !important;
}

/* الرأس والنهاية */
.waqf-certificate-paper::before,
.waqf-certificate-paper::after {
    content: "";
    position: absolute;
    inset-inline: 38px;
    height: 48px;
    background: linear-gradient(180deg,
            var(--waqf-roll-start) 0%,
            var(--waqf-roll-mid) 50%,
            var(--waqf-roll-end) 100%);
    border-radius: 999px;
    z-index: 3;
    box-shadow: 0 6px 16px rgba(73, 39, 12, 0.14);
}

.waqf-certificate-paper::before {
    top: 70px;
}

.waqf-certificate-paper::after {
    bottom: 36px;
}

/* زخرفة خفيفة جدًا */
.waqf-top-pattern {
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 100%) !important;
    background-size: 44px 44px !important;
    opacity: 0.16 !important;
    pointer-events: none !important;
}

/* الشعار */
.waqf-logo-wrap {
    position: absolute !important;
    top: 28px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 8 !important;
    display: flex !important;
    justify-content: center !important;
    width: auto !important;
    padding-top: 0 !important;
}

.waqf-logo-circle {
    width: 128px !important;
    height: 128px !important;
    border-radius: 50% !important;
    background: #fff !important;
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 3px solid #f5f5f5 !important;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.10),
        inset 0 0 0 2px rgba(15, 138, 123, 0.08) !important;
}

.waqf-logo-circle img {
    width: 95% !important;
    height: 95% !important;
    max-width: 95% !important;
    max-height: 95% !important;
    object-fit: contain !important;
}

/* الورقة الداخلية */
.waqf-paper-content {
    position: relative !important;
    z-index: 5 !important;
    width: calc(100% - 96px) !important;
    min-height: 590px !important;
    margin: 117px auto 84px !important;
    padding: 82px 40px 44px !important;
    text-align: center !important;
    color: var(--waqf-text) !important;
    background: linear-gradient(180deg, var(--waqf-paper-bg) 0%, var(--waqf-paper-bg-2) 100%) !important;
    border-radius: 10px !important;
    box-shadow:
        inset 0 0 0 1px rgba(140, 102, 55, 0.08),
        0 8px 26px rgba(0, 0, 0, 0.04) !important;
}

.waqf-paper-content::before {
    content: none !important;
    display: none !important;
}

/* العنوان */
.waqf-paper-content h2 {
    font-family: "El Messiri", "Tajawal", Arial, sans-serif !important;
    font-size: 34px !important;
    font-weight: 1000 !important;
    color: var(--waqf-brown) !important;
    margin-bottom: 22px !important;
}

.waqf-paper-content p {
    font-size: 17px !important;
    line-height: 1.95 !important;
    font-weight: 700 !important;
    margin: 10px 0 !important;
    color: var(--waqf-text) !important;
}

/* الحقول */
.waqf-empty-field {
    max-width: 420px !important;
    min-height: 46px !important;
    margin: 13px auto !important;
    padding: 10px 20px !important;
    border: 1.5px dashed #b9a07a !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.24) !important;
    color: var(--waqf-brown) !important;
    font-size: 20px !important;
    font-weight: 900 !important;
}

.waqf-amount-field {
    color: var(--waqf-primary) !important;
}

/* عنوان المشروع */
.waqf-certificate-modal .waqf-project-label {
    margin: 18px auto 10px !important;
    color: var(--waqf-text) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.7 !important;
    text-align: center !important;
}

/* اسم المشروع عادي وواضح */
.waqf-certificate-modal .waqf-project-title {
    display: block !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 8px auto 18px !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid #d8c8a6 !important;
    color: var(--waqf-primary) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.8 !important;
    box-shadow: none !important;
}

/* الدعاء */
.waqf-dua-text {
    margin-top: 22px !important;
}

/* الفوتر: الختم يسار - التوقيع يمين */
.waqf-footer-row {
    margin-top: 30px !important;
    display: flex !important;
    direction: ltr !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
}

.waqf-signature {
    direction: rtl !important;
    text-align: right !important;
    margin-inline-end: 18px !important;
}

.waqf-signature strong {
    display: block !important;
    font-size: 18px !important;
    color: var(--waqf-brown) !important;
    font-weight: 1000 !important;
}

.waqf-signature span {
    display: block !important;
    margin-top: 6px !important;
    color: #7a6544 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

/* الختم */
/* الختم */
.waqf-certificate-modal .waqf-stamp-box {
    width: 108px !important;
    height: 108px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.72 !important;
    transform: rotate(-10deg) !important;
    flex-shrink: 0 !important;
    margin-inline-start: 18px !important;
    margin-bottom: 4px !important;
}

.waqf-certificate-modal .waqf-stamp-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    mix-blend-mode: multiply;
}

/* كلمة معاينة */
.waqf-certificate-modal .waqf-preview-watermark {
    position: absolute !important;
    z-index: 40 !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) rotate(-34deg) !important;
    width: 150% !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: "El Messiri", "Tajawal", Arial, sans-serif !important;
    font-size: 132px !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    color: rgba(90, 90, 90, 0.10) !important;
    opacity: 1 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    user-select: none !important;
}

/* =========================================
   Responsive - Tablet
========================================= */
@media (max-width: 991.98px) {
    .waqf-certificate-modal .modal-dialog.modal-waqf-wide {
        width: calc(100% - 24px) !important;
    }

    .waqf-certificate-paper {
        max-width: 600px !important;
    }
}

/* =========================================
   Responsive - Mobile
========================================= */
@media (max-width: 767.98px) {
    .waqf-certificate-modal .modal-dialog.modal-waqf-wide {
        width: calc(100% - 16px) !important;
        margin: 8px auto !important;
    }

    .waqf-certificate-modal .waqf-modal-body {
        padding: 22px 10px !important;
    }

    .waqf-certificate-paper {
        max-width: 100% !important;
        min-height: 720px !important;
        box-shadow:
            inset 0 0 0 8px var(--waqf-primary),
            inset 0 0 0 13px rgba(255, 255, 255, 0.14),
            0 18px 38px rgba(0, 0, 0, 0.16) !important;
    }

    .waqf-certificate-paper::before,
    .waqf-certificate-paper::after {
        inset-inline: 20px !important;
        height: 44px !important;
    }

    .waqf-certificate-paper::before {
        top: 58px !important;
    }

    .waqf-certificate-paper::after {
        bottom: 30px !important;
    }

    .waqf-logo-wrap {
        top: 28px !important;
    }

    .waqf-logo-circle {
        width: 96px !important;
        height: 96px !important;
        padding: 6px !important;
    }

    .waqf-paper-content {
        width: calc(100% - 36px) !important;
        min-height: 520px !important;
        margin: 108px auto 72px !important;
        padding: 66px 16px 30px !important;
        border-radius: 8px !important;
    }

    .waqf-paper-content h2 {
        font-size: 25px !important;
        margin-bottom: 14px !important;
    }

    .waqf-paper-content p {
        font-size: 13px !important;
        line-height: 1.8 !important;
    }

    .waqf-empty-field {
        max-width: 100% !important;
        min-height: 38px !important;
        font-size: 15px !important;
        padding: 7px 12px !important;
    }

    .waqf-certificate-modal .waqf-project-label {
        font-size: 17px !important;
        margin: 12px auto 8px !important;
    }

    .waqf-certificate-modal .waqf-project-title {
        font-size: 17px !important;
        padding: 9px 12px !important;
        max-width: 100% !important;
    }

    .waqf-footer-row {
        margin-top: 22px !important;
        gap: 12px !important;
    }

    .waqf-signature strong {
        font-size: 14px !important;
    }

    .waqf-signature span {
        font-size: 12px !important;
    }

    .waqf-certificate-modal .waqf-stamp-box {
        width: 74px !important;
        height: 74px !important;
        margin-inline-start: 6px !important;
    }

    .waqf-certificate-modal .waqf-preview-watermark {
        font-size: 74px !important;
        width: 165% !important;
    }
}

/* =========================================
   Responsive - Small Mobile
========================================= */
@media (max-width: 420px) {
    .waqf-certificate-paper {
        min-height: 690px !important;
    }

    .waqf-logo-circle {
        width: 86px !important;
        height: 86px !important;
    }

    .waqf-paper-content {
        margin-top: 98px !important;
        padding-top: 58px !important;
    }

    .waqf-paper-content h2 {
        font-size: 22px !important;
    }

    .waqf-paper-content p {
        font-size: 12px !important;
    }

    .waqf-certificate-modal .waqf-project-title {
        font-size: 15px !important;
    }

    .waqf-certificate-modal .waqf-preview-watermark {
        font-size: 62px !important;
    }
}

/* =========================================================
   Checkout RTL Fix
   ضبط اتجاه رقم الهاتف والإجمالي
========================================================= */

/* رقم الهاتف في الدفع بالبطاقة */
.payment-page-modern #phone,
.payment-page-modern #modalPhoneNumber {
    direction: rtl !important;
    text-align: right !important;
}

.payment-page-modern #phone::placeholder,
.payment-page-modern #modalPhoneNumber::placeholder {
    direction: rtl !important;
    text-align: right !important;
}

/* رقم الهاتف في التحويل البنكي */
.payment-page-modern #donor_phone_input,
.payment-page-modern .phone-input {
    direction: rtl !important;
    text-align: right !important;
}

.payment-page-modern #donor_phone_input::placeholder,
.payment-page-modern .phone-input::placeholder {
    direction: rtl !important;
    text-align: right !important;
}

.payment-page-modern .payment-total-row {
    direction: rtl !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    text-align: right !important;
}

.payment-page-modern .payment-total-row label {
    text-align: right !important;
    margin-bottom: 0 !important;
}

/* =========================================================
   Checkout Payment Logos + Digital Wallet Modals - Final
   Apple / Samsung كبار + المودل مضبوط
========================================================= */

/* حاوية شعارات الدفع */
.payment-summary-card .site-payment-methods,
.payment-summary-card .payment-methods-lg {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 14px !important;
    align-items: stretch !important;
}

/* الكروت العادية: مدى / فيزا / ماستر / بنك */
.payment-summary-card .site-payment-logo {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    padding: 7px 10px !important;
    border-radius: 14px !important;
    background: #fff !important;
    border: 1px solid #d9e3ea !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .07) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;
    overflow: hidden !important;
    transition: all .22s ease !important;
}

/* الصور داخل الشعارات */
.payment-summary-card .site-payment-logo img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 27px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Hover */
.payment-summary-card .site-payment-logo:hover {
    transform: translateY(-3px) !important;
    border-color: var(--site-primary, var(--primary-color)) !important;
    box-shadow: 0 13px 26px rgba(15, 23, 42, .13) !important;
}

/* Apple Pay + Samsung Pay يأخذوا عرض 2 كارد في اللابتوب */
.payment-summary-card .logo-apple,
.payment-summary-card .logo-samsung,
.payment-summary-card .digital-wallet-logo,
.payment-summary-card .apple-pay-open,
.payment-summary-card .samsung-pay-open {
    grid-column: span 2 !important;
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 8px 18px !important;
    border-radius: 16px !important;
    background: #fff !important;
    border: 1px solid color-mix(in srgb, var(--site-primary, var(--primary-color)) 16%, #d9e3ea) !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .10) !important;
}

/* صور Apple و Samsung أكبر */
.payment-summary-card .logo-apple img,
.payment-summary-card .logo-samsung img,
.payment-summary-card .digital-wallet-logo img,
.payment-summary-card .apple-pay-open img,
.payment-summary-card .samsung-pay-open img {
    max-height: 35px !important;
    height: 35px !important;
    width: 100% !important;
    object-fit: contain !important;
}

/* تمييز خفيف عند المرور على المحافظ */
.payment-summary-card .digital-wallet-logo:hover,
.payment-summary-card .apple-pay-open:hover,
.payment-summary-card .samsung-pay-open:hover {
    transform: translateY(-4px) scale(1.015) !important;
    border-color: var(--site-primary, var(--primary-color)) !important;
    box-shadow: 0 18px 36px rgba(15, 23, 42, .16) !important;
}

/* لو فيه animation قديم على الشعارات نخففه حتى لا يكسر الحجم */
.payment-summary-card .site-payment-methods .site-payment-logo {
    animation: none !important;
}

/* =========================================================
   Apple Pay / Samsung Pay Modal
========================================================= */

.digital-pay-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;

    display: none !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 18px !important;
    background: rgba(15, 23, 42, .58) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

.digital-pay-overlay.show {
    display: flex !important;
}

.digital-pay-modal-box {
    position: relative !important;
    width: min(430px, 100%) !important;
    max-height: calc(100dvh - 36px) !important;
    overflow-y: auto !important;

    padding: 26px !important;
    border-radius: 26px !important;
    background: #fff !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .28) !important;

    direction: rtl !important;
    text-align: center !important;
}

.digital-pay-close {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;

    width: 36px !important;
    height: 36px !important;

    border: 0 !important;
    border-radius: 50% !important;
    background: #f2f4f7 !important;
    color: #475467 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;
    z-index: 5 !important;
}

.digital-pay-icon {
    width: 155px !important;
    height: 76px !important;
    margin: 0 auto 16px !important;
    padding: 12px 18px !important;

    border-radius: 22px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .10) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.digital-pay-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

.digital-pay-header h4 {
    margin: 0 0 8px !important;
    color: #111827 !important;
    font-size: 23px !important;
    font-weight: 1000 !important;
}

.digital-pay-header p {
    margin: 0 auto 18px !important;
    max-width: 340px !important;
    color: #667085 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.8 !important;
}

.digital-pay-input {
    width: 100% !important;
    height: 48px !important;

    border-radius: 16px !important;
    border: 1px solid #dce8ee !important;
    background: #fff !important;

    color: #111827 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    text-align: center !important;

    outline: none !important;
    margin-bottom: 8px !important;
}

.digital-pay-input:focus {
    border-color: var(--site-primary, var(--primary-color)) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--site-primary, var(--primary-color)) 10%, transparent) !important;
}

.digital-pay-error {
    min-height: 20px !important;
    margin-bottom: 8px !important;
    color: #dc2626 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.digital-pay-submit {
    width: 100% !important;
    min-height: 48px !important;

    border: 0 !important;
    border-radius: 16px !important;

    background: var(--site-gradient,
            linear-gradient(135deg, var(--site-primary, var(--primary-color)), var(--site-secondary, var(--secondary-color)))) !important;

    color: #fff !important;
    font-size: 14px !important;
    font-weight: 1000 !important;

    cursor: pointer !important;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--site-primary, var(--primary-color)) 20%, transparent) !important;
}

.digital-pay-submit:disabled {
    opacity: .75 !important;
    cursor: not-allowed !important;
}

.digital-pay-moyasar-box {
    margin-top: 16px !important;
}

/* =========================================================
   Tablet
========================================================= */

@media (max-width: 991.98px) {

    .payment-summary-card .site-payment-methods,
    .payment-summary-card .payment-methods-lg {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .payment-summary-card .site-payment-logo {
        height: 44px !important;
    }

    .payment-summary-card .logo-apple,
    .payment-summary-card .logo-samsung,
    .payment-summary-card .digital-wallet-logo,
    .payment-summary-card .apple-pay-open,
    .payment-summary-card .samsung-pay-open {
        grid-column: span 2 !important;
        height: 54px !important;
        min-height: 54px !important;
    }

    .payment-summary-card .logo-apple img,
    .payment-summary-card .logo-samsung img,
    .payment-summary-card .digital-wallet-logo img,
    .payment-summary-card .apple-pay-open img,
    .payment-summary-card .samsung-pay-open img {
        max-height: 33px !important;
        height: 33px !important;
    }
}

/* =========================================================
   Mobile
   Apple + Samsung full width
========================================================= */

@media (max-width: 575.98px) {

    .payment-summary-card .site-payment-methods,
    .payment-summary-card .payment-methods-lg {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .payment-summary-card .site-payment-logo {
        height: 42px !important;
        border-radius: 12px !important;
        padding: 7px 9px !important;
    }

    .payment-summary-card .site-payment-logo img {
        max-height: 24px !important;
        height: 24px !important;
    }

    .payment-summary-card .logo-apple,
    .payment-summary-card .logo-samsung,
    .payment-summary-card .digital-wallet-logo,
    .payment-summary-card .apple-pay-open,
    .payment-summary-card .samsung-pay-open {
        grid-column: 1 / -1 !important;
        height: 52px !important;
        min-height: 52px !important;
        padding: 9px 16px !important;
        border-radius: 14px !important;
    }

    .payment-summary-card .logo-apple img,
    .payment-summary-card .logo-samsung img,
    .payment-summary-card .digital-wallet-logo img,
    .payment-summary-card .apple-pay-open img,
    .payment-summary-card .samsung-pay-open img {
        max-height: 31px !important;
        height: 31px !important;
    }

    .digital-pay-modal-box {
        padding: 22px 16px !important;
        border-radius: 22px !important;
    }

    .digital-pay-icon {
        width: 138px !important;
        height: 66px !important;
    }

    .digital-pay-header h4 {
        font-size: 19px !important;
    }
}

/* =========================================================
   Global PDF Viewer Styles
   يستخدم لصفحة ملفات الحوكمة + صفحة العناوين الفرعية
========================================================= */


/* =========================================================
   PDF Full View Page
========================================================= */

.pdf-view-page {
    position: relative;
    padding: 42px 0 76px;
    background:
        radial-gradient(circle at 12% 12%,
            color-mix(in srgb, var(--site-primary, var(--primary-color)) 5%, transparent),
            transparent 34%),
        radial-gradient(circle at 88% 90%,
            color-mix(in srgb, var(--site-secondary, var(--secondary-color)) 5%, transparent),
            transparent 32%),
        linear-gradient(180deg, #f8fbfc 0%, #ffffff 52%, #f8fbfc 100%);
    overflow: hidden;
}

.pdf-view-page .container {
    position: relative;
    z-index: 2;
}

.pdf-view-card {
    width: min(100%, 920px);
    margin: 0 auto;
    border-radius: 26px;
    background: rgba(255, 255, 255, .97);
    border: 1px solid color-mix(in srgb, var(--site-primary, var(--primary-color)) 10%, #e7eef3);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .075);
    overflow: hidden;
}

.pdf-view-header {
    padding: 18px 22px;
    border-bottom: 1px solid #edf2f5;
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--site-primary, var(--primary-color)) 7%, #ffffff),
            #ffffff);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.pdf-title-wrap {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pdf-title-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 16px;
    background: var(--site-gradient,
        linear-gradient(135deg,
            var(--site-primary, var(--primary-color)),
            var(--site-secondary, var(--secondary-color))));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--site-primary, var(--primary-color)) 22%, transparent);
}

.pdf-title-icon i {
    color: #fff !important;
    font-size: 19px;
}

.pdf-view-title {
    margin: 0;
    color: var(--site-text, #111827);
    font-size: 20px;
    font-weight: 1000;
    line-height: 1.6;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pdf-view-subtitle {
    margin: 3px 0 0;
    color: #667085;
    font-size: 13px;
    font-weight: 700;
}

.pdf-view-body {
    padding: 18px;
}


/* =========================================================
   Sub Page Content
========================================================= */

.subpage-content-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    padding: 40px;
    margin-bottom: 50px;
    border: 1px solid #f0f0f0;
}

.subpage-content-card:has(.pdf-preview-wrapper),
.subpage-content-card:has(.pdf-viewer-shell) {
    width: min(100%, 920px);
    margin-inline: auto;
}

.subpage-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--site-primary, var(--primary-color));
    margin-bottom: 10px;
}

.subpage-body {
    font-size: 18px;
    line-height: 2;
    color: #444;
    text-align: justify;
}

.subpage-body h1,
.subpage-body h2,
.subpage-body h3 {
    color: var(--site-primary, var(--primary-color));
    margin-top: 20px;
    margin-bottom: 15px;
}

.subpage-body img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 10px;
    margin: 20px 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.subpage-body ul {
    list-style-position: inside;
    margin-bottom: 20px;
}


/* =========================================================
   Shared PDF Viewer Shell
========================================================= */

.pdf-preview-wrapper,
.pdf-viewer-shell,
.flipbook-shell {
    position: relative;
    width: 100%;
    height: 72vh;
    min-height: 620px;
    max-height: 780px;
    background: #f8fafc !important;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.08);
}

/* حاويات dFlip القديمة والجديدة */
.js-flipbook-container,
#flipbookContainer {
    width: 100% !important;
    height: 100% !important;
    background: #f8fafc !important;
}

/* iframe موجود احتياطيًا فقط */
.pdf-native-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: none;
    background: #fff;
}


/* =========================================================
   dFlip Background + Spacing Fix
========================================================= */

.pdf-viewer-shell .df-container,
.pdf-viewer-shell .df-ui-wrapper,
.pdf-viewer-shell .df-book-wrapper,
.pdf-viewer-shell .df-book-stage,
.pdf-viewer-shell .df-book,
.flipbook-shell .df-container,
.flipbook-shell .df-ui-wrapper,
.flipbook-shell .df-book-wrapper,
.flipbook-shell .df-book-stage,
.flipbook-shell .df-book {
    background: #f8fafc !important;
}

/* تقليل الفراغات حول صفحة PDF */
.pdf-viewer-shell .df-book-wrapper,
.flipbook-shell .df-book-wrapper {
    padding: 0 !important;
}

.pdf-viewer-shell .df-book-stage,
.flipbook-shell .df-book-stage {
    padding: 0 !important;
}

/* تحسين مظهر صفحة PDF */
.pdf-viewer-shell .df-page,
.flipbook-shell .df-page {
    box-shadow: 0 10px 26px rgba(15, 23, 42, .14) !important;
}

/* أزرار التحكم */
.pdf-viewer-shell .df-ui-controls,
.flipbook-shell .df-ui-controls {
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}


/* =========================================================
   Loading / Error
========================================================= */

.pdf-loading-box,
.pdf-error-box {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    background: #f8fafc;
    color: var(--site-text, #111827);
}

.pdf-loading-inner,
.pdf-error-inner {
    width: min(100%, 420px);
    padding: 26px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
}

.pdf-loading-spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto 14px;
    border-radius: 50%;
    border: 4px solid #e5e7eb;
    border-top-color: var(--site-primary, var(--primary-color));
    animation: pdfSpin 1s linear infinite;
}

@keyframes pdfSpin {
    to {
        transform: rotate(360deg);
    }
}

.pdf-loading-inner h5,
.pdf-error-inner h5 {
    margin-bottom: 8px;
    color: var(--site-text, #111827);
    font-size: 17px;
    font-weight: 1000;
}

.pdf-loading-inner p,
.pdf-error-inner p {
    margin-bottom: 0;
    color: #667085;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.8;
}

.pdf-error-inner i {
    margin-bottom: 12px;
    color: #fb7185;
    font-size: 34px;
}

.pdf-viewer-shell.is-loaded .pdf-loading-box,
.flipbook-shell.is-loaded .pdf-loading-box {
    display: none !important;
}


/* =========================================================
   PDF Actions
========================================================= */

.pdf-actions {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.pdf-action-btn,
.pdf-actions .btn {
    min-height: 38px;
    padding: 8px 22px;
    border-radius: 999px !important;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all .22s ease;
    white-space: nowrap;
}

.pdf-download-btn,
.pdf-actions .btn-primary {
    color: #fff !important;
    background: var(--site-primary, var(--primary-color)) !important;
    border: 1px solid var(--site-primary, var(--primary-color)) !important;
}

.pdf-download-btn:hover,
.pdf-actions .btn-primary:hover {
    color: #fff !important;
    background: var(--site-secondary, var(--secondary-color)) !important;
    border-color: var(--site-secondary, var(--secondary-color)) !important;
    transform: translateY(-2px);
}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 991.98px) {
    .pdf-view-page {
        padding: 30px 0 112px;
    }

    .pdf-view-page .container {
        width: calc(100% - 44px);
        max-width: 100%;
        padding-inline: 0;
    }

    .pdf-view-card {
        width: min(100%, 760px);
        border-radius: 24px;
    }

    .pdf-view-header {
        padding: 16px;
    }

    .pdf-view-title {
        font-size: 18px;
    }

    .pdf-view-body {
        padding: 16px;
    }

    .subpage-content-card {
        padding: 18px !important;
    }

    .subpage-content-card:has(.pdf-preview-wrapper),
    .subpage-content-card:has(.pdf-viewer-shell) {
        width: min(100%, 760px);
    }

    .pdf-preview-wrapper,
    .pdf-viewer-shell,
    .flipbook-shell {
        height: 66vh;
        min-height: 540px;
        max-height: 700px;
        border-radius: 16px;
    }

    .pdf-viewer-shell .df-book-wrapper,
    .flipbook-shell .df-book-wrapper {
        padding: 0 !important;
    }

    .pdf-viewer-shell .df-book-stage,
    .flipbook-shell .df-book-stage {
        padding: 0 !important;
    }
}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 575.98px) {
    .pdf-view-page {
        padding: 22px 0 105px;
    }

    .pdf-view-page .container {
        width: calc(100% - 24px);
        padding-inline: 0;
    }

    .pdf-view-card {
        width: 100%;
        border-radius: 20px;
        box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
    }

    .pdf-view-header {
        flex-direction: column;
        align-items: stretch;
        padding: 14px;
        gap: 13px;
    }

    .pdf-title-wrap {
        gap: 10px;
    }

    .pdf-title-icon {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
        border-radius: 13px;
    }

    .pdf-title-icon i {
        font-size: 16px;
    }

    .pdf-view-title {
        font-size: 14.5px;
        line-height: 1.55;
    }

    .pdf-view-subtitle {
        font-size: 11.5px;
    }

    .pdf-actions {
        width: 100%;
        justify-content: center;
    }

    .pdf-action-btn,
    .pdf-actions .btn {
        width: auto;
        min-width: 150px;
        padding: 10px 18px;
        font-size: 11.5px;
    }

    .pdf-view-body {
        padding: 10px;
    }

    .subpage-content-card {
        padding: 12px !important;
        border-radius: 16px;
        margin-bottom: 90px;
    }

    .subpage-content-card:has(.pdf-preview-wrapper),
    .subpage-content-card:has(.pdf-viewer-shell) {
        width: 100%;
    }

    .pdf-preview-wrapper,
    .pdf-viewer-shell,
    .flipbook-shell {
        height: 64vh;
        min-height: 420px;
        max-height: 520px;
        border-radius: 14px;
    }

    .pdf-viewer-shell .df-book-wrapper,
    .flipbook-shell .df-book-wrapper {
        padding: 0 !important;
    }

    .pdf-viewer-shell .df-book-stage,
    .flipbook-shell .df-book-stage {
        padding: 0 !important;
    }

    .pdf-viewer-shell .df-ui-controls,
    .flipbook-shell .df-ui-controls {
        transform: scale(.86) !important;
        transform-origin: center bottom !important;
    }

    .pdf-loading-inner,
    .pdf-error-inner {
        padding: 20px 16px;
        border-radius: 18px;
    }

    .pdf-loading-inner h5,
    .pdf-error-inner h5 {
        font-size: 14px;
    }

    .pdf-loading-inner p,
    .pdf-error-inner p {
        font-size: 11.5px;
    }
}


/* =========================================================
   Small Mobile
========================================================= */

@media (max-width: 390px) {
    .pdf-view-page .container {
        width: calc(100% - 20px);
    }

    .pdf-preview-wrapper,
    .pdf-viewer-shell,
    .flipbook-shell {
        height: 62vh;
        min-height: 390px;
    }

    .pdf-view-title {
        font-size: 13.5px;
    }

    .pdf-action-btn,
    .pdf-actions .btn {
        font-size: 10.8px;
    }
}


/* =========================================================
   Mobile Landscape
========================================================= */

@media (max-width: 767.98px) and (orientation: landscape) {
    .pdf-preview-wrapper,
    .pdf-viewer-shell,
    .flipbook-shell {
        height: 78vh;
        min-height: 320px;
        max-height: 430px;
    }
}

/* =========================================================
   Sub Pages Cards List
   Images Ratio: 800x500 - 16:10
========================================================= */

.sub-pages-list-page {
    background: #ffffff;
    min-height: 70vh;
}

.sub-pages-list-section {
    padding: 45px 0 65px;
}

.sub-pages-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.sub-page-card-link {
    display: block;
    height: 100%;
    color: inherit !important;
    text-decoration: none !important;
}

.sub-page-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--site-primary, #006b4f) 12%, #e5e7eb);
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.08);
    transition: transform 0.3s ease,
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}

.sub-page-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--site-primary, #006b4f) 8%, transparent),
        color-mix(in srgb, var(--site-secondary, #c9a227) 7%, transparent)
    );
    transition: opacity 0.3s ease;
}

.sub-page-card-link:hover .sub-page-card {
    transform: translateY(-7px);
    border-color: color-mix(in srgb, var(--site-primary, #006b4f) 35%, #e5e7eb);
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.14);
}

.sub-page-card-link:hover .sub-page-card::before {
    opacity: 1;
}

/* صورة الكارد - ثابتة 16:10 مثل 800x500 */
.sub-page-img-box {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    padding: 0;
    background: #f8fafc;
    border-radius: 24px 24px 0 0;
}

.sub-page-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.35s ease;
}

.sub-page-card-link:hover .sub-page-img {
    transform: scale(1.045);
}

.sub-page-card-body {
    position: relative;
    z-index: 1;
    flex: 1;
    padding: 18px 18px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sub-page-title {
    margin: 0;
    color: var(--site-primary, #006b4f);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.7;
    text-align: center;
}

.sub-page-card-footer {
    position: relative;
    z-index: 1;
    padding: 15px 18px 20px;
    border-top: 1px dashed color-mix(in srgb, var(--site-primary, #006b4f) 22%, #e5e7eb);
}

.sub-page-more-btn {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    background: linear-gradient(
        135deg,
        var(--site-primary, #006b4f),
        var(--site-secondary, #c9a227)
    );
    box-shadow: 0 10px 22px color-mix(in srgb, var(--site-primary, #006b4f) 22%, transparent);
    transition: box-shadow 0.3s ease;
}

.sub-page-more-btn i {
    font-size: 13px;
    transition: transform 0.3s ease;
}

.sub-page-card-link:hover .sub-page-more-btn {
    box-shadow: 0 14px 28px color-mix(in srgb, var(--site-primary, #006b4f) 30%, transparent);
}

.sub-page-card-link:hover .sub-page-more-btn i {
    transform: translateX(-4px);
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width: 1199.98px) {
    .sub-pages-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (max-width: 991.98px) {
    .sub-pages-list-section {
        padding: 38px 0 55px;
    }

    .sub-pages-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .sub-page-title {
        font-size: 18px;
    }

    .sub-page-card-body {
        padding: 16px 16px 12px;
    }

    .sub-page-card-footer {
        padding: 14px 16px 18px;
    }
}

@media (max-width: 575.98px) {
    .sub-pages-list-section {
        padding: 28px 0 42px;
    }

    .sub-pages-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .sub-page-card {
        border-radius: 20px;
    }

    .sub-page-img-box {
        border-radius: 20px 20px 0 0;
    }

    .sub-page-card-body {
        padding: 15px 15px 11px;
    }

    .sub-page-title {
        font-size: 17px;
        line-height: 1.6;
    }

    .sub-page-card-footer {
        padding: 13px 15px 17px;
    }

    .sub-page-more-btn {
        min-height: 42px;
        font-size: 14px;
    }
}

/* =========================================================
   Beneficiary Form Page - Final Dynamic Design
========================================================= */

.beneficiary-form-page {
    background:
        var(--site-radial-soft),
        var(--site-gradient-soft);
    min-height: 75vh;
    padding-bottom: 70px;
}

.beneficiary-form-page > .container.mt-4.mb-5 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 42px;
    padding-bottom: 60px;
}

.beneficiary-form-page .bg-100 {
    background: transparent !important;
    padding: 0 !important;
}

.beneficiary-form-page .bg-100 > .container {
    max-width: 1180px;
}

/* =========================================================
   Main Card
========================================================= */

.beneficiary-form-page .card.rounded-0 {
    position: relative;
    overflow: hidden;
    border-radius: 28px !important;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--site-primary) 13%, #e5e7eb) !important;
    box-shadow: 0 22px 60px color-mix(in srgb, var(--site-primary) 10%, transparent);
}

.beneficiary-form-page .card.rounded-0::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 100%;
    height: 7px;
    background: var(--site-gradient) !important;
    z-index: 2;
}

.beneficiary-form-page .card.rounded-0 .card-body {
    padding: 34px 30px 30px !important;
}

/* =========================================================
   Form Header
========================================================= */

.beneficiary-form-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 30px;
    padding: 18px 20px;
    border-radius: 20px;
    background: linear-gradient(
        135deg,
        var(--site-primary-soft),
        var(--site-secondary-soft)
    ) !important;
    border: 1px solid color-mix(in srgb, var(--site-primary) 14%, #e5e7eb) !important;
}

.beneficiary-form-head-icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--site-gradient) !important;
    color: #ffffff;
    font-size: 22px;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--site-primary) 24%, transparent) !important;
}

.beneficiary-form-head-content h3 {
    margin: 0 0 5px;
    color: var(--site-primary) !important;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.4;
}

.beneficiary-form-head-content p {
    margin: 0;
    color: var(--site-muted) !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.8;
}

/* =========================================================
   Grid / Rows
========================================================= */

.beneficiary-form-page form .row {
    margin-left: -10px;
    margin-right: -10px;
}

.beneficiary-form-page form .col-md-4 {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 22px !important;
}

/* =========================================================
   Labels Alignment
========================================================= */

.beneficiary-form-page .form-group {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.beneficiary-form-page .form-group label {
    min-height: 50px;
    display: flex !important;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 5px;
    margin-bottom: 8px !important;
    padding: 0 2px;
    color: var(--site-text) !important;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
    text-align: right;
}

.beneficiary-form-page .form-group label .label-text {
    display: inline;
}

/* النجمة الحمراء */
.beneficiary-form-page .required-star {
    color: var(--site-danger, #ef4444) !important;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
}

/* =========================================================
   Inputs / Fields
========================================================= */

.beneficiary-form-page .form-control,
.beneficiary-form-page select.form-control {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 10px 14px;
    border-radius: 15px !important;
    border: 1px solid color-mix(in srgb, var(--site-primary) 16%, #d9e5e1) !important;
    background-color: #ffffff !important;
    color: var(--site-text) !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    outline: none !important;
    box-shadow: none !important;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}

.beneficiary-form-page .form-control::placeholder {
    color: color-mix(in srgb, var(--site-muted) 75%, #ffffff);
}

.beneficiary-form-page .form-control:hover,
.beneficiary-form-page select.form-control:hover {
    border-color: color-mix(in srgb, var(--site-primary) 42%, #d9e5e1) !important;
    background-color: #ffffff !important;
}

.beneficiary-form-page .form-control:focus,
.beneficiary-form-page select.form-control:focus {
    border-color: var(--site-primary) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--site-primary) 12%, transparent) !important;
}

/* =========================================================
   Select Dropdown - Custom Arrow
========================================================= */

.beneficiary-form-page .beneficiary-select-wrap {
    position: relative;
    width: 100%;
}

.beneficiary-form-page .beneficiary-select-wrap::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 44px;
    height: 48px;
    border-radius: 15px 0 0 15px;
    background: color-mix(in srgb, var(--site-primary) 10%, #ffffff);
    border-right: 1px solid color-mix(in srgb, var(--site-primary) 12%, #ffffff);
    pointer-events: none;
    z-index: 2;
}

.beneficiary-form-page .beneficiary-select-wrap::after {
    content: "";
    position: absolute;
    left: 17px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-left: 2px solid var(--site-primary);
    border-bottom: 2px solid var(--site-primary);
    transform: translateY(-65%) rotate(-45deg);
    pointer-events: none;
    z-index: 3;
    transition: transform 0.25s ease;
}

.beneficiary-form-page .beneficiary-select-wrap:hover::before,
.beneficiary-form-page .beneficiary-select-wrap:focus-within::before {
    background: color-mix(in srgb, var(--site-primary) 14%, #ffffff);
}

.beneficiary-form-page .beneficiary-select-wrap:focus-within::after {
    transform: translateY(-45%) rotate(135deg);
}

.beneficiary-form-page select.form-control.beneficiary-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;

    padding-right: 14px !important;
    padding-left: 54px !important;

    border-radius: 15px !important;
    border: 1px solid color-mix(in srgb, var(--site-primary) 16%, #d9e5e1) !important;
    background-color: #ffffff !important;
    background-image: none !important;

    color: var(--site-text) !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none !important;
    outline: none !important;
}

.beneficiary-form-page select.form-control.beneficiary-select:hover {
    border-color: color-mix(in srgb, var(--site-primary) 42%, #d9e5e1) !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

.beneficiary-form-page select.form-control.beneficiary-select:focus {
    border-color: var(--site-primary) !important;
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--site-primary) 12%, transparent) !important;
}

.beneficiary-form-page select.form-control.beneficiary-select option {
    color: var(--site-text);
    background: #ffffff;
    font-weight: 600;
}

/* =========================================================
   File Inputs
========================================================= */

.beneficiary-form-page input[type="file"].form-control {
    height: 48px !important;
    min-height: 48px !important;
    padding: 7px 10px !important;
    line-height: 31px !important;
    cursor: pointer;
    color: var(--site-muted) !important;
    background-color: #ffffff !important;
}

.beneficiary-form-page input[type="file"].form-control::file-selector-button {
    height: 32px;
    margin-left: 10px;
    padding: 5px 14px;
    border: 0;
    border-radius: 10px;
    color: #ffffff;
    background: var(--site-gradient) !important;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
}

/* =========================================================
   Submit Button
========================================================= */

.beneficiary-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.beneficiary-form-page button[type="submit"].btn.btn-primary {
    min-width: 185px;
    height: 50px;
    padding: 10px 34px;
    border: 0 !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    background: var(--site-gradient) !important;
    font-size: 15.5px;
    font-weight: 900;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--site-primary) 25%, transparent) !important;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
}

.beneficiary-form-page button[type="submit"].btn.btn-primary:hover {
    transform: translateY(-3px);
    filter: brightness(1.03);
    box-shadow: 0 18px 34px color-mix(in srgb, var(--site-primary) 34%, transparent) !important;
}

.beneficiary-form-page button[type="submit"].btn.btn-primary:active {
    transform: translateY(0);
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width: 991.98px) {
    .beneficiary-form-page .card.rounded-0 .card-body {
        padding: 28px 24px 26px !important;
    }

    .beneficiary-form-head {
        padding: 16px 18px;
    }

    .beneficiary-form-page .form-group label {
        min-height: 46px;
    }
}

@media (max-width: 767.98px) {
    .beneficiary-form-page > .container.mt-4.mb-5 {
        padding-top: 30px;
        padding-bottom: 45px;
    }

    .beneficiary-form-page .card.rounded-0 {
        border-radius: 22px !important;
    }

    .beneficiary-form-page .card.rounded-0 .card-body {
        padding: 24px 18px 22px !important;
    }

    .beneficiary-form-page form .row {
        margin-left: 0;
        margin-right: 0;
    }

    .beneficiary-form-page form .col-md-4 {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 17px !important;
    }

    .beneficiary-form-page .form-group label {
        min-height: auto;
        align-items: center;
        font-size: 13.5px;
    }

    .beneficiary-form-head {
        flex-direction: column;
        align-items: flex-start;
        text-align: right;
    }

    .beneficiary-form-head-icon {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        font-size: 20px;
    }

    .beneficiary-form-actions {
        justify-content: stretch;
    }

    .beneficiary-form-page button[type="submit"].btn.btn-primary {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .beneficiary-form-page {
        padding-bottom: 40px;
    }

    .beneficiary-form-page > .container.mt-4.mb-5 {
        padding-left: 14px;
        padding-right: 14px;
    }

    .beneficiary-form-head-content h3 {
        font-size: 21px;
    }

    .beneficiary-form-head-content p {
        font-size: 13px;
    }

    .beneficiary-form-page .form-group label {
        font-size: 13px;
    }

    .beneficiary-form-page .form-control,
    .beneficiary-form-page select.form-control,
    .beneficiary-form-page input[type="file"].form-control {
        height: 48px !important;
        min-height: 48px !important;
        border-radius: 14px !important;
    }

    .beneficiary-form-page .beneficiary-select-wrap::before {
        width: 42px;
        border-radius: 14px 0 0 14px;
    }

    .beneficiary-form-page .beneficiary-select-wrap::after {
        left: 16px;
    }

    .beneficiary-form-page select.form-control.beneficiary-select {
        padding-left: 52px !important;
        border-radius: 14px !important;
    }
}
/* =========================================================
   Dynamic Theme Images From Admin
   صور الثيمات من لوحة التحكم
========================================================= */

.hero-section,
.projects-section,
.stats-section,
.partners-section,
.video-section {
    position: relative !important;
    overflow: hidden;
}

.hero-section .container,
.projects-section .container,
.stats-section .container,
.partners-section .container,
.video-section .container {
    position: relative;
    z-index: 10;
}

.hero-section::after,
.projects-section::after,
.stats-section::after,
.partners-section::after,
.video-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    opacity: 0;
}

/* السلايدر */
body.theme-ramadan .hero-section::after,
body.theme-eid_fitr .hero-section::after,
body.theme-eid_adha .hero-section::after,
body.theme-national .hero-section::after {
    background-image: var(--theme-hero-image) !important;
    opacity: 1;
}

/* المشاريع */
body.theme-ramadan .projects-section::after,
body.theme-eid_fitr .projects-section::after,
body.theme-eid_adha .projects-section::after,
body.theme-national .projects-section::after {
    background-image: var(--theme-projects-image) !important;
    opacity: 1;
}

/* الإنجازات */
body.theme-ramadan .stats-section::after,
body.theme-eid_fitr .stats-section::after,
body.theme-eid_adha .stats-section::after,
body.theme-national .stats-section::after {
    background-image: var(--theme-stats-image) !important;
    opacity: 1;
}

/* الشركاء */
body.theme-ramadan .partners-section::after,
body.theme-eid_fitr .partners-section::after,
body.theme-eid_adha .partners-section::after,
body.theme-national .partners-section::after {
    background-image: var(--theme-partners-image) !important;
    opacity: 1;
}

/* المكتبة المرئية */
body.theme-ramadan .video-section::after,
body.theme-eid_fitr .video-section::after,
body.theme-eid_adha .video-section::after,
body.theme-national .video-section::after {
    background-image: var(--theme-video-image) !important;
    opacity: 1;
}