/* Conteúdo do my-cep-lookup.css (igual ao da versão 2.0.0) */
.my-cep-lookup-container {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
}

.my-cep-lookup-container h3 {
    text-align: center;
    color: #333;
    margin-bottom: 15px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 10px;
}

.my-cep-section, .my-address-section {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap; /* Permite que os itens quebrem linha */
    gap: 10px;
    align-items: center;
    position: relative; /* Para posicionar as sugestões */
}

/* Ajuste para inputs e selects */
.my-cep-input, .my-address-input, #my-state-select, #my-city-select {
    flex: 1 1 calc(50% - 5px); /* Dois itens por linha, com gap de 10px */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
    min-width: 150px; /* Garante um tamanho mínimo */
}

.my-cep-input {
    flex: 1 1 200px; /* O CEP pode ser um pouco maior */
}

.my-cep-btn, .my-address-btn {
    flex: 0 0 auto; /* Não cresce nem encolhe, mantém o tamanho */
    padding: 10px 15px;
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    align-self: flex-start; /* Alinha o botão ao topo se os inputs forem maiores */
}

.my-cep-btn:hover, .my-address-btn:hover {
    background-color: #005177;
}

.my-cep-btn:disabled, .my-address-btn:disabled,
.my-address-input:disabled, #my-state-select:disabled, #my-city-select:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    border-color: #aaaaaa;
}


/* Estilos para as sugestões de endereço */
.my-address-suggestions {
    position: absolute;
    top: 100%; /* Abaixo do campo de entrada */
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: #fff;
    border: 1px solid #ddd;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 0 0 4px 4px;
    display: none; /* Escondido por padrão */
}

.my-suggestions-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.my-suggestion-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #333;
}

.my-suggestion-item:last-child {
    border-bottom: none;
}

.my-suggestion-item:hover {
    background-color: #f0f0f0;
}

.my-suggestion-item.my-loading {
    background-color: #f9f9f9;
    color: #666;
    text-align: center;
    cursor: default;
}
.my-suggestion-item.my-loading::before {
    content: " ";
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-top-color: #0073aa;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    vertical-align: middle;
    margin-right: 5px;
}

.my-suggestion-item.error {
    color: red;
    background-color: #ffe0e0;
    cursor: default;
}


/* Estilo para o spinner no input */
.my-address-input.loading-spinner {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%230073AA" d="M12 2A10 10 0 0 1 22 12h-2A8 8 0 0 0 12 4V2z"><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="0.8s" repeatCount="indefinite"/></path></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 35px; /* Para não sobrepor o texto */
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


/* Estilos para os resultados finais */
.my-cep-lookup-result {
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #e9e9e9;
    font-size: 15px;
    line-height: 1.6;
}

.my-cep-lookup-result.error {
    background-color: #ffe0e0;
    border-color: #ff9999;
    color: #cc0000;
}

.my-cep-lookup-result.success {
    background-color: #e0ffe0;
    border-color: #99ff99;
    color: #008000;
}

.my-cep-lookup-result.info {
    background-color: #e0e9ff;
    border-color: #99bfff;
    color: #0000cc;
}

.my-cep-lookup-result strong {
    color: #333;
}

/* Responsividade básica */
@media (max-width: 768px) {
    .my-cep-input, .my-address-input, #my-state-select, #my-city-select, .my-cep-btn, .my-address-btn {
        flex: 1 1 100%; /* Todos em uma única coluna em telas menores */
    }
}