/*
 * لغة التصميم الموحّدة — PayCard
 * ------------------------------------------------------------------
 * ترفع العناصر التي يبني منها الموقع كله (البطاقة، الترويسة، الزر، الحقل،
 * الجدول) بدل تعديل كل صفحة على حدة، فتتبعها الصفحات الجديدة والقديمة معًا.
 *
 * الهوية كما هي: #312267 أساسيًا و #fec830 ذهبيًا. لا لون جديد — العمق كله
 * من التدرّج والظل ونصف القطر.
 *
 * للتراجع: احذف سطر تضمين هذا الملف من layouts/app.blade.php.
 */

:root {
    --pc-ink: #312267;
    --pc-ink-deep: #1c1240;
    --pc-gold: #fec830;
    --pc-line: rgba(49, 34, 103, .12);
    --pc-shadow: 0 1px 2px rgba(49, 34, 103, .05);
    --pc-shadow-lift: 0 16px 36px rgba(49, 34, 103, .14);
    --pc-radius: 16px;
}

/* ═══════════════════════════════ البطاقة ═══════════════════════════════ */

.card {
    border-radius: var(--pc-radius);
    border: 1px solid var(--pc-line);
    box-shadow: var(--pc-shadow);
}

/* البطاقة داخل بطاقة تبدو محشورة إن حملت نفس الظل. */
.card .card { box-shadow: none; }

.card-header {
    border-top-left-radius: var(--pc-radius) !important;
    border-top-right-radius: var(--pc-radius) !important;
    border-bottom: 1px solid var(--pc-line);
    font-weight: 700;
}

.card-header.bg-primary {
    border-bottom: 0;
    background:
        radial-gradient(80% 160% at 95% 0%, rgba(254, 200, 48, .2) 0%, transparent 62%),
        linear-gradient(150deg, var(--pc-ink) 0%, var(--pc-ink-deep) 100%) !important;
}

.card-footer {
    border-bottom-left-radius: var(--pc-radius) !important;
    border-bottom-right-radius: var(--pc-radius) !important;
    border-top: 1px solid var(--pc-line);
}

/* ════════════════════════════════ الأزرار ══════════════════════════════ */

.btn { border-radius: 10px; font-weight: 600; }
.btn-lg { border-radius: 12px; }

/*
 * عبر متغيّرات بوتستراب لا عبر `background`.
 *
 * كانت القاعدة `background: linear-gradient(...)` — وهي اختصار يصفّر
 * `background-color` إلى شفاف. ثم تأتي قاعدة اللمعة بعدها فتستبدل
 * `background-image`، فلا يبقى للزر لا تدرّج ولا لون: أبيض شفاف على صفحة
 * فاتحة. هذا ما جعل كل زر أساسي في الموقع يبدو أبيض.
 */
.btn-primary {
    --bs-btn-bg: #312267;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: #241a4d;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: #241a4d;
    --bs-btn-active-border-color: transparent;
}

/* حافة عليا فاتحة تجعل الزر مرفوعًا لا مطبوعًا. */
.btn-primary,
.btn-warning,
.btn-success,
.btn-danger {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 58%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        0 6px 16px rgba(49, 34, 103, .22);
}

.btn-warning { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 16px rgba(254, 200, 48, .3); }

/* الضغط يُنزل الزر: بلا هذا يبقى مرفوعًا وهو مضغوط. */
.btn-primary:active,
.btn-warning:active,
.btn-success:active,
.btn-danger:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .22), 0 2px 6px rgba(49, 34, 103, .18);
}

/* التركيز ذهبي: أوضح على البنفسجي من أزرق بوتستراب. */
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: rgba(254, 200, 48, .85);
    box-shadow: 0 0 0 .2rem rgba(254, 200, 48, .25);
}

/* ═══════════════════════ زر إضافة المنتج ═══════════════════════════════
 *
 * زر صغير داخل بطاقة بيضاء ضيّقة. التدرّج الداكن العام كان يبتلعه ويجعله
 * ثقيلًا وسط بطاقة خفيفة، فله تدرّجه الخاص: من لون الهوية نحو الذهبي.
 *
 * الذهبي يقع عند 250% — خارج الزر بكثير — عمدًا: عند 190% كان الطرف يصل
 * إلى #907461 فينزل تباين النص الأبيض إلى 4.32، تحت حد WCAG AA. الآن أغمق
 * طرف يظهر هو #7a6266 بتباين 5.5، والتدرّج ما زال محسوسًا.
 */
