/* Limited Time Offer badge — shared by every course card (Home, Categories,
   Course Listings, Course Details, Search Results, User Portal). Loaded ONCE
   per layout (not duplicated per-card) since app/Views/public/partials/
   offer_countdown.php is included once per course. */

.offer-box {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    background: linear-gradient(135deg, #dc2626, #991b1b);
    color: #fff;
    padding: 7px 11px;
    border-radius: 8px;
    box-shadow: 0 3px 12px rgba(220,38,38,.35);
    font-family: inherit;
    max-width: 100%;
}

.offer-box-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    opacity: .95;
    white-space: nowrap;
}

.offer-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fef08a;
    flex-shrink: 0;
    animation: offer-pulse 1.4s ease-in-out infinite;
}

@keyframes offer-pulse {
    0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(254,240,138,.55); }
    50%      { transform: scale(1.2); opacity: .75; box-shadow: 0 0 0 4px rgba(254,240,138,0); }
}

.offer-box-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.offer-discount-chip {
    background: #fff;
    color: #b91c1c;
    font-size: 11px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 5px;
    letter-spacing: .2px;
    white-space: nowrap;
    flex-shrink: 0;
}

.offer-countdown-text {
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    letter-spacing: .2px;
    display: inline-block;
}

/* Re-triggered every second by JS (remove class, reflow, re-add) so each
   tick gets a brief, smooth pulse instead of an abrupt text swap. */
.offer-countdown-text.tick {
    animation: offer-tick-pulse .35s ease-out;
}
@keyframes offer-tick-pulse {
    0%   { transform: scale(1.14); opacity: .75; }
    100% { transform: scale(1); opacity: 1; }
}

/* Compact variant for tight spaces (e.g. small card grids) */
.offer-box.offer-box-sm { padding: 5px 8px; gap: 2px; }
.offer-box.offer-box-sm .offer-box-label { font-size: 8.5px; }
.offer-box.offer-box-sm .offer-countdown-text { font-size: 10.5px; }
.offer-box.offer-box-sm .offer-discount-chip { font-size: 9.5px; padding: 1px 5px; }

/* ═══════════════════════════════════════════════════════════════
   THUMBNAIL corner variant — pinned to the top-right of a course
   card's image (parent must be position:relative). Keeps the card
   height unchanged: the label + discount chip + live countdown all
   collapse into one compact pill instead of taking body space.
   ═══════════════════════════════════════════════════════════════ */
.offer-box.offer-box-thumb {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    padding: 6px 10px;
    gap: 3px;
    border-radius: 8px;
    max-width: calc(100% - 24px);
}
.offer-box.offer-box-thumb .offer-box-label { font-size: 8.5px; gap: 4px; }
.offer-box.offer-box-thumb .offer-countdown-text { font-size: 10.5px; }
.offer-box.offer-box-thumb .offer-discount-chip { font-size: 9px; padding: 1px 6px; }

/* Plain discount / free pill shown on a thumbnail when no Limited Time
   Offer countdown is active for that course — same top-right slot, kept
   visually consistent (pill shape, gradient, shadow) with .offer-box so
   the corner treatment always looks uniform across every course card. */
.course-discount-badge,
.course-free-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 20px;
    letter-spacing: .3px;
    white-space: nowrap;
}
.course-discount-badge {
    background: linear-gradient(135deg, #dc2626, #991b1b);
    box-shadow: 0 3px 10px rgba(220,38,38,.4);
}
.course-free-badge {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 3px 10px rgba(5,150,105,.4);
}