/**
 * Demo 26 — Headline: Notification Strip (نوار اعلان‌ها)
 * A vertical stack of "notification toast" rows — like a browser/OS notification
 * center. Each row = an icon disc + title + relative-time + a chevron arrow.
 * The first row gets a subtle "new" highlight tint. Teal accent on a soft
 * slate backdrop. Perfect for "latest updates" / "what's new" sidebars.
 */
.jespw-demo-26-notification-strip .jespw-card {
        position: relative;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 12px 14px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 13px;
        transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.jespw-demo-26-notification-strip .jespw-card:hover {
        transform: translateX(-3px);
        border-color: #0d9488;
        box-shadow: 0 10px 24px -12px rgba(13, 148, 136, 0.4);
}
/* A leading accent strip — grows on hover. */
.jespw-demo-26-notification-strip .jespw-card::before {
        content: "";
        position: absolute;
        inset-block-start: 10px;
        inset-block-end: 10px;
        inset-inline-start: 0;
        width: 3px;
        border-radius: 0 999px 999px 0;
        background: #14b8a6;
        transition: width .3s ease;
}
.jespw-demo-26-notification-strip .jespw-card:hover::before {
        width: 5px;
}
/* The "newest" card (first child) gets a highlighted tint. */
.jespw-demo-26-notification-strip:not(.jespw-layout-slider) .jespw-card:first-child {
        background: #f0fdfa;
        border-color: #99f6e4;
}
.jespw-demo-26-notification-strip:not(.jespw-layout-slider) .jespw-card:first-child::before {
        background: #0d9488;
        width: 5px;
}
/* Notification = text only. */
.jespw-demo-26-notification-strip .jespw-image,
.jespw-demo-26-notification-strip .jespw-image-wrap {
        display: none !important;
}
.jespw-demo-26-notification-strip .jespw-text-accent,
.jespw-demo-26-notification-strip .jespw-index {
        display: none;
}
/* Category = the "notification type" icon disc (we turn the text into a disc). */
.jespw-demo-26-notification-strip .jespw-category {
        order: 1;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: linear-gradient(135deg, #14b8a6, #0d9488);
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0;
        text-transform: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1.1;
        padding: 0 6px;
        flex-shrink: 0;
        box-shadow: 0 4px 10px -4px rgba(13, 148, 136, 0.6);
        transition: transform .3s ease;
}
.jespw-demo-26-notification-strip .jespw-card:hover .jespw-category {
        transform: scale(1.06) rotate(-3deg);
}
/* Content column. */
.jespw-demo-26-notification-strip .jespw-content {
        order: 2;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
}
/* Title — single-line headline. */
.jespw-demo-26-notification-strip .jespw-title {
        order: 1;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.35;
        color: #0f172a;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
}
.jespw-demo-26-notification-strip .jespw-title a {
        color: inherit;
        text-decoration: none;
        transition: color .25s ease;
}
.jespw-demo-26-notification-strip .jespw-card:hover .jespw-title a {
        color: #0d9488;
}
/* Excerpt — tiny muted line under the title. */
.jespw-demo-26-notification-strip .jespw-excerpt {
        order: 2;
        font-size: 12px;
        line-height: 1.45;
        color: #64748b;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}
/* Rating hidden. */
.jespw-demo-26-notification-strip .jespw-rating {
        order: 3;
        display: none;
}
/* Modified-date = the "time ago" row — tiny, with icon. */
.jespw-demo-26-notification-strip .jespw-modified-date {
        order: 4;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        font-weight: 600;
        color: #0d9488;
        white-space: nowrap;
}
.jespw-demo-26-notification-strip .jespw-modified-icon {
        font-size: 0.85em;
}
/* Price + button cluster on the far edge, stacked. */
.jespw-demo-26-notification-strip .jespw-price {
        order: 3;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 1px;
        white-space: nowrap;
        flex-shrink: 0;
}
.jespw-demo-26-notification-strip .jespw-regular-price {
        font-size: 14px;
        font-weight: 800;
        color: #0f172a;
}
.jespw-demo-26-notification-strip .jespw-regular-price del {
        color: #94a3b8;
        font-size: 10px;
        font-weight: 400;
        text-decoration: line-through;
}
.jespw-demo-26-notification-strip .jespw-sale-price ins {
        font-size: 14px;
        font-weight: 800;
        color: #0d9488;
        text-decoration: none;
}
.jespw-demo-26-notification-strip .jespw-discount-percent {
        font-size: 10px;
        font-weight: 700;
        color: #fff;
        background: #14b8a6;
        padding: 1px 7px;
        border-radius: 999px;
}
/* Button = ghost pill. */
.jespw-demo-26-notification-strip .jespw-button {
        padding: 5px 12px;
        font-size: 11px;
        font-weight: 700;
        color: #0d9488;
        background: transparent;
        border: 1.5px solid #14b8a6;
        border-radius: 999px;
        transition: all .25s ease;
        white-space: nowrap;
        flex-shrink: 0;
}
.jespw-demo-26-notification-strip .jespw-button:hover {
        background: #14b8a6;
        color: #fff;
}
/* Badges as tiny chips — positioned at the top-start corner of the card. */
.jespw-demo-26-notification-strip .jespw-badge {
        font-size: 10px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 999px;
}
.jespw-demo-26-notification-strip .jespw-badge-new {
        background: #14b8a6;
        color: #fff;
}
.jespw-demo-26-notification-strip .jespw-badge-sale {
        background: #f59e0b;
        color: #fff;
}
.jespw-demo-26-notification-strip .jespw-badges {
        position: static;
        order: 0;
        display: inline-flex;
        gap: 5px;
        flex-shrink: 0;
        align-self: flex-start;
}
/* Grid: stacked notification rows. */
.jespw-demo-26-notification-strip .jespw-grid {
        grid-template-columns: 1fr;
        gap: 8px;
}
/* Two-column variant on wider screens (side-by-side notification panels). */
@media (min-width: 1024px) {
        .jespw-demo-26-notification-strip:not(.jespw-layout-slider) .jespw-grid {
                grid-template-columns: repeat(2, 1fr);
        }
}
/* Slider: each slide is one notification row. */
.jespw-demo-26-notification-strip.jespw-layout-slider .jespw-card {
        height: 100%;
        min-height: 70px;
}
/* Responsive: stack the far-edge cluster, drop translate on hover. */
@media (max-width: 640px) {
        .jespw-demo-26-notification-strip .jespw-card {
                flex-wrap: wrap;
        }
        .jespw-demo-26-notification-strip .jespw-price {
                order: 3;
                flex-basis: 100%;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                margin-block-start: 6px;
        }
        .jespw-demo-26-notification-strip .jespw-card:hover {
                transform: none;
        }
}