/**
 * Demo 21 — Headline: Updates Ticker (نوار تیکر به‌روزرسانی‌ها)
 * A compact horizontal "latest updates" ticker strip — like a stock/ news ticker.
 * Fixed "آخرین به‌روزرسانی" badge with a pulsing dot pinned to the start (RTL),
 * then the headline title grows to fill, the relative-time sits beside it, and
 * the price hangs off the far edge. Designed for slider mode (one item / slide)
 * with loop + autoplay for a true scrolling-ticker feel, but also stacks in grid.
 * Cyan / slate accent on a near-black rail.
 */
.jespw-demo-21-updates-ticker .jespw-card {
        position: relative;
        background: #0f172a;
        border: none;
        border-radius: 10px;
        padding: 12px 16px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        overflow: hidden;
        transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
/* A thin accent bar that slides across the top on hover. */
.jespw-demo-21-updates-ticker .jespw-card::before {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, #06b6d4, #22d3ee, #67e8f9);
        transition: width .45s cubic-bezier(.2, .8, .2, 1);
}
.jespw-demo-21-updates-ticker .jespw-card:hover::before {
        width: 100%;
}
.jespw-demo-21-updates-ticker .jespw-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 34px -16px rgba(6, 182, 212, 0.55);
}
/* Ticker = text only. Hide image + index + accent. */
.jespw-demo-21-updates-ticker .jespw-image,
.jespw-demo-21-updates-ticker .jespw-image-wrap {
        display: none !important;
}
.jespw-demo-21-updates-ticker .jespw-text-accent,
.jespw-demo-21-updates-ticker .jespw-index {
        display: none;
}
/* The "آخرین به‌روزرسانی" pill — styled like a fixed station badge. */
.jespw-demo-21-updates-ticker .jespw-category {
        order: 1;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.3px;
        color: #67e8f9;
        background: rgba(6, 182, 212, 0.15);
        border: 1px solid rgba(6, 182, 212, 0.4);
        padding: 5px 11px;
        border-radius: 999px;
        white-space: nowrap;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 7px;
}
/* Pulsing live dot inside the badge. */
.jespw-demo-21-updates-ticker .jespw-category::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #22d3ee;
        box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.7);
        animation: jespw-ticker-pulse 1.8s infinite;
        flex-shrink: 0;
}
@keyframes jespw-ticker-pulse {
        0%   { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.7); }
        70%  { box-shadow: 0 0 0 8px rgba(34, 211, 238, 0); }
        100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
}
/* Content row = horizontal flex. */
.jespw-demo-21-updates-ticker .jespw-content {
        order: 2;
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        min-width: 0;
        flex-wrap: nowrap;
}
/* Title = the headline — single line, grows to fill. */
.jespw-demo-21-updates-ticker .jespw-title {
        order: 1;
        flex: 1;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.35;
        color: #e2e8f0;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
}
.jespw-demo-21-updates-ticker .jespw-title a {
        color: inherit;
        text-decoration: none;
        transition: color .25s ease;
}
.jespw-demo-21-updates-ticker .jespw-card:hover .jespw-title a {
        color: #67e8f9;
}
/* Excerpt hidden — ticker is single-line only. */
.jespw-demo-21-updates-ticker .jespw-excerpt {
        display: none;
}
/* Rating hidden by default — keep the row compact. */
.jespw-demo-21-updates-ticker .jespw-rating {
        order: 2;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        color: #94a3b8;
        white-space: nowrap;
        flex-shrink: 0;
}
/* Modified-date pill = the "time ago" — a subtle chip. */
.jespw-demo-21-updates-ticker .jespw-modified-date {
        order: 3;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 11px;
        font-weight: 600;
        color: #94a3b8;
        background: rgba(148, 163, 184, 0.12);
        padding: 4px 10px;
        border-radius: 999px;
        white-space: nowrap;
        flex-shrink: 0;
}
.jespw-demo-21-updates-ticker .jespw-modified-icon {
        color: #22d3ee;
        font-size: 0.85em;
}
/* Price cluster — amber chip on the far edge. */
.jespw-demo-21-updates-ticker .jespw-price {
        order: 4;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 1px;
        white-space: nowrap;
        flex-shrink: 0;
}
.jespw-demo-21-updates-ticker .jespw-regular-price {
        font-size: 15px;
        font-weight: 800;
        color: #f1f5f9;
}
.jespw-demo-21-updates-ticker .jespw-regular-price del {
        color: #64748b;
        font-size: 11px;
        font-weight: 400;
        text-decoration: line-through;
}
.jespw-demo-21-updates-ticker .jespw-sale-price ins {
        font-size: 15px;
        font-weight: 800;
        color: #22d3ee;
        text-decoration: none;
}
.jespw-demo-21-updates-ticker .jespw-discount-percent {
        font-size: 10px;
        font-weight: 700;
        color: #0f172a;
        background: #22d3ee;
        padding: 1px 7px;
        border-radius: 999px;
}
/* Button = ghost pill. */
.jespw-demo-21-updates-ticker .jespw-button {
        padding: 6px 13px;
        font-size: 12px;
        font-weight: 700;
        color: #67e8f9;
        background: transparent;
        border: 1.5px solid rgba(6, 182, 212, 0.5);
        border-radius: 999px;
        transition: all .25s ease;
        white-space: nowrap;
        flex-shrink: 0;
}
.jespw-demo-21-updates-ticker .jespw-button:hover {
        background: #06b6d4;
        color: #0f172a;
        border-color: #06b6d4;
}
/* Icon-button chips inherit a slate tone on the dark rail so their
   currentColor borders + hover fill are visible (without this they'd inherit
   the body text color and vanish on the near-black background). */
.jespw-demo-21-updates-ticker .jespw-icon-buttons {
        color: #94a3b8;
}
.jespw-demo-21-updates-ticker .jespw-icon-buttons .jespw-button:hover {
        background: #06b6d4;
        border-color: #06b6d4;
}
.jespw-demo-21-updates-ticker .jespw-icon-buttons .jespw-button:hover svg {
        color: #0f172a;
}
/* Badges as tiny neon chips. */
.jespw-demo-21-updates-ticker .jespw-badge {
        font-size: 10px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 999px;
        background: #22d3ee;
        color: #0f172a;
}
.jespw-demo-21-updates-ticker .jespw-badge-new {
        background: #34d399;
        color: #0f172a;
}
.jespw-demo-21-updates-ticker .jespw-badges {
        position: static;
        order: 0;
        display: inline-flex;
        gap: 6px;
        flex-shrink: 0;
}
/* Grid: stacked ticker rows. */
.jespw-demo-21-updates-ticker .jespw-grid {
        grid-template-columns: 1fr;
        gap: 8px;
}
/* Slider: each slide is one self-contained ticker row. */
.jespw-demo-21-updates-ticker.jespw-layout-slider .jespw-card {
        height: 100%;
        min-height: 58px;
}
/* Responsive: collapse to stacked rows on mobile. */
@media (max-width: 640px) {
        .jespw-demo-21-updates-ticker .jespw-content {
                flex-wrap: wrap;
        }
        .jespw-demo-21-updates-ticker .jespw-title {
                white-space: normal;
                flex-basis: 100%;
                order: -1;
        }
        .jespw-demo-21-updates-ticker .jespw-card:hover {
                transform: none;
        }
}