.product-button {
    background: linear-gradient(135deg, var(--pc-ink) 0%, var(--pc-ink) 38%, var(--pc-gold) 250%);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 55%),
        linear-gradient(135deg, var(--pc-ink) 0%, var(--pc-ink) 38%, var(--pc-gold) 250%);
    border: 0;
    color: #fff;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 14px rgba(49, 34, 103, .26);
    transition: filter .18s ease, transform .12s ease, box-shadow .18s ease;
}

.product-button:hover,
.product-button:focus {
    color: #fff;
    filter: brightness(1.08) saturate(1.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 10px 22px rgba(49, 34, 103, .3);
}

.product-button:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .25);
}

/* ═══════════════════════ زر إرسال الطلب ═══════════════════════════════
 *
 * آخر خطوة قبل حركة مال — إرسال طلب أو إضافة رصيد — فتأخذ أبرز شكل:
 * نفس تدرّج «أضف» لكن أوضح، لتُقرأ كخاتمة لا كخيار من عدّة.
 */
#submitOrder,
#submitDeposit,
#verifyBinancePay,
.btn-commit {
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 55%),
        linear-gradient(135deg, var(--pc-ink) 0%, var(--pc-ink) 30%, var(--pc-gold) 250%);
    border: 0;
    color: #fff;
    font-weight: 800;
    letter-spacing: .01em;
    padding-block: .7rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 10px 24px rgba(49, 34, 103, .3);
    transition: filter .18s ease, transform .12s ease, box-shadow .18s ease;
}

#submitOrder:hover, #submitOrder:focus,
#submitDeposit:hover, #submitDeposit:focus,
#verifyBinancePay:hover, #verifyBinancePay:focus,
.btn-commit:hover, .btn-commit:focus {
    color: #fff;
    filter: brightness(1.08) saturate(1.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36), 0 14px 30px rgba(49, 34, 103, .34);
}

#submitOrder:active,
#submitDeposit:active,
#verifyBinancePay:active,
.btn-commit:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 7px rgba(0, 0, 0, .26);
}

#submitOrder:disabled,
#submitDeposit:disabled,
#verifyBinancePay:disabled,
.btn-commit:disabled { filter: grayscale(.4) brightness(.95); box-shadow: none; }

/* ═══════════════════════ زر التفعيل (النجاح) ═══════════════════════════
 *
 * أخضر بوتستراب #2E8B57 مع نص أبيض يعطي تباين 4.25 — تحت حدّ WCAG AA
 * بقليل، فيصعب على من في بصره ضعف أو تحت ضوء الشمس. يُغمَّق قليلًا حتى
 * يبلغ الحد، والفارق لا تكاد تراه العين لكنه يقلب الرقم.
 */
.btn-success {
    --bs-btn-bg: #256f45;
    --bs-btn-border-color: #256f45;
    --bs-btn-hover-bg: #1e5b39;
    --bs-btn-hover-border-color: #1e5b39;
    --bs-btn-active-bg: #1e5b39;
    --bs-btn-active-border-color: #1e5b39;
}

/* ════════════════════════════════ الحقول ═══════════════════════════════ */

.form-control,
.form-select {
    border-radius: 10px;
    border-color: rgba(49, 34, 103, .18);
}

.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.input-group-text {
    background: rgba(49, 34, 103, .06);
    border-color: rgba(49, 34, 103, .18);
    color: var(--pc-ink);
    font-weight: 700;
}

/* ════════════════════════════════ الجداول ══════════════════════════════ */

.table > :not(caption) > * > * { padding-block: .7rem; }

.table > thead {
    font-size: .82rem;
    letter-spacing: .01em;
    color: #6c757d;
}

.table-hover > tbody > tr:hover > * { background-color: rgba(49, 34, 103, .04); }

/* ═══════════════════════════ التنبيهات والنوافذ ════════════════════════ */

.alert {
    border-radius: var(--pc-radius);
    border-width: 0;
    border-inline-start-width: 4px;
}

