/**
 * donations-store-layout.css
 * ------------------------------------------------------------
 * طبقة هيكل متجر التبرعات — ثابتة ولا تتبدل مع الثيم.
 * تحتوي فقط على: الشبكة، الأعمدة، الشريط الجانبي، التنبيهات، الاستقرار.
 * الألوان/الخطوط/الزخرفة تبقى في ملفات الثيم و --ds-store-*.
 * لا يمس متغيرات أو مواضع بطاقات الإهداء (gift_overlay).
 * ------------------------------------------------------------
 */

/* غلاف الصفحات */
.donations-page.ds-store,
.content-wrapper.donations-page,
.donations-page {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.donations-page *,
.donations-page *::before,
.donations-page *::after {
    box-sizing: border-box;
}

/* شبكة Bootstrap داخل المتجر — محمية من ثيمات خارجية */
.donations-page .container,
.donations-page .container-fluid {
    width: 100%;
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: 12px;
}

@media (min-width: 1200px) {
    .donations-page .container,
    .donations-page .container-fluid {
        max-width: 1140px;
    }
}

.donations-page .row {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    margin-inline: -12px;
}

.donations-page .row > [class*="col-"] {
    position: relative;
    width: 100%;
    padding-inline: 12px;
    max-width: 100%;
}

.donations-page .col-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

@media (min-width: 992px) {
    .donations-page .col-lg-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }

    .donations-page .col-lg-5 {
        flex: 0 0 41.666667% !important;
        max-width: 41.666667% !important;
        width: 41.666667% !important;
    }

    .donations-page .col-lg-7 {
        flex: 0 0 58.333333% !important;
        max-width: 58.333333% !important;
        width: 58.333333% !important;
    }

    .donations-page .col-lg-8 {
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
        width: 66.666667% !important;
    }

    .donations-page .col-lg-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}

@media (min-width: 1200px) {
    .donations-page .col-xl-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }

    .donations-page .col-xl-8 {
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
        width: 66.666667% !important;
    }
}

/* الشريط الجانبي — ثبات الموقع على الشاشات الكبيرة */
.donations-page .donations-sidebar {
    display: block;
    width: 100%;
    position: sticky;
    top: 88px;
    z-index: 2;
    align-self: flex-start;
}

@media (max-width: 1199.98px) {
    .donations-page .donations-sidebar {
        position: static;
        top: auto;
        margin-top: 1rem;
    }
}

.donations-page .sidebar-card {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
}

