/* Estilos para o container do buscador de CEP */
.cep-search-container {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
    background-color: #f9f9f9;
    max-width: 600px;
    margin: 20px auto;
    font-family: sans-serif;
}

.cep-search-container h3 {
    margin-top: 0;
}

#cep-form {
    display: flex;
    gap: 10px;
}

#cep-form input[type="text"] {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

#cep-form button {
    padding: 10px 20px;
    background-color: #0073aa; /* Cor padrão do WordPress */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

#cep-form button:hover {
    background-color: #005f8c;
}

/* Estilos para a área de resultados */
#cep-results {
    margin-top: 20px;
}

.cep-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #fff;
    margin-bottom: 10px;
}

.cep-info {
    line-height: 1.6;
}

.copy-cep-btn {
    padding: 8px 12px;
    background-color: #2271b1;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.copy-cep-btn:hover {
    background-color: #1e6297;
}

.cep-error {
    color: #d9534f;
    font-weight: bold;
}

/* ========================================= */
/* ESTILOS PARA MELHORAR LAYOUT EM CELULARES */
/* ========================================= */

/* Aplica estas regras em telas com largura máxima de 600px */
@media (max-width: 600px) {

    /* 1. Ajustes no Formulário de Busca */
    #cep-form {
        flex-direction: column; /* Faz o formulário empilhar verticalmente */
        align-items: stretch;   /* Estica os itens para ocupar a largura total */
    }

    #cep-form button {
        margin-top: 10px; /* Adiciona um espaço entre o campo e o botão */
    }

    /* 2. Ajustes nos Cartões de Resultado */
    .cep-result-item {
        flex-direction: column; /* Faz o conteúdo do cartão empilhar */
        align-items: flex-start; /* Alinha o texto à esquerda */
        padding: 15px;
    }

    .cep-info {
        margin-bottom: 15px; /* Adiciona um espaço entre o texto e o novo botão */
        line-height: 1.7;    /* Melhora a legibilidade com mais espaço entre linhas */
    }

    .copy-cep-btn {
        width: 100%; /* Faz o botão de copiar ocupar toda a largura do cartão */
        padding: 12px;   /* Deixa o botão maior e mais fácil de tocar */
        font-size: 16px;
        text-align: center;
    }
}

/* Estilo para a mensagem de aviso de bairro não encontrado */
.cep-warning {
    display: inline-block;
    margin-top: 8px;
    font-weight: 500;
    color: #b94a0a; /* Um tom de laranja/vermelho para alerta */
    font-size: 14px;
    line-height: 1.5;
}