/* SA Flash Sale — Frontend CSS */
:root { --fs-color: #ef4444; }

/* ─── Sticky Bar ─── */
#sa-fs-sticky-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    background: var(--fs-color);
    color: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.2);
    cursor: pointer;
}

#sa-fs-sticky-bar:hover { filter: brightness(1.05); }

/* Entire bar is a link except close button */
.sa-fs-bar-main-link {
    display: block;
    padding: 8px 56px 8px 16px;
    text-decoration: none;
    color: #fff;
}

.sa-fs-bar-main-link:hover { color: #fff; text-decoration: none; }

.sa-fs-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: relative;
}

.sa-fs-bar-text {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.sa-fs-bar-countdown {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0,0,0,.15);
    padding: 4px 12px;
    border-radius: 20px;
}

.sa-fs-bar-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 28px;
}

.sa-fs-bar-unit span { font-size: 15px; font-weight: 700; line-height: 1; }
.sa-fs-bar-unit small { font-size: 9px; opacity: .8; text-transform: uppercase; line-height: 1.4; }
.sa-fs-sep { font-size: 15px; font-weight: 700; opacity: .6; margin-bottom: 8px; }

.sa-fs-bar-link {
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sa-fs-bar-link:hover { opacity: .9; color: #fff; }

.sa-fs-bar-close {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.2);
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 10;
    flex-shrink: 0;
}
.sa-fs-bar-close:hover { background: rgba(0,0,0,.4); }

body.admin-bar #sa-fs-sticky-bar { top: 32px; }

/* Push body content down when bar is visible */
body.sa-fs-bar-active { padding-top: 48px !important; }
body.admin-bar.sa-fs-bar-active { padding-top: 80px !important; }

/* ─── Product page badge ─── */
.sa-fs-product-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--fs-color) 0%, color-mix(in srgb, var(--fs-color) 80%, #000) 100%);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 14px;
}

.sa-fs-badge-label { font-weight: 700; letter-spacing: 0.05em; }

.sa-fs-discount-pill {
    background: rgba(255,255,255,.25);
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 13px;
}

/* ─── Countdown timer (product page) ─── */
.sa-fs-countdown {
    background: #fff8f8;
    border: 2px solid var(--fs-color);
    border-radius: 10px;
    padding: 14px 18px;
    margin: 12px 0;
}

.sa-fs-countdown-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--fs-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.sa-fs-countdown-grid {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sa-fs-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--fs-color);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    min-width: 56px;
}

