/* ==========================================================================
   flashsales.css — استایل صفحه «شگفت‌انگیزهای روز»
   --------------------------------------------------------------------------
   فقط در page-flashsales.php لود می‌شود (شرط داخل inc/enqueue.php).
   استایل گرید محصولات و بج تخفیف از taxonomy.css و product-card.css می‌آید.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) بنر بالای صفحه
   -------------------------------------------------------------------------- */
.fs-banner {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 24px 28px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(270deg, #ef4444 0%, #f2704d 55%, #f58a56 100%);
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(239, 68, 68, .25);
    margin-bottom: 30px;
}

/* پترن % کم‌رنگ پس‌زمینه */
.fs-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='120' viewBox='0 0 180 120'%3E%3Ctext x='24' y='70' font-size='56' font-weight='700' fill='%23ffffff' transform='rotate(-14 24 70)'%3E%25%3C/text%3E%3Ctext x='110' y='40' font-size='34' font-weight='700' fill='%23ffffff' transform='rotate(12 110 40)'%3E%25%3C/text%3E%3C/svg%3E") repeat;
    opacity: .1;
    pointer-events: none;
}

.fs-banner__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
}

.fs-banner__icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   2) پیل شمارش معکوس
   -------------------------------------------------------------------------- */
.fs-timer {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 18px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.fs-timer__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .95rem;
    font-weight: 500;
    white-space: nowrap;
}

.fs-timer__clock {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.fs-timer__time {
    direction: ltr; /* تا ترتیب ۰۵:۵۸:۲۸ به‌هم نریزد */
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fs-banner.is-finished .fs-timer__time { opacity: .6; }

/* --------------------------------------------------------------------------
   3) گرید محصولات (فقط فاصله — استایل کارت‌ها از taxonomy/product-card)
   -------------------------------------------------------------------------- */
.fs-products { margin-top: 24px; }

/* --------------------------------------------------------------------------
   4) ریسپانسیو
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
    .fs-banner {
        flex-direction: column;
        align-items: stretch;
        padding: 18px;
        text-align: center;
        position: sticky;
        top: 0;
        z-index: 400;
    }
    .fs-banner__title { justify-content: center; }
    .fs-timer { justify-content: space-between; flex-wrap: wrap; gap: 8px; }
}