/**
 * Schedule Step - Rule Preview (sentence + next active dates)
 *
 * The honest-preview strip: the sentence states the rule in plain English
 * and the chips below it are the next real runs. The very next run is
 * highlighted — that is the one date a merchant checks.
 *
 * @package    SmartCycleDiscounts
 * @since      2.2.0
 */

.wsscd-next-dates {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wsscd-spacing-xs);
    padding: var(--wsscd-spacing-md) var(--wsscd-spacing-lg);
    background: var(--wsscd-color-white);
}

.wsscd-next-dates:empty {
    display: none;
}

.wsscd-next-dates__label {
    margin-right: var(--wsscd-spacing-xs);
    font-size: 11px;
    font-weight: var(--wsscd-font-weight-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--wsscd-color-text-muted);
}

.wsscd-next-date {
    display: inline-flex;
    align-items: baseline;
    gap: var(--wsscd-spacing-xxs);
    padding: 3px 12px;
    border: var(--wsscd-border-width) solid var(--wsscd-color-border);
    border-radius: var(--wsscd-radius-pill);
    background: var(--wsscd-color-surface);
    color: var(--wsscd-color-text);
    font-size: var(--wsscd-font-size-small);
    white-space: nowrap;
}

.wsscd-next-date__day {
    font-weight: var(--wsscd-font-weight-semibold);
}

.wsscd-next-date__date {
    color: var(--wsscd-color-text-muted);
}

/* The very next run — the date a merchant actually checks. */
.wsscd-next-date--first {
    border-color: var(--wsscd-color-primary);
    background: var(--wsscd-color-primary-alpha-10);
    color: var(--wsscd-color-primary-darker, var(--wsscd-color-primary));
}

.wsscd-next-date--first .wsscd-next-date__date {
    color: inherit;
}

/* Ongoing marker — the schedule continues past what fits here. */
.wsscd-next-date--more {
    border-style: dashed;
    background: var(--wsscd-color-white);
    color: var(--wsscd-color-text-muted);
}

[dir="rtl"] .wsscd-next-dates__label {
    margin-right: 0;
    margin-left: var(--wsscd-spacing-xs);
}

@media (max-width: 600px) {
    .wsscd-next-dates {
        padding: var(--wsscd-spacing-sm) var(--wsscd-spacing-md);
    }
}

@media (prefers-contrast: high) {
    .wsscd-next-date {
        border-color: currentColor;
    }
}