/* شبكة بطاقات الحملات */
.donations-page .row-cols-1 > * {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

@media (min-width: 768px) {
    .donations-page .row-cols-md-2 > * {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    .donations-page .row-cols-md-3 > * {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }
}

@media (min-width: 992px) {
    .donations-page .row-cols-lg-3 > * {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }

    .donations-page .row-cols-lg-2 > * {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}

@media (min-width: 1200px) {
    .donations-page .row-cols-xl-3 > * {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }

    .donations-page .row-cols-xl-4 > * {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
}

/* التنبيهات ورسائل النجاح — استقرار العرض */
.donations-page .alert {
    display: block;
    width: 100%;
    position: relative;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.75rem;
}

.donations-page .alert-success,
.donations-toast .alert-success {
    /* الهيكل فقط؛ اللون من الثيم إن وُجد */
}

.donations-toast {
    position: fixed !important;
    top: 20px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1080 !important;
    width: 100%;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.donations-toast > * {
    pointer-events: auto;
    max-width: min(520px, calc(100% - 24px));
}

/* أزرار وإدخالات — ثبات الحجم لا اللون */
.donations-page .btn,
.donations-page .form-control,
.donations-page .form-select {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
}

.donations-page .btn {
    justify-content: center;
    gap: 0.35rem;
}

.donations-page .d-grid > .btn,
.donations-page .d-grid > a.btn {
    width: 100%;
}

.donations-page .form-control,
.donations-page .form-select {
    width: 100%;
}

/* خيارات المبالغ — شبكة ثابتة */
.donations-page .campaign-card-amounts,
.donations-page .suggested-amounts,
.donations-page [data-amount-options] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.donations-page .campaign-card-amounts .btn,
.donations-page .suggested-amounts .btn {
    flex: 1 1 auto;
    min-width: 4.5rem;
}

/* أزرار المبالغ — منع قص الإطار وتداخل الظلال بين الخيارات */
.donations-page .campaign-card-scroll {
    overflow-x: auto;
    overflow-y: visible;
    padding-top: 8px !important;
    padding-bottom: 10px !important;
    padding-inline: 4px !important;
    margin-top: 0;
    gap: 0.55rem !important;
    isolation: isolate;
}

.donations-page .scroll-pill,
.donations-page .amount-box {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    box-shadow: none !important;
    filter: none !important;
    outline: none !important;
}

.donations-page .scroll-pill:hover,
.donations-page .scroll-pill.active,
.donations-page .scroll-pill:focus-visible,
.donations-page .amount-box:hover,
.donations-page .amount-box.active,
.donations-page .amount-box:focus-visible {
    transform: none !important;
    translate: none !important;
    box-shadow: none !important;
    filter: none !important;
    z-index: 1;
}

/* بطاقة الضيف عند الدفع بالجوال */
.donations-page .ds-store-guest-panel {
    display: block;
    width: 100%;
    margin-bottom: 1.25rem;
}

.donations-page .ds-store-guest-panel .form-label {
    display: block;
    margin-bottom: 0.35rem;
}

/* ============================================================
   شبكة تصفية الحملات — هيكل ثابت
   الجوال: البحث ونوع الحملة أسفل بعض
   الشاشات المتوسطة/الكبيرة: صف واحد
   ============================================================ */
.donations-page .ds-store-filters-shell {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: flex-end !important;
}

.donations-page .ds-store-filters-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    width: 100%;
    margin-inline: -8px !important;
}

.donations-page .ds-store-filters-grid > [class*="col-"] {
    padding-inline: 8px !important;
    margin-bottom: 0.5rem;
}

/* الجوال: كل حقل بعرض كامل وأسفل الآخر */
.donations-page .ds-store-filters-grid > .ds-store-filters-search,
.donations-page .ds-store-filters-grid > .ds-store-filters-type,
.donations-page .ds-store-filters-grid > .ds-store-filters-submit,
.donations-page .ds-store-filters-grid > .ds-store-filters-switch {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* من md: صف واحد — بحث + نوع (+ زر/مفتاح إن اتسع) */
@media (min-width: 768px) {
    .donations-page .ds-store-filters-grid > .ds-store-filters-search {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    .donations-page .ds-store-filters-grid > .ds-store-filters-type {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    .donations-page .ds-store-filters-grid > .ds-store-filters-submit,
    .donations-page .ds-store-filters-grid > .ds-store-filters-switch {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}

@media (min-width: 992px) {
    .donations-page .ds-store-filters-grid > .ds-store-filters-search {
        flex: 0 0 41.666667% !important;
        max-width: 41.666667% !important;
        width: 41.666667% !important;
    }

    .donations-page .ds-store-filters-grid > .ds-store-filters-type {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }

    .donations-page .ds-store-filters-grid > .ds-store-filters-submit {
        flex: 0 0 16.666667% !important;
        max-width: 16.666667% !important;
        width: 16.666667% !important;
    }

    .donations-page .ds-store-filters-grid > .ds-store-filters-switch {
        flex: 0 0 16.666667% !important;
        max-width: 16.666667% !important;
        width: 16.666667% !important;
    }
}

.donations-page .ds-store-filters-grid .form-label {
    display: block;
    margin-bottom: 0.35rem;
}

.donations-page .ds-store-filters-grid .form-control,
.donations-page .ds-store-filters-grid .form-select,
.donations-page .ds-store-filters-grid .btn {
    width: 100%;
}

/* ============================================================
   شبكة خيارات الدفع — هيكل ثابت (لا يتبدل مع الثيم)
   الجوال: عمود واحد كامل العرض
   الشاشات الأوسع: عمودان
   ============================================================ */
.donations-page .ds-store-payment-grid,
.donations-page #paymentForm > .row.g-3.mb-4 {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    margin-inline: -8px !important;
    width: calc(100% + 16px);
}

.donations-page .ds-store-payment-grid > [class*="col-"],
.donations-page #paymentForm > .row.g-3.mb-4 > [class*="col-"] {
    padding-inline: 8px !important;
    margin-bottom: 12px;
    display: flex;
}

/* شاشة الجوال واللوحي الصغير: خيار دفع واحد في كل صف */
.donations-page .ds-store-payment-grid > [class*="col-"],
.donations-page #paymentForm > .row.g-3.mb-4 > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* من md فما فوق: شبكتان جنب بعض */
@media (min-width: 768px) {
    .donations-page .ds-store-payment-grid > .col-md-6,
    .donations-page #paymentForm > .row.g-3.mb-4 > .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}

.donations-page .payment-method-card {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    position: relative;
}

.donations-page .payment-method-card .payment-card,
.donations-page .payment-method-card > .card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 120px;
}

.donations-page .payment-method-card .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}

.donations-page .payment-radio {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px;
    height: 1px;
}

/* لوحة تفاصيل الطريقة المختارة + أزرار المتابعة — عمود ثابت */
.donations-page #paymentFieldsContainer,
.donations-page .payment-fields {
    display: none;
    width: 100%;
}

.donations-page .payment-fields.active {
    display: block !important;
    width: 100% !important;
}

.donations-page #paymentForm .d-grid {
    display: grid !important;
    width: 100%;
    gap: 0.75rem;
}

.donations-page #paymentForm .d-grid > .btn,
.donations-page #paymentForm .d-grid > a.btn {
    width: 100% !important;
}

/* خيارات «قريباً»: تبقى ظاهرة ومقروءة في الهيكل (بدون اختفاء بسبب الثيم) */
.donations-page .payment-method-card.opacity-50,
.donations-page .payment-method-card--soon {
    opacity: 1 !important;
    pointer-events: none;
    cursor: not-allowed;
}

.donations-page .payment-method-card.opacity-50 > .card,
.donations-page .payment-method-card--soon > .card {
    opacity: 0.72;
    filter: none;
}

.donations-page .payment-method-card.opacity-50 h6,
.donations-page .payment-method-card.opacity-50 small,
.donations-page .payment-method-card.opacity-50 .bi,
.donations-page .payment-method-card--soon h6,
.donations-page .payment-method-card--soon small,
.donations-page .payment-method-card--soon .bi {
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit;
}

/* لا تلمس محرر/معاينة الإهداء */
.gift-overlay-canvas,
.gift-visual-overlay,
[data-gift-design-wrapper],
#giftOverlayCanvas,
#giftPreviewOverlay,
#donations-donate-giftPreviewOverlay,
#donations-campaign-giftPreviewOverlay {
    /* هذه الكتلة للتوثيق فقط — لا تُعاد كتابة مواضع النصوص هنا */
}