/**
 * Demo 23 — Headline: Activity Log Strip (نوار فید فعالیت)
 * A vertical "activity feed" strip — like a GitHub / Slack activity log.
 * Each row has a colored status dot (alternating) connected by a vertical rail,
 * a kicker pill, the headline title, and a relative-time chip on the far edge.
 * Rose / slate accent on a warm white backdrop. Excellent for "recently updated"
 * product lists ordered by modified date.
 */
.jespw-demo-23-activity-log .jespw-card {
        position: relative;
        background: #fffdf9;
        border: none;
        border-block-end: 1px dashed #e7e0d4;
        border-radius: 0;
        padding: 16px 14px 16px 30px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        transition: background .3s ease, padding-inline .3s ease;
}
/* The activity-rail dot + connecting line (drawn on the start edge). */
.jespw-demo-23-activity-log .jespw-card::before {
        content: "";
        position: absolute;
        inset-block-start: 14px;
        inset-block-end: -1px;
        inset-inline-start: 12px;
        width: 2px;
        background: #e7e0d4;
}
.jespw-demo-23-activity-log .jespw-card::after {
        content: "";
        position: absolute;
        inset-block-start: 20px;
        inset-inline-start: 8px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #f43f5e;
        border: 2px solid #fffdf9;
        box-shadow: 0 0 0 2px #fecdd3;
        transition: transform .3s ease, background .3s ease;
        z-index: 1;
}
/* Alternate dot colors for a multi-source feed feel. */
.jespw-demo-23-activity-log .jespw-card:nth-child(3n+2)::after {
        background: #f59e0b;
        box-shadow: 0 0 0 2px #fde68a;
}
.jespw-demo-23-activity-log .jespw-card:nth-child(3n+3)::after {
        background: #10b981;
        box-shadow: 0 0 0 2px #a7f3d0;
}
.jespw-demo-23-activity-log .jespw-card:hover {
        background: #fff7ed;
        padding-inline-start: 36px;
}
.jespw-demo-23-activity-log .jespw-card:hover::after {
        transform: scale(1.35);
}
/* Activity log = text only. */
.jespw-demo-23-activity-log .jespw-image,
.jespw-demo-23-activity-log .jespw-image-wrap {
        display: none !important;
}
.jespw-demo-23-activity-log .jespw-text-accent,
.jespw-demo-23-activity-log .jespw-index {
        display: none;
}
/* Category = a soft kicker label (no pill bg — flat, log-style). */
.jespw-demo-23-activity-log .jespw-category {
        order: 1;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #be123c;
        background: transparent;
        padding: 0;
        white-space: nowrap;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 5px;
}
.jespw-demo-23-activity-log .jespw-category::after {
        content: "·";
        color: #d6d3d1;
        margin-inline-start: 4px;
}
/* Content row. */
.jespw-demo-23-activity-log .jespw-content {
        order: 2;
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        min-width: 0;
        flex-wrap: nowrap;
}
/* Title — single-line headline, grows to fill. */
.jespw-demo-23-activity-log .jespw-title {
        order: 1;
        flex: 1;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.4;
        color: #1c1917;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
}
.jespw-demo-23-activity-log .jespw-title a {
        color: inherit;
        text-decoration: none;
        transition: color .25s ease;
}
.jespw-demo-23-activity-log .jespw-card:hover .jespw-title a {
        color: #be123c;
}
/* Excerpt hidden — log rows are single-line. */
.jespw-demo-23-activity-log .jespw-excerpt {
        display: none;
}
/* Rating hidden. */
.jespw-demo-23-activity-log .jespw-rating {
        order: 2;
        display: none;
}
/* Modified-date = the relative-time chip — rose tint. */
.jespw-demo-23-activity-log .jespw-modified-date {
        order: 3;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 11px;
        font-weight: 600;
        color: #9f1239;
        background: #ffe4e6;
        padding: 4px 10px;
        border-radius: 999px;
        white-space: nowrap;
        flex-shrink: 0;
}
.jespw-demo-23-activity-log .jespw-modified-icon {
        color: #f43f5e;
        font-size: 0.85em;
}
/* Price — small, far edge. */
.jespw-demo-23-activity-log .jespw-price {
        order: 4;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 1px;
        white-space: nowrap;
        flex-shrink: 0;
}
.jespw-demo-23-activity-log .jespw-regular-price {
        font-size: 14px;
        font-weight: 700;
        color: #1c1917;
}
.jespw-demo-23-activity-log .jespw-regular-price del {
        color: #a8a29e;
        font-size: 10px;
        font-weight: 400;
        text-decoration: line-through;
}
.jespw-demo-23-activity-log .jespw-sale-price ins {
        font-size: 14px;
        font-weight: 700;
        color: #be123c;
        text-decoration: none;
}
.jespw-demo-23-activity-log .jespw-discount-percent {
        font-size: 10px;
        font-weight: 700;
        color: #be123c;
        border: 1px solid #fecdd3;
        padding: 1px 6px;
        border-radius: 3px;
}
/* Button = minimal text link with arrow.
   RTL-aware: the arrow points in the natural "forward" direction for the
   reading flow (← in LTR, → in RTL). The widget is always rendered with
   dir="rtl", so we use → by default and flip the hover translate to match. */
.jespw-demo-23-activity-log .jespw-button {
        padding: 4px 0;
        font-size: 12px;
        font-weight: 700;
        color: #be123c;
        background: transparent;
        border: none;
        border-radius: 0;
        transition: gap .25s ease;
        white-space: nowrap;
        flex-shrink: 0;
}
.jespw-demo-23-activity-log .jespw-button::after {
        content: "→";
        margin-inline-start: 4px;
        display: inline-block;
        transition: transform .25s ease;
}
.jespw-demo-23-activity-log .jespw-card:hover .jespw-button::after {
        transform: translateX(4px);
}
/* Badges as tiny flat chips. */
.jespw-demo-23-activity-log .jespw-badge {
        font-size: 10px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 999px;
}
.jespw-demo-23-activity-log .jespw-badge-new {
        background: #f43f5e;
        color: #fff;
}
.jespw-demo-23-activity-log .jespw-badge-sale {
        background: #f59e0b;
        color: #fff;
}
.jespw-demo-23-activity-log .jespw-badges {
        position: static;
        order: 0;
        display: inline-flex;
        gap: 5px;
        flex-shrink: 0;
}
/* Grid: stacked log rows (single column — the rail needs continuity). */
.jespw-demo-23-activity-log .jespw-grid {
        grid-template-columns: 1fr;
        gap: 0;
}
/* Slider: each slide is one activity row. */
.jespw-demo-23-activity-log.jespw-layout-slider .jespw-card {
        height: 100%;
        min-height: 64px;
}
/* Last card: no bottom border + no rail line beyond the dot. */
.jespw-demo-23-activity-log:not(.jespw-layout-slider) .jespw-card:last-child {
        border-block-end: none;
}
.jespw-demo-23-activity-log:not(.jespw-layout-slider) .jespw-card:last-child::before {
        inset-block-end: 50%;
}
/* Responsive: wrap title, drop the hover indent. */
@media (max-width: 640px) {
        .jespw-demo-23-activity-log .jespw-content {
                flex-wrap: wrap;
        }
        .jespw-demo-23-activity-log .jespw-title {
                white-space: normal;
                flex-basis: 100%;
                order: -1;
        }
        .jespw-demo-23-activity-log .jespw-card:hover {
                padding-inline-start: 30px;
        }
}