/* ===== CAMPOS DE EMAIL PREENCHIDOS ===== */

/* Campo de email preenchido automaticamente pelo sistema de IP */
input[type="email"].newsletter-prefilled,
input[type="email"].newsletter-prefilled:focus {
    background-color: #eff6ff !important;
    border-color: #3b82f6 !important;
    color: #1e40af !important;
    font-weight: 500 !important;
}

/* Garantir que o placeholder seja visível */
input[type="email"].newsletter-prefilled::placeholder {
    color: #93c5fd !important;
    opacity: 0.7 !important;
}

/* Estilo para todos os campos de email em formulários de newsletter */
input[type="email"] {
    color: #1f2937 !important;
}

/* Em modo escuro do footer */
footer input[type="email"] {
    color: #ffffff !important;
}

footer input[type="email"].newsletter-prefilled {
    color: #1e40af !important;
    background-color: #eff6ff !important;
}

/* ===== BOTÃO JÁ INSCRITO ===== */

/* Botão quando o usuário já está inscrito */
button.newsletter-already-subscribed,
button.newsletter-already-subscribed:hover {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background: linear-gradient(to right, #10b981, #059669) !important;
}

/* Animação sutil para indicar que está inscrito */
button.newsletter-already-subscribed {
    animation: pulse-subtle 2s ease-in-out infinite;
}

@keyframes pulse-subtle {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 0.85;
    }
}

/* ===== BOTÕES DE AÇÃO ===== */

/* Botão Salvar Preferências */
.save-preferences {
    display: flex !important;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 400px;
    height: 50px;
    transition: all 0.3s ease;
    will-change: transform;
}

.save-preferences:hover {
    transform: scale(1.02);
}

.save-preferences:active {
    transform: scale(0.98);
}

/* Botão Voltar (Setinha) */
.back-btn {
    display: flex !important;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 50px;
    width: 50px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    will-change: transform;
}

.back-btn:hover {
    transform: scale(1.05);
}

.back-btn:active {
    transform: scale(0.95);
}

/* Botão Confirmar Descadastro */
.unsubscribe-btn {
    display: flex !important;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 400px;
    height: 50px;
    margin: 0 auto;
    transition: all 0.3s ease;
    will-change: transform;
}

.unsubscribe-btn:hover {
    transform: translateY(-2px);
}

.unsubscribe-btn:active {
    transform: translateY(0);
}

/* Botões Secundários (Ajustar Preferências e Voltar ao Site) */
.secondary-btn {
    display: flex !important;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 45px;
    transition: all 0.3s ease;
    will-change: transform;
}

.secondary-btn:hover {
    transform: translateY(-1px);
}

.secondary-btn:active {
    transform: translateY(0);
}

/* Container dos botões */
.flex.gap-2.border-t,
.flex.gap-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 1rem;
}

/* ===== RESPONSIVIDADE MOBILE ===== */

/* Tablets e Mobile Grande (até 768px) */
@media (max-width: 768px) {
    .save-preferences,
    .unsubscribe-btn {
        max-width: 100%;
        height: 48px;
        font-size: 0.875rem;
    }

    .back-btn {
        height: 48px;
        width: 48px;
    }

    .secondary-btn {
        height: 42px;
        font-size: 0.8125rem;
    }

    /* Ajustar padding dos containers */
    #preferences-card .p-6,
    #unsubscribe-card .p-6 {
        padding: 1.25rem !important;
    }

    /* Cards de preferências mais compactos */
    .group.flex.items-center {
        padding: 0.625rem !important;
    }
}

/* Mobile Pequeno (até 480px) */
@media (max-width: 480px) {
    .save-preferences,
    .unsubscribe-btn {
        height: 44px;
        font-size: 0.8125rem;
        padding: 0.5rem 0.625rem;
    }

    .back-btn {
        height: 44px;
        width: 44px;
    }

    .secondary-btn {
        height: 40px;
        font-size: 0.75rem;
        padding: 0.5rem 0.625rem;
    }

    /* Reduzir espaçamentos */
    .flex.gap-2 {
        gap: 0.375rem !important;
    }

    .flex.gap-3 {
        gap: 0.5rem !important;
    }

    /* Headers mais compactos */
    #preferences-card h1,
    #unsubscribe-card h1 {
        font-size: 1.25rem !important;
    }

    #preferences-card p,
    #unsubscribe-card p {
        font-size: 0.8125rem !important;
    }

    /* Cards de preferências ainda mais compactos */
    .group.flex.items-center {
        padding: 0.5rem !important;
        gap: 0.5rem !important;
    }

    .group.flex.items-center .w-9 {
        width: 2rem !important;
        height: 2rem !important;
    }

    .group.flex.items-center span {
        font-size: 0.8125rem !important;
    }

    .group.flex.items-center p {
        font-size: 0.6875rem !important;
    }

    /* Badges menores */
    .px-1\.5 {
        padding-left: 0.375rem !important;
        padding-right: 0.375rem !important;
        font-size: 0.625rem !important;
    }
}

/* Mobile Extra Pequeno (até 360px) */
@media (max-width: 360px) {
    .save-preferences,
    .unsubscribe-btn {
        height: 42px;
        font-size: 0.75rem;
    }

    .back-btn {
        height: 42px;
        width: 42px;
    }

    .secondary-btn {
        height: 38px;
        font-size: 0.6875rem;
    }

    /* Ocultar texto dos botões secundários em telas muito pequenas */
    .secondary-btn span {
        display: none;
    }

    /* Mostrar apenas ícones */
    .secondary-btn i {
        margin: 0 !important;
    }
}