.sa-fs-unit span { font-size: 26px; font-weight: 700; line-height: 1; }
.sa-fs-unit small { font-size: 10px; opacity: .9; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.sa-fs-countdown .sa-fs-sep { font-size: 26px; font-weight: 700; color: var(--fs-color); }

/* Standalone countdown (shortcode) */
.sa-fs-countdown-standalone {
    display: inline-flex;
    flex-direction: column;
    text-align: center;
}

/* ─── Stock counter ─── */
.sa-fs-stock-counter {
    padding: 12px 16px;
    border-radius: 8px;
    margin: 10px 0;
    border: 1.5px solid;
}

.sa-fs-stock-ok       { background: #fffbeb; border-color: #fde68a; }
.sa-fs-stock-low      { background: #fff7ed; border-color: #fed7aa; }
.sa-fs-stock-critical { background: #fff1f2; border-color: #fecdd3; }

.sa-fs-stock-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.sa-fs-stock-ok .sa-fs-stock-label       { color: #92400e; }
.sa-fs-stock-low .sa-fs-stock-label      { color: #9a3412; }
.sa-fs-stock-critical .sa-fs-stock-label { color: #be123c; }

.sa-fs-stock-pct { font-size: 11px; opacity: .7; }

.sa-fs-stock-bar {
    height: 6px;
    background: rgba(0,0,0,.1);
    border-radius: 99px;
    overflow: hidden;
}

.sa-fs-stock-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.5s;
}
.sa-fs-stock-ok .sa-fs-stock-fill       { background: #f59e0b; }
.sa-fs-stock-low .sa-fs-stock-fill      { background: #f97316; }
.sa-fs-stock-critical .sa-fs-stock-fill { background: #ef4444; }

.sa-fs-stock-note { font-size: 11px; margin: 5px 0 0; opacity: .7; }

/* ─── Shop loop badge ─── */
.sa-fs-loop-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    z-index: 2;
    text-transform: uppercase;
}

/* Astra theme specific - badge needs relative parent */
.astra-shop-thumbnail-wrap { position: relative; }
.sa-fs-astra-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    z-index: 9;
    text-transform: uppercase;
    pointer-events: none;
}

/* ─── Flash Sale Grid (shortcode) ─── */
.sa-fs-grid-wrap { margin: 32px 0; }

.sa-fs-grid-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.sa-fs-grid-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.sa-fs-header-countdown {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff8f8;
    border: 1.5px solid var(--fs-color);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--fs-color);
}

.sa-fs-hc-label { font-weight: 400; font-size: 12px; color: #666; margin-right: 4px; }

.sa-fs-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    gap: 20px;
}

@media (max-width: 992px) { .sa-fs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .sa-fs-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* ─── Product card ─── */
.sa-fs-product-card {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.sa-fs-product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
}

.sa-fs-out-of-stock { opacity: .65; }

.sa-fs-card-img {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: #f8fafc;
}

.sa-fs-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.sa-fs-product-card:hover .sa-fs-card-img img { transform: scale(1.04); }

.sa-fs-card-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sa-fs-card-disc {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #fff;
    color: #ef4444;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #fecaca;
}

.sa-fs-card-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.sa-fs-card-name {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    text-decoration: none;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sa-fs-card-name:hover { color: #ef4444; }

.sa-fs-card-price {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.sa-fs-price-sale { font-size: 15px; font-weight: 700; color: #ef4444; }
.sa-fs-price-reg  { font-size: 12px; color: #94a3b8; }

.sa-fs-card-stock {
    font-size: 11px;
    color: #f97316;
    font-weight: 600;
}

.sa-fs-card-btn {
    display: block;
    text-align: center;
    background: #ef4444;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 9px 12px;
    border-radius: 8px;
    text-decoration: none;
    margin-top: auto;
    transition: background 0.15s, transform 0.1s;
    border: none;
    cursor: pointer;
}

.sa-fs-card-btn:hover { background: #dc2626; color: #fff; transform: scale(0.99); }

.sa-fs-btn-outline {
    background: transparent;
    color: #ef4444;
    border: 1.5px solid #ef4444;
}

.sa-fs-btn-outline:hover { background: #ef4444; color: #fff; }

.sa-fs-btn-oos {
    background: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
}

.sa-fs-empty { text-align: center; color: #94a3b8; padding: 40px; }

/* ─── Banner shortcode ─── */
.sa-fs-banner {
    background: linear-gradient(135deg, var(--fs-color) 0%, color-mix(in srgb, var(--fs-color) 70%, #000) 100%);
    border-radius: 14px;
    overflow: hidden;
    margin: 24px 0;
}

.sa-fs-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 36px;
    gap: 24px;
}

.sa-fs-banner-left { color: #fff; }
.sa-fs-banner-eyebrow { font-size: 12px; font-weight: 600; opacity: .8; text-transform: uppercase; letter-spacing: 0.08em; }
.sa-fs-banner-title { font-size: 24px; font-weight: 800; margin: 6px 0 8px; }

.sa-fs-banner-cta {
    display: inline-block;
    background: #fff;
    color: var(--fs-color);
    font-weight: 700;
    font-size: 13px;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    margin-top: 12px;
    transition: opacity 0.15s;
}

.sa-fs-banner-cta:hover { opacity: .9; }

.sa-fs-banner-countdown {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sa-fs-bc-unit {
    background: rgba(255,255,255,.15);
    color: #fff;
    text-align: center;
    padding: 12px 16px;
    border-radius: 8px;
    min-width: 64px;
}

.sa-fs-bc-unit span { display: block; font-size: 30px; font-weight: 800; line-height: 1; }
.sa-fs-bc-unit small { font-size: 10px; opacity: .8; text-transform: uppercase; }
.sa-fs-bc-sep { color: rgba(255,255,255,.7); font-size: 28px; font-weight: 700; margin-bottom: 16px; }

@media (max-width: 600px) {
    .sa-fs-banner-inner { flex-direction: column; padding: 20px; }
    .sa-fs-banner-title { font-size: 18px; }
    #sa-fs-sticky-bar { padding: 6px 12px; }
    .sa-fs-bar-text { font-size: 11px; }
}

/* ─── Social Proof: Viewer Counter ─── */
.sa-fs-viewers {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin: 8px 0;
    font-size: 13px;
    color: #475569;
}

.sa-fs-viewers-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    flex-shrink: 0;
    animation: sa-fs-pulse 1.5s infinite;
}

@keyframes sa-fs-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.4); }
    50%      { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}

.sa-fs-viewer-count { color: var(--fs-color); }

/* ─── Exit Intent Popup ─── */
#sa-fs-exit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#sa-fs-exit-popup {
    background: #fff;
    border-radius: 16px;
    padding: 36px 32px;
    max-width: 460px;
    width: 100%;
    text-align: center;
    position: relative;
    border-top: 5px solid var(--fs-color);
    animation: sa-fs-popup-in .25s ease;
}

@keyframes sa-fs-popup-in {
    from { transform: scale(.92); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.sa-fs-exit-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #94a3b8;
    line-height: 1;
}

.sa-fs-exit-badge {
    display: inline-block;
    background: var(--fs-color);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.sa-fs-exit-title { font-size: 22px; font-weight: 800; margin: 0 0 8px; color: #1e293b; }
.sa-fs-exit-text  { font-size: 14px; color: #64748b; margin: 0 0 20px; }

.sa-fs-exit-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.sa-fs-et-unit {
    background: var(--fs-color);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    min-width: 58px;
    text-align: center;
}

.sa-fs-et-unit span { display: block; font-size: 24px; font-weight: 700; line-height: 1; }
.sa-fs-et-unit small { font-size: 10px; opacity: .85; text-transform: uppercase; }
.sa-fs-et-sep { font-size: 22px; font-weight: 700; color: var(--fs-color); margin-bottom: 14px; }

.sa-fs-exit-btn {
    display: block;
    background: var(--fs-color);
    color: #fff;
    padding: 14px 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 10px;
    transition: opacity .15s;
}

.sa-fs-exit-btn:hover { opacity: .9; color: #fff; }

.sa-fs-exit-dismiss {
    background: none;
    border: none;
    font-size: 12px;
    color: #94a3b8;
    cursor: pointer;
    text-decoration: underline;
}

/* ─── Shop countdown bar ─── */
.sa-fs-shop-bar {
    background: #fff8f8;
    border: 1.5px solid var(--fs-color);
    border-radius: 8px;
    padding: 10px 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.sa-fs-shop-bar-text { font-size: 13px; font-weight: 600; color: var(--fs-color); }

.sa-fs-shop-bar-timer {
    font-size: 13px;
    color: #475569;
}

.sa-fs-shop-bar-timer strong { color: var(--fs-color); font-size: 15px; }

/* ─── Teaser countdown ─── */
.sa-fs-teaser {
    background: linear-gradient(135deg, color-mix(in srgb, var(--fs-color) 8%, #fff), color-mix(in srgb, var(--fs-color) 15%, #fff));
    border: 2px solid var(--fs-color);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 0 0 28px;
}

.sa-fs-teaser-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.sa-fs-teaser-eyebrow { font-size: 11px; font-weight: 700; color: var(--fs-color); text-transform: uppercase; letter-spacing: .08em; }
.sa-fs-teaser-text    { font-size: 17px; font-weight: 700; color: #1e293b; margin: 4px 0; }
.sa-fs-teaser-meta    { font-size: 12px; color: #64748b; }

.sa-fs-teaser-countdown {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.sa-fs-tc-unit {
    background: var(--fs-color);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    text-align: center;
    min-width: 50px;
}

.sa-fs-tc-unit span { display: block; font-size: 20px; font-weight: 700; line-height: 1; }
.sa-fs-tc-unit small { font-size: 10px; opacity: .85; text-transform: uppercase; }
.sa-fs-tc-sep { font-size: 18px; font-weight: 700; color: var(--fs-color); margin-bottom: 12px; }

/* ─── Wishlist button ─── */
.sa-fs-wl-wrap { margin: 10px 0; }

.sa-fs-wl-btn {
    background: none;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: all .15s;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sa-fs-wl-btn:hover { border-color: var(--fs-color); color: var(--fs-color); }
.sa-fs-wl-btn.sa-fs-wl-active { border-color: var(--fs-color); color: var(--fs-color); background: color-mix(in srgb, var(--fs-color) 8%, #fff); }
.sa-fs-wl-note { font-size: 12px; color: #94a3b8; margin: 4px 0 0; }

@media (max-width: 600px) {
    #sa-fs-exit-popup { padding: 28px 20px; }
    .sa-fs-exit-title { font-size: 18px; }
    .sa-fs-teaser-inner { flex-direction: column; align-items: flex-start; }
}