/*
 * صفقات المتداول بالدفعات (v78) — مشترك بين الملف العام وملف المتداول داخل لوحة العميل.
 * بلا صندوق تمرير داخلي: القائمة تطول مع الصفحة ويحمّل السكربت الدفعة التالية تلقائيًا عند الاقتراب من نهايتها.
 * الألوان من متغيرات الواجهتين (العامة: --sep/--mut/--s2، والعميل: --line/--muted/--alt) مع قيم احتياطية.
 */

.ltBox {
    --lt-line: var(--sep, var(--line, rgba(255, 255, 255, .08)));
    --lt-mut: var(--mut, var(--muted, #8e8e93));
    --lt-s2: var(--s2, var(--alt, #161618));
    --lt-s3: var(--s3, var(--line2, #1f1f22));
}

/* الصفوف خارج الشاشة لا تُرسم حتى تقترب، فتبقى القائمة الطويلة سلسة على الجوال */
.ltRows > * {
    content-visibility: auto;
    contain-intrinsic-size: auto 66px;
}

.ltRows > .ltNew {
    animation: ltIn .32s var(--ease, var(--ds-ease, ease)) both;
}

@keyframes ltIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

.ltFoot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 12px;
}

.ltProg {
    text-align: center;
    font-size: 12.5px;
    color: var(--lt-mut);
    font-variant-numeric: tabular-nums lining-nums;
}

.ltProg.is-err {
    color: var(--neg, #ff453a);
}

.ltMore[disabled] {
    opacity: .75;
    cursor: progress;
}

/* كلاسات الأزرار (.btn) تعرّف display فتغلب خاصية hidden، فنؤكد الإخفاء صراحة */
.ltMore[hidden],
.ltFoot [hidden] {
    display: none !important;
}

.ltMore .ltSpin {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-inline-end: 8px;
    vertical-align: -3px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    animation: ltSp .7s linear infinite;
}

@keyframes ltSp {
    to { transform: rotate(360deg); }
}

.ltSentinel {
    height: 1px;
}

/* صفوف هيكلية أثناء الجلب */
.ltSk {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--lt-line);
}

.ltSk .ltSkT {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ltSk i {
    display: block;
    border-radius: 7px;
    background: linear-gradient(90deg, var(--lt-s2) 0%, var(--lt-s3) 45%, var(--lt-s2) 90%);
    background-size: 300% 100%;
    animation: ltShimmer 1.3s ease-in-out infinite;
}

@keyframes ltShimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ltRows > .ltNew,
    .ltSk i,
    .ltMore .ltSpin {
        animation: none;
    }
}