.badge { border-radius: 999px; font-weight: 700; padding-inline: .7em; }

.modal-content {
    border-radius: 20px;
    border: 0;
    box-shadow: 0 30px 70px rgba(28, 18, 64, .3);
}

/* ترويسة النافذة تحمل الهوية بدل شريط أبيض بلا ملامح. */
.modal-header {
    color: #fff;
    border-bottom: 0;
    border-start-start-radius: 20px;
    border-start-end-radius: 20px;
    padding: 1.15rem 1.35rem;
    background:
        radial-gradient(80% 170% at 95% 0%, rgba(254, 200, 48, .22) 0%, transparent 62%),
        linear-gradient(150deg, var(--pc-ink) 0%, var(--pc-ink-deep) 100%);
}

.modal-header .modal-title { font-weight: 700; font-size: 1.05rem; }

/*
 * زر الإغلاق أسود افتراضًا فيختفي على الترويسة الداكنة، فيُقلب إلى أبيض.
 *
 * لكن ليس `.btn-close-white`: بوتستراب يجعله أبيض بنفسه، وقلبُه مرة ثانية
 * يعيده أسود — وهذا ما أخفى زر إغلاق نافذة «تم الطلب بنجاح».
 */
.modal-header .btn-close:not(.btn-close-white) {
    filter: invert(1) grayscale(1) brightness(2);
}

.modal-header .btn-close { opacity: .8; }
.modal-header .btn-close:hover { opacity: 1; }

.modal-body { padding: 1.35rem; }
.modal-footer { border-top: 1px solid var(--pc-line); padding: 1rem 1.35rem; }

.dropdown-menu {
    border-radius: 14px;
    border-color: var(--pc-line);
    box-shadow: var(--pc-shadow-lift);
}

.nav-pills .nav-link { border-radius: 10px; font-weight: 600; }
.nav-tabs { border-bottom-color: var(--pc-line); }

.nav-tabs .nav-link.active {
    border-color: var(--pc-line) var(--pc-line) #fff;
    font-weight: 700;
    color: var(--pc-ink);
}

.list-group { border-radius: var(--pc-radius); }
.list-group-item { border-color: var(--pc-line); }

.pagination { --bs-pagination-border-radius: 10px; }
.page-link { border-radius: 10px; margin-inline: 2px; border-color: var(--pc-line); }

.progress { border-radius: 999px; background: rgba(49, 34, 103, .08); }

.progress-bar {
    background-image: linear-gradient(90deg, var(--pc-ink), rgba(49, 34, 103, .68));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}

hr { border-color: var(--pc-line); opacity: 1; }

/* ═══════════════════════════ العمق ثلاثي الأبعاد ═══════════════════════
 *
 * ما يعطي الأيقونة جسمًا ثلاثة أشياء معًا، وأيٌّ منها وحده لا يكفي:
 * تدرّج من فاتح أعلى إلى داكن أسفل (اتجاه الضوء)، وخط داخلي فاتح على
 * الحافة العليا (لمعة الحافة)، وظل خارجي أسفلها (ارتفاعها عن السطح).
 */

/*
 * الشرط [class*="bg-"] ليس زينة: بلا خلفية صلبة تحتها، تتحوّل الدائرة
 * الشفافة إلى بقعة بيضاء — وهذا ما حدث لدائرة أيقونة بطاقة الرصيد، فهي
 * دائرة محدَّدة بحدّ فاتح بلا خلفية عمدًا.
 */
.rounded-circle[class*="bg-"]:has(> i),
.rounded-circle[class*="bg-"]:has(> .fa-solid),
.rounded-circle[class*="bg-"]:has(> .fa-regular),
.pc-ic {
    background-image: linear-gradient(160deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 55%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .35),
        inset 0 -2px 6px rgba(0, 0, 0, .18),
        0 8px 18px rgba(28, 18, 64, .28);
}

/*
 * هالة الأيقونة الذهبية على الأسطح الداكنة وحدها. على خلفية فاتحة تبدو
 * الهالةُ الذهبية حول أيقونة ذهبية ضبابًا لا لمعانًا.
 */
