/**
 * Countdown - Responsive Styles
 * Mobile e tablet para todas as variantes
 */

/* Tablet */
@media (max-width: 768px) {
    .sslp-countdown {
        padding: 2.5rem 0;
    }

    .sslp-countdown__title {
        font-size: 1.75rem;
    }

    .sslp-countdown__timer {
        gap: 0.5rem;
    }

    .sslp-countdown__block {
        min-width: 70px;
        padding: 1rem 0.75rem;
    }

    .sslp-countdown__value {
        font-size: 2rem;
    }

    .sslp-countdown__separator {
        font-size: 1.5rem;
        padding-top: 0.75rem;
    }

    .sslp-countdown__text {
        font-size: 1rem;
    }

    .sslp-countdown__discount {
        font-size: 1.25rem;
    }

    .sslp-countdown__cta {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }

    /* Variante H específico */
    .sslp-countdown.variant-h .sslp-countdown__cta {
        font-size: 1.125rem;
        padding: 1rem 2rem;
    }

    .sslp-countdown.variant-h .sslp-countdown__discount {
        font-size: 1.75rem;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .sslp-countdown {
        padding: 2rem 1rem;
    }

    .sslp-countdown__badge {
        font-size: 0.75rem;
        padding: 0.375rem 1rem;
    }

    .sslp-countdown__title {
        font-size: 1.5rem;
        margin-bottom: 0.375rem;
    }

    .sslp-countdown__subtitle {
        font-size: 0.9375rem;
        margin-bottom: 1.5rem;
    }

    .sslp-countdown__timer {
        gap: 0.375rem;
        flex-wrap: nowrap;
    }

    .sslp-countdown__block {
        min-width: 55px;
        padding: 0.75rem 0.5rem;
        border-radius: 8px;
    }

    .sslp-countdown__value {
        font-size: 1.5rem;
    }

    .sslp-countdown__label {
        font-size: 0.625rem;
        margin-top: 0.25rem;
    }

    .sslp-countdown__separator {
        font-size: 1.25rem;
        padding-top: 0.5rem;
    }

    .sslp-countdown__text {
        font-size: 0.9375rem;
        margin-bottom: 1rem;
    }

    .sslp-countdown__discount {
        font-size: 1.125rem;
        padding: 0.375rem 1rem;
        margin-bottom: 1rem;
    }

    .sslp-countdown__cta {
        width: 100%;
        justify-content: center;
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }

    .sslp-countdown__urgency {
        font-size: 0.75rem;
    }

    /* Variante B - timer com background */
    .sslp-countdown.variant-b .sslp-countdown__timer {
        padding: 1rem;
    }

    /* Variante C - mais espaço */
    .sslp-countdown.variant-c {
        padding: 3rem 1rem;
    }

    .sslp-countdown.variant-c .sslp-countdown__timer {
        gap: 0.75rem;
    }

    /* Variante F - gamificado */
    .sslp-countdown.variant-f .sslp-countdown__block:hover {
        transform: none;
    }

    .sslp-countdown.variant-f .sslp-countdown__cta::after {
        content: none;
    }

    /* Variante G - trust items */
    .sslp-countdown.variant-g .sslp-countdown__timer {
        padding: 1.25rem;
    }

    .sslp-countdown.variant-g .sslp-countdown__trust {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Variante H - urgência */
    .sslp-countdown.variant-h .sslp-countdown__title {
        font-size: 1.5rem;
        letter-spacing: 1px;
    }

    .sslp-countdown.variant-h .sslp-countdown__value {
        font-size: 2rem;
    }

    .sslp-countdown.variant-h .sslp-countdown__discount {
        font-size: 1.5rem;
        transform: none;
    }

    .sslp-countdown.variant-h .sslp-countdown__cta {
        font-size: 1rem;
        padding: 1rem 2rem;
        letter-spacing: 1px;
    }

    .sslp-countdown.variant-h .sslp-countdown__scarcity {
        flex-direction: column;
        padding: 0.5rem 1rem;
    }

    .sslp-countdown.variant-h .sslp-countdown__scarcity-bar {
        width: 100%;
        max-width: 200px;
    }

    /* Desabilitar animações no mobile para performance */
    @media (prefers-reduced-motion: reduce) {
        .sslp-countdown.variant-h .sslp-countdown__badge,
        .sslp-countdown.variant-h .sslp-countdown__block,
        .sslp-countdown.variant-h .sslp-countdown__cta,
        .sslp-countdown.variant-h .sslp-countdown__urgency {
            animation: none;
        }
    }
}

/* Extra small */
@media (max-width: 360px) {
    .sslp-countdown__block {
        min-width: 48px;
        padding: 0.625rem 0.375rem;
    }

    .sslp-countdown__value {
        font-size: 1.25rem;
    }

    .sslp-countdown__separator {
        font-size: 1rem;
    }
}