/* AIBurner — offer urgency block.
 *
 * The countdown, and nothing else. Extracted from product.ejs so the home
 * page's product cards render the identical component instead of a second,
 * drifting copy. */

.offer-urgency {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(255, 199, 0, 0.08);
    border: 1px solid rgba(255, 199, 0, 0.28);
    padding: 12px 14px;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

.offer-deadline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}
.offer-deadline-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.offer-countdown {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.05rem;
    color: #ffc900;
    /* Tabular figures stop the row jittering as the seconds tick over. */
    font-variant-numeric: tabular-nums;
}
.offer-countdown.is-ended {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Time remaining, as a bar. Drains across the campaign window (created_at ->
   expires_at) rather than counting buyers: a clock cannot be topped up, so
   unlike the claimed-count bar this one can only ever move one way. */
.offer-timebar {
    height: 5px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.offer-timebar-fill {
    height: 100%;
    /* Starts at zero and is set by JS on first tick, so a blocked script leaves
       an empty track instead of a bar frozen at 100%. */
    width: 0;
    background: linear-gradient(90deg, #ffc900 0%, #ff90e8 100%);
    border-radius: var(--radius-full);
    transition: width 0.4s ease;
}
/* Final day: drop the pink and go amber-to-red. The bar is a sliver by then,
   so colour is doing the work the length no longer can. */
.offer-timebar-fill.is-urgent {
    background: linear-gradient(90deg, #ff9b3d 0%, #ff5470 100%);
}

/* Card variant: same component, tightened for the home page grid where it sits
   between the price and the CTA rather than filling a hero column. */
.offer-urgency-compact {
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: var(--space-sm);
}
.offer-urgency-compact .offer-deadline-label { font-size: 0.78rem; }
.offer-urgency-compact .offer-countdown { font-size: 0.95rem; }
.offer-urgency-compact .offer-timebar { height: 4px; }