.card-header.bg-primary i.text-warning,
.card.bg-primary i.text-warning,
.modal-header i.text-warning,
.pc-hero i.text-warning {
    filter: drop-shadow(0 2px 4px rgba(254, 200, 48, .45));
}

/*
 * الظل للأيقونات على الخلفيات الداكنة وحدها.
 *
 * كان المحدِّد `.bg-primary i` — و`<body>` نفسه يحمل `bg-primary`، فأصاب
 * كل أيقونة في كل صفحة بظل داكن جعلها تبدو ملطّخة على الخلفيات الفاتحة.
 */
.card-header.bg-primary i,
.card.bg-primary i,
.modal-header i {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}

/* ══════════════════════════ بطاقة الرصيد ═══════════════════════════════ */

.card.bg-primary {
    border: 0;
    background:
        radial-gradient(75% 150% at 92% 0%, rgba(254, 200, 48, .22) 0%, transparent 60%),
        linear-gradient(150deg, var(--pc-ink) 0%, var(--pc-ink-deep) 100%) !important;
    box-shadow: 0 18px 44px rgba(49, 34, 103, .28);
}

/* دائرة أيقونة الرصيد: حدّها هو شكلها، فلا تُملأ. */
.card.bg-primary .rounded-circle {
    border-color: rgba(255, 255, 255, .35) !important;
}

/* ══════════════════════════════ الارتفاع ═══════════════════════════════
 *
 * للبطاقات القابلة للضغط وحدها. البطاقة التي تحوي نموذجًا أو جدولًا يجب
 * ألّا تتحرّك تحت المؤشّر: الحركة والمستخدم يكتب تُشعره بأن الصفحة غير مستقرّة.
 */
.card:has(> a.stretched-link),
a.card,
.card-hoverable {
    transition: transform .2s cubic-bezier(.22, .61, .36, 1), box-shadow .2s ease, border-color .2s ease;
}

.card:has(> a.stretched-link):hover,
a.card:hover,
.card-hoverable:hover {
    transform: translateY(-4px);
    border-color: rgba(254, 200, 48, .6);
    box-shadow: var(--pc-shadow-lift);
}

@media (prefers-reduced-motion: reduce) {
    .card:has(> a.stretched-link),
    a.card,
    .card-hoverable,
    .product-button,
    #submitOrder, #submitDeposit, #verifyBinancePay, .btn-commit {
        transition: none;
    }

    .card:has(> a.stretched-link):hover,
    a.card:hover,
    .card-hoverable:hover,
    .btn-primary:active,
    .btn-warning:active,
    .btn-success:active,
    .btn-danger:active,
    .product-button:active,
    #submitOrder:active, #submitDeposit:active, #verifyBinancePay:active, .btn-commit:active {
        transform: none;
    }
}

/* ═══════════════════════════ الفوتر ═══════════════════════════════════
   كان تسعة روابط في صفّ واحد بعناوين طويلة، بلا هوية ولا حقوق — فيلتفّ
   على الجوال إلى كتلة نصّ لا تُقرأ. صار ثلاثة أعمدة: هوية وشروحات
   وسياسات، وشريط حقوق أسفلها.

   الألوان من الهوية وحدها: الأرضية بتدرّج البنفسجي العميق نفسه المستعمل
   في بطاقة الدعوة، فلا لون جديد يدخل اللوحة.
   ------------------------------------------------------------------ */
