/* ============================================================
   PROMO BANNER — promo-banner.css
   Styles for the countdown timer inside the banner.
   The banner base styles live in main.css.
   ============================================================ */

#cc-countdown {
    display: inline-flex;
    gap: 4px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 15px;
}

.cc-countdown__unit {
    background: rgba(26,46,68,0.15);
    border-radius: 4px;
    padding: 1px 5px;
    min-width: 28px;
    text-align: center;
    font-feature-settings: "tnum";
}

.cc-countdown__sep {
    font-weight: 700;
    opacity: 0.6;
    align-self: center;
    margin-top: -2px;
}

@media (max-width: 480px) {
    .cc-promo-banner {
        flex-direction: column;
        gap: 8px;
        padding: 12px 40px 12px 12px;
        min-height: auto;
    }
    .cc-promo-banner__text {
        font-size: 12px;
        line-height: 1.5;
    }
}