/* ============================================================================
 * promo_banner.css — Visual styling for per-product SPECIAL OFFER banners
 * ============================================================================
 *
 * SCOPE
 *   Styles the <div class="v2-promo-banner"> blocks that Joomla
 *   custom-HTML modules render into .v2fp-offer in flypage_v2.php.
 *   See promo_banner.js for the full HTML structure the admin pastes.
 *
 * VISUAL DESIGN
 *   • Gradient orange→yellow background that subtly shifts every 4s
 *     (animation: v2promoShift). Enough motion to draw the eye
 *     without being annoying.
 *   • Three "glassmorphism" countdown boxes (translucent white with
 *     blur) for ΜΕΡΕΣ / ΩΡΕΣ / ΛΕΠΤΑ.
 *   • When < 24h remaining, .v2-promo-urgent kicks in (added by JS):
 *     gradient switches to red, faster pulse, signals urgency.
 *
 * SCOPED CAREFULLY
 *   All rules prefixed with .mobile_content so they never leak to
 *   non-V2 templates (e.g. legacy mobile fallback / admin pages).
 *
 * NOTE ON GPU PERFORMANCE
 *   The gradient animation runs on a single 200% background-size
 *   shift — cheap on the GPU. Filter / box-shadow are static (no
 *   per-frame cost). will-change is NOT applied because the animation
 *   is cosmetic and we don't want it to permanently steal a GPU layer.
 *
 * Last reviewed: 2026-05-12
 * ============================================================================
 */

/* === GRADIENT SHIFT KEYFRAMES ============================================
   Used by both the default banner and the urgent (<24h) variant. */
@keyframes v2promoShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* === CSS CUSTOM PROPERTIES (defaults) ====================================
   All font sizes and key paddings are exposed as CSS variables so the
   admin can override per-banner from the module HTML <style> attribute
   without touching this CSS file. Each `var(--x, FALLBACK)` falls back
   to the default below if the variable isn't set.

   To override per-banner, on the module HTML banner div add:
       style="--v2promo-title-size:18px; --v2promo-pad:12px 14px;"
   ======================================================================= */

/* === OUTER BANNER ========================================================
   The .v2-promo-banner div sits inside .v2fp-offer which sits inside
   .v2fp-wrap. Flex order in mobile_v2.css places .v2fp-offer just
   above the price row (order: 6, same as meta-row, DOM-after). */
.mobile_content .v2-promo-banner {
    position: relative;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 50%, #ffb627 100%);
    background-size: 200% 200%;
    animation: v2promoShift 4s ease infinite;
    color: #fff;
    padding: var(--v2promo-pad, 14px 16px);
    border-radius: var(--v2promo-radius, 14px);
    margin: 8px 0 12px;
    text-align: center;
    box-shadow:
        0 4px 14px rgba(255, 107, 53, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    overflow: hidden;
}

/* === TOP TAG: "⚡ SPECIAL OFFER ⚡" ====================================== */
.mobile_content .v2-promo-banner .v2-promo-tag {
    font-size: var(--v2promo-tag-size, 11px);
    font-weight: 700;
    letter-spacing: var(--v2promo-tag-spacing, 2.5px);
    opacity: 0.95;
    margin-bottom: 3px;
}

/* === BIG TITLE: "ΠΡΟΛΑΒΑΙΝΕΤΕ!" ========================================= */
.mobile_content .v2-promo-banner .v2-promo-title {
    font-size: var(--v2promo-title-size, 20px);
    font-weight: 900;
    letter-spacing: 1px;
    margin: 4px 0 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* === COUNTDOWN ROW — three glassmorphism boxes ============================ */
.mobile_content .v2-promo-banner .v2-promo-countdown {
    display: flex;
    justify-content: center;
    gap: var(--v2promo-gap, 8px);
    margin: 6px 0 4px;
}

.mobile_content .v2-promo-banner .v2-promo-unit {
    background: rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: var(--v2promo-unit-pad, 6px 9px);
    min-width: var(--v2promo-unit-min, 48px);
}

/* Each .v2-promo-unit contains a <span class="v2-promo-d/h/m"> with
   the big number, and a <label> with the unit name. */
.mobile_content .v2-promo-banner .v2-promo-unit span {
    display: block;
    font-size: var(--v2promo-num-size, 19px);
    font-weight: 900;
    line-height: 1;
}

.mobile_content .v2-promo-banner .v2-promo-unit label {
    display: block;
    font-size: var(--v2promo-label-size, 9px);
    letter-spacing: 1.5px;
    opacity: 0.85;
    margin-top: 2px;
}

/* === BOTTOM "ΜΕΧΡΙ ..." LINE ============================================= */
.mobile_content .v2-promo-banner .v2-promo-until {
    font-size: var(--v2promo-until-size, 10.5px);
    font-weight: 600;
    opacity: 0.95;
    margin-top: 6px;
}

.mobile_content .v2-promo-banner .v2-promo-until strong {
    font-weight: 800;
}

/* === URGENT MODE (< 24h remaining) =======================================
   JS adds class .v2-promo-urgent. We switch to a red gradient and
   crank the animation a bit faster for a subtle pulse. */
.mobile_content .v2-promo-banner.v2-promo-urgent {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 50%, #f87171 100%);
    background-size: 200% 200%;
    animation: v2promoShift 2.5s ease infinite;
    box-shadow:
        0 4px 14px rgba(220, 38, 38, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}