@import url("base.css");
@import url("layout.css");
@import url("components.css");
@import url("whatsapp.css");
@import url("responsive.css");

/* Conteúdo centralizado — mobile first */
.seo-content,
.comparison-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    text-align: center;
}

.comparison-table {
    margin-left: auto;
    margin-right: auto;
}

/* Animação de Fade-in */
.fade-in {
    animation: fadeInSlide 0.5s ease forwards;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fade-in {
        animation: none;
        opacity: 1;
    }
}

/* Efeito de Brilho nos botões padrão */
.link-button:not(.daily-deal):hover {
    background: var(--card-strong);
    border-color: var(--accent);
    box-shadow: 0 0 1.25rem var(--accent-soft),
        inset 0 0 0.5rem var(--accent-soft);
}

/* Filtros */
.filter-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    width: 100%;
    min-width: 0;
}

.filter-btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
    min-height: var(--touch-min);
    background: var(--card-strong);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    cursor: pointer;
    font-size: clamp(0.8125rem, 2.5vw, 0.875rem);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.filter-btn.active {
    background: var(--accent);
    color: #000;
    font-weight: 700;
    border-color: var(--accent);
}

.filter-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Ofertas Encerradas */
.offer-ended {
    filter: grayscale(1);
    opacity: 0.6;
    pointer-events: none;
    border: 1px dashed var(--border) !important;
}

.offer-ended::after {
    content: '🚫' !important;
}

/* Tabela Comparativa SEO — scroll contido, sem vazar página */
.comparison-container {
    margin-top: 2rem;
    background: var(--card);
    border-radius: var(--radius-card);
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid var(--border);
    overflow: hidden;
}

.table-responsive {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin-top: 0.75rem;
}

.comparison-table {
    width: 100%;
    min-width: 17.5rem;
    border-collapse: collapse;
    font-size: clamp(0.75rem, 2.4vw, 0.875rem);
    text-align: center;
}

.comparison-table th,
.comparison-table td {
    padding: 0.625rem 0.5rem;
    border-bottom: 1px solid var(--border);
    white-space: normal;
    word-break: break-word;
}

.comparison-table th {
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
}

/* Textos dos botões */
.btn-text {
    display: block;
    width: 100%;
    font-size: clamp(0.9375rem, 2.8vw, 1.05rem);
    margin-bottom: 0.125rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.btn-sub {
    display: block;
    width: 100%;
    font-size: clamp(0.75rem, 2.4vw, 0.85rem);
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* SEO content */
.seo-content {
    margin-top: 2rem;
    padding-inline: 0;
}

.seo-content>p {
    font-size: clamp(0.875rem, 2.6vw, 0.95rem);
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0.5rem 0 0;
}

.faq-section {
    margin-top: 1.5rem;
    text-align: left;
    max-width: 100%;
}

.faq-section details {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
}

.faq-section summary {
    cursor: pointer;
    font-weight: 600;
    min-height: var(--touch-min);
    display: flex;
    align-items: center;
}

.faq-section p {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Oferta do dia — overflow contido (corrige scroll horizontal) */
.daily-deal {
    background: linear-gradient(135deg, #121212 0%, #1a1a1a 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    position: relative;
    overflow: visible;
    /* ESTUDO: 'visible' permite que elementos filhos (badge) saiam da borda sem serem cortados */
    isolation: isolate;
    transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.3);
    padding-top: 1.35rem !important;
    padding-bottom: 0.8rem !important;
}

.daily-deal::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,
            transparent,
            rgba(255, 215, 0, 0.05),
            transparent);
    transform: skewX(-25deg);
    pointer-events: none;
    animation: shimmer 6s infinite;
    clip-path: inset(0 round var(--radius-btn));
    /* ESTUDO: Como o overflow é visible, o clip-path limita o brilho apenas à área interna do botão */
    will-change: left;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    20% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .daily-deal::before {
        animation: none;
        display: none;
    }

    .badge-discount {
        animation: none;
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.04);
        box-shadow: 0 0.375rem 0.9375rem rgba(255, 136, 0, 0.45);
    }
}

.daily-deal:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 215, 0, 0.5) !important;
    box-shadow: 0 0.5rem 1.875rem rgba(255, 215, 0, 0.12);
}

.badge-discount {
    background: linear-gradient(135deg, #ffd700 0%, #ff8800 100%);
    color: #000;
    font-size: clamp(0.5625rem, 1.8vw, 0.65rem);
    font-weight: 900;
    padding: 0.125rem 0.625rem;
    border-radius: 50px;
    text-transform: uppercase;
    position: absolute;
    top: -0.5rem;
    /* ESTUDO: Valor negativo move o badge para cima, criando o efeito "metade para fora" */
    left: 50%;
    max-width: calc(100% - 1.5rem);
    transform: translateX(-50%);
    letter-spacing: 0.06em;
    box-shadow: 0 0.25rem 0.625rem rgba(255, 136, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.3);
    white-space: nowrap;
    z-index: 2;
    animation: pulse 2.5s infinite ease-in-out;
}