/* =============================================================
   Live Price Ticker — v1.3
   ============================================================= */

.lpt-wrapper { width: 100%; }

/* ── Grid: always single-row visible ── */
.lpt-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0;                 /* gap handled by card padding + separator */
}
.lpt-cols-2 { grid-template-columns: repeat(2, 1fr); }
.lpt-cols-3 { grid-template-columns: repeat(3, 1fr); }
.lpt-cols-4 { grid-template-columns: repeat(4, 1fr); }
.lpt-cols-5 { grid-template-columns: repeat(5, 1fr); }
.lpt-cols-6 { grid-template-columns: repeat(6, 1fr); }

/* ── Card ── */
.lpt-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: transparent;
    padding: 14px 16px;
    overflow: hidden;
    /* visible by default — JS animates below-fold cards */
    opacity: 1;
    transform: none;
}

/* Slot-rotation animation (JS triggers this) */
.lpt-card.lpt-slot-out {
    animation: lpt-slot-out var(--lpt-anim, 400ms) cubic-bezier(.4,0,1,1) both;
}
.lpt-card.lpt-slot-in {
    animation: lpt-slot-in var(--lpt-anim, 400ms) cubic-bezier(0,.8,.2,1) both;
    animation-delay: var(--lpt-delay, 0ms);
}
/* Initial page-load entrance */
.lpt-card.lpt-enter {
    animation: lpt-slot-in var(--lpt-anim, 400ms) cubic-bezier(0,.8,.2,1) both;
    animation-delay: var(--lpt-delay, 0ms);
}

@keyframes lpt-slot-out {
    from { opacity: 1; transform: translateY(0);     }
    to   { opacity: 0; transform: translateY(-20px); }
}
@keyframes lpt-slot-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── Vertical separator — uses ::after pseudo, height-controllable ── */
.lpt-grid.has-separator .lpt-card::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--lpt-sep-thickness, 1px);
    height: var(--lpt-sep-height, 60%);
    background-color: var(--lpt-sep-color, #2d2d4e);
}
/* No separator after the last card in each row */
.lpt-grid.has-separator .lpt-card:last-child::after,
.lpt-grid.has-separator.lpt-cols-2 .lpt-card:nth-child(2n)::after,
.lpt-grid.has-separator.lpt-cols-3 .lpt-card:nth-child(3n)::after,
.lpt-grid.has-separator.lpt-cols-4 .lpt-card:nth-child(4n)::after,
.lpt-grid.has-separator.lpt-cols-5 .lpt-card:nth-child(5n)::after,
.lpt-grid.has-separator.lpt-cols-6 .lpt-card:nth-child(6n)::after {
    display: none;
}

/* ── Thumbnail ── */
.lpt-thumb-wrap {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255,255,255,.06);
}
.lpt-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Info ── */
.lpt-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* RTL so name + price align right for Persian */
    direction: rtl;
    text-align: right;
}

/* Line 1 — name */
.lpt-name {
    font-size: .85rem;
    font-weight: 500;
    color: #c9d1d9;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    transition: color .2s ease;
}
a.lpt-name:hover { color: #fff; }

/* Line 2 — price row: price first (right), badge second (left) */
.lpt-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    direction: rtl;
    flex-wrap: nowrap;
}

/* Price: number + currency in correct order (set by PHP) */
.lpt-price {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.01em;
    white-space: nowrap;
    transition: color .35s ease;

}
.lpt-price.lpt-flash-up   { color: #21c97a !important; }
.lpt-price.lpt-flash-down { color: #f04438 !important; }

/* ── Badge ── */
.lpt-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1.6;
    white-space: nowrap;
    direction: ltr;
    unicode-bidi: isolate;
    flex-shrink: 0;
}
.lpt-badge.is-up      { background: rgba(33,201,122,.15); color: #21c97a; }
.lpt-badge.is-down    { background: rgba(240,68,56,.15);  color: #f04438; }
.lpt-badge.is-neutral { background: rgba(139,148,158,.15);color: #8b949e; }

/* Pulse ring on auto-refresh */
@keyframes lpt-pulse-up   { 0%{box-shadow:0 0 0 0 rgba(33,201,122,.4)} 70%{box-shadow:0 0 0 8px rgba(33,201,122,0)} 100%{box-shadow:0 0 0 0 rgba(33,201,122,0)} }
@keyframes lpt-pulse-down { 0%{box-shadow:0 0 0 0 rgba(240,68,56,.4)}  70%{box-shadow:0 0 0 8px rgba(240,68,56,0)}  100%{box-shadow:0 0 0 0 rgba(240,68,56,0)} }
.lpt-card.lpt-pulse-up   { animation: lpt-pulse-up   .6s ease; }
.lpt-card.lpt-pulse-down { animation: lpt-pulse-down .6s ease; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .lpt-card, .lpt-price { animation: none !important; transition: none !important; }
}