.pc-footer {
    color: rgba(255, 255, 255, .82);
    background:
        radial-gradient(80% 120% at 88% 0%, rgba(254, 200, 48, .13) 0%, transparent 58%),
        linear-gradient(165deg, #312267 0%, #241a4d 100%);

    /*
     * زوايا منحنية كبطاقات المنصّة، بنفس --pc-radius لا برقم مكرَّر:
     * تغيير المتغيّر يومًا يسري على الفوتر معه، ولا يبقى رقمٌ منسيّ
     * يخالف بقيّة الواجهة.
     *
     * علويّة فقط: الفوتر ملتصق بأسفل الصفحة، وتدوير أسفله يترك شريطًا
     * أبيض تحته يبدو خطأً لا تصميمًا.
     */
    border-radius: calc(var(--pc-radius) * 1.6) calc(var(--pc-radius) * 1.6) 0 0;
    overflow: hidden;
    margin-inline: auto;
    max-width: 1560px;
}

/* الشريط السفلي داخل الفوتر — لا يحتاج تدويرًا خاصًّا بعد overflow. */
.pc-footer-bar { border-radius: 0; }

.pc-footer-logo {
    height: 44px;
    width: auto;
    /* الشعار مصمَّم لخلفية فاتحة؛ على الداكن يُفتَّح بدل استبداله بنسخة
       ثانية تحتاج صيانة موازية. */
    filter: brightness(0) invert(1);
    opacity: .95;
}

.pc-footer-about {
    font-size: .875rem;
    line-height: 1.95;
    color: rgba(255, 255, 255, .68);
    max-width: 42ch;
}

.pc-footer-mail {
    font-size: .875rem;
    font-weight: 600;
    color: #fec830;
    text-decoration: none;
    transition: opacity .2s ease;
}

.pc-footer-mail:hover { color: #ffd75e; opacity: .9; }

.pc-footer-head {
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid rgba(254, 200, 48, .28);
    display: inline-block;
}

.pc-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pc-footer-list li { margin-bottom: .55rem; }

.pc-footer-list a {
    font-size: .875rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .74);
    text-decoration: none;
    transition: color .2s ease, padding-inline-start .2s ease;
    display: inline-block;
}

.pc-footer-list a:hover,
.pc-footer-list a.is-active {
    color: #fec830;
    /* إزاحة خفيفة في اتجاه القراءة — تعمل في العربية والإنجليزية معًا. */
    padding-inline-start: 4px;
}

.pc-footer-bar {
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .8rem;
    color: rgba(255, 255, 255, .55);
}

.pc-footer-note { color: rgba(255, 255, 255, .42); }

@media (max-width: 575.98px) {
    .pc-footer-about { max-width: none; }
    .pc-footer-bar .container { justify-content: center; text-align: center; }
}

/* توقيع المطوّر في شريط الفوتر — حاضر بلا أن ينافس الحقوق. */
.pc-footer-credit {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: rgba(255, 255, 255, .45);
}

.pc-footer-credit a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    transition: color .2s ease;
}

.pc-footer-credit a:hover { color: #fec830; }

/* الاسم لاتيني داخل صفحة عربية: dir=ltr يمنع انقلاب ترتيبه. */
.pc-footer-credit a span { direction: ltr; unicode-bidi: isolate; }

.pc-footer-credit .bi-telegram { font-size: .95rem; }

@media (max-width: 767.98px) {
    /* على الجوال يستقلّ التوقيع بسطره فلا يزاحم الحقوق. */
    .pc-footer-credit { width: 100%; justify-content: center; order: 3; }
}

/* ══════════════════════ شارات التوثيق في الفوتر ══════════════════════
   على غرار شارات سلة: صورة صغيرة، ثم تسمية ورقم. الرقم بـdir=ltr لأن
   الأرقام الطويلة تنقلب في سياق عربي فتُقرأ معكوسة.
   ------------------------------------------------------------------ */
.pc-trust {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.pc-trust-item {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .8rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: border-color .25s ease, background .25s ease;
}

.pc-trust-item:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(254, 200, 48, .35);
}

.pc-trust-item img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex: 0 0 auto;
}

.pc-trust-label {
    margin: 0;
    font-size: .72rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .55);
}

.pc-trust-number {
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .3px;
    color: #fff;
    font-variant-numeric: tabular-nums;
    unicode-bidi: isolate;
}

/* الشعار والسجل التجاري في صفّ واحد. */
.pc-footer-brand {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .9rem;
}

/* فاصل رفيع بينهما — يفصل بلا أن يُثقل. */
.pc-footer-brand .pc-trust-item {
    padding-inline-start: .9rem;
    border-inline-start: 1px solid rgba(255, 255, 255, .14);
    background: transparent;
    border-block: 0;
    border-inline-end: 0;
    border-radius: 0;
}

.pc-footer-brand .pc-trust-item:hover { background: transparent; }

@media (max-width: 575.98px) {
    /* على الضيّق يسقط الفاصل ويستقلّ كلٌّ بسطره. */
    .pc-footer-brand .pc-trust-item {
        padding-inline-start: 0;
        border-inline-start: 0;
    }
}