/*
 * ============================================
 * 1. ESTILOS DO WIDGET (Versão V4.9 - Bugs Corrigidos)
 * ============================================
 */

 .pxcode-clima-widget {
    /* MUDANÇA: Voltando para display: flex */
    display: flex; 
    flex-direction: column; 
    vertical-align: middle;
    /* background-color: (Vem do inline style) */
    /* color: (Vem do inline style) */
    padding: 10px 15px; 
    border-radius: 8px; 
    font-family: Arial, sans-serif;
    box-sizing: border-box;
    width: 100%; 
    cursor: default;
    overflow: hidden; 
    position: relative;
    transition: all 0.3s ease-in-out;
}

.pxcode-clima-widget:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    transform: translateY(-3px); 
    filter: brightness(90%); /* Escurece o fundo no hover */
}

/* PARTE SUPERIOR (sempre visível) */
.pxcode-clima-main-info {
    display: flex;
    align-items: center;
    width: 100%;
}

.pxcode-clima-icon {
    margin-right: 10px; 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; 
}

.pxcode-clima-icon img {
    width: 50px; 
    height: 50px;
    object-fit: contain; 
}

/* Aplica o filtro BRANCO apenas se for o ícone padrão da API */
.pxcode-clima-icon img.pxcode-icon-default {
    filter: brightness(0) invert(1);
}

/* NÃO aplica filtro se for um ícone da biblioteca de mídia */
.pxcode-clima-icon img.pxcode-icon-media {
    filter: none;
}


.pxcode-clima-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex-grow: 1; 
    overflow: hidden; 
}

/* Layout Mín/Máx (lado-a-lado) */
.pxcode-clima-temps {
    font-size: 1.2rem; 
    font-weight: 700; 
    white-space: nowrap; 
    margin-bottom: 4px;
    display: flex; 
    flex-direction: row; 
    align-items: center;
    justify-content: space-between; 
}

.pxcode-clima-temps span {
    display: flex;
    align-items: center;
}

.pxcode-clima-temps span:first-child {
    margin-right: 8px; 
}
.pxcode-clima-temps span::before {
    font-size: 0.8em; 
    margin-right: 3px;
    vertical-align: middle;
}

/* Estilo do ícone de localização */
.pxcode-clima-location {
    font-size: 0.9rem; 
    font-weight: 500;
    white-space: nowrap;
    display: flex;
    align-items: center;
    color: inherit; 
    opacity: 0.9; 
    overflow: hidden;
    text-overflow: ellipsis; 
}

.pxcode-clima-location .dashicons-before::before {
    font-family: 'dashicons'; 
    font-size: 16px; 
    height: 16px;
    width: 16px;
    margin-right: 3px;
    vertical-align: middle;
    color: inherit; 
    opacity: 0.9; 
    font-weight: normal; 
}


/*
 * ============================================
 * 2. ESTILOS DA PARTE EXPANSÍVEL (HOVER)
 * ============================================
 */
.pxcode-clima-expanded-details {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: 1px solid transparent; /* Começa transparente */
    display: flex;
    flex-direction: column; 
    gap: 4px; 
    transition: all 0.3s ease-in-out;
}

.pxcode-clima-widget:hover .pxcode-clima-expanded-details {
    max-height: 200px; 
    opacity: 1; /* MUDANÇA: Garante que o bloco está 100% opaco */
    margin-top: 8px;
    padding-top: 8px;
    border-top-color: currentColor; /* Usa a cor do texto (ex: branco) */
    border-top-style: solid;
    /* MUDANÇA: A opacidade da borda é controlada aqui, não no bloco todo */
    border-opacity: 0.3; /* Isso não é uma propriedade real, vamos usar opacidade no item */
    /* Solução melhor: */
    border-top: 1px solid;
    border-color: currentColor; /* Herda a cor do texto */
    /* A opacidade será controlada pelos itens filhos */
}

/* A borda será o item com opacidade */
.pxcode-clima-widget:hover .pxcode-clima-expanded-details {
    max-height: 200px; 
    opacity: 1; /* MUDANÇA: Bloco 100% opaco */
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid;
    border-color: currentColor; /* Herda a cor do texto (ex: branco) */
    /* MUDANÇA: Esta opacidade é SÓ para a borda */
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    /* A opacidade da borda é um desafio com cores dinâmicas. Vamos usar a opacidade do strong */
}

/* Nova tentativa de borda */
.pxcode-clima-expanded-details {
    ...
    border-top: 1px solid;
    border-color: currentColor;
    opacity: 0;
    border-top-color: transparent; /* Começa transparente */
}
.pxcode-clima-widget:hover .pxcode-clima-expanded-details {
    max-height: 200px;
    opacity: 1; /* Bloco 100% opaco */
    margin-top: 8px;
    padding-top: 8px;
    border-top-color: currentColor; /* Cor do texto */
    /* MUDANÇA: A borda em si terá uma opacidade */
    border-top: 1px solid;
    border-color: inherit;
    /* Vamos simplificar: a borda terá a opacidade de 0.75, como o texto 'strong' */
}

/*
 * ============================================
 * TENTATIVA FINAL DO CSS (V4.9)
 * ============================================
 */

.pxcode-clima-widget {
    display: flex; /* CORRIGIDO: de 'block' para 'flex' */
    flex-direction: column; 
    vertical-align: middle;
    /* ... cores ... */
    padding: 10px 15px; 
    border-radius: 8px; 
    font-family: Arial, sans-serif;
    box-sizing: border-box;
    width: 100%; 
    cursor: default;
    overflow: hidden; 
    position: relative;
    transition: all 0.3s ease-in-out;
}

.pxcode-clima-widget:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    transform: translateY(-3px); 
    filter: brightness(90%); 
}

/* ... (ícones e info principal estão OK) ... */
.pxcode-clima-main-info { display: flex; align-items: center; width: 100%; }
.pxcode-clima-icon { margin-right: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pxcode-clima-icon img { width: 50px; height: 50px; object-fit: contain; }
.pxcode-clima-icon img.pxcode-icon-default { filter: brightness(0) invert(1); }
.pxcode-clima-icon img.pxcode-icon-media { filter: none; }
.pxcode-clima-info { display: flex; flex-direction: column; line-height: 1.2; flex-grow: 1; overflow: hidden; }
.pxcode-clima-temps { font-size: 1.2rem; font-weight: 700; white-space: nowrap; margin-bottom: 4px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.pxcode-clima-temps span { display: flex; align-items: center; }
.pxcode-clima-temps span:first-child { margin-right: 8px; }
.pxcode-clima-temps span::before { font-size: 0.8em; margin-right: 3px; vertical-align: middle; }
.pxcode-clima-location { font-size: 0.9rem; font-weight: 500; white-space: nowrap; display: flex; align-items: center; color: inherit; opacity: 0.9; overflow: hidden; text-overflow: ellipsis; }
.pxcode-clima-location .dashicons-before::before { font-family: 'dashicons'; font-size: 16px; height: 16px; width: 16px; margin-right: 3px; vertical-align: middle; color: inherit; opacity: 0.9; font-weight: normal; }


/*
 * ============================================
 * 2. ESTILOS DA PARTE EXPANSÍVEL (HOVER) - CORRIGIDO
 * ============================================
 */
.pxcode-clima-expanded-details {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: 1px solid transparent; /* Começa com borda transparente */
    display: flex;
    flex-direction: column; 
    gap: 4px; 
    transition: all 0.3s ease-in-out;
}

.pxcode-clima-widget:hover .pxcode-clima-expanded-details {
    max-height: 200px; 
    opacity: 1; /* CORRIGIDO: O bloco é 100% opaco */
    margin-top: 8px;
    padding-top: 8px;
    border-top-color: currentColor; /* Borda herda a cor do texto */
    border-top-style: solid;
}

.pxcode-clima-expanded-details .pxcode-detail-item {
    font-size: 0.9rem; 
    line-height: 1.3;
    white-space: nowrap;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}

.pxcode-clima-expanded-details .pxcode-detail-item strong {
    font-weight: 500; 
    color: inherit; 
    opacity: 0.75; /* A opacidade é aplicada no texto, não no bloco */
    margin-right: 10px; 
}
.pxcode-clima-expanded-details .pxcode-detail-item span:last-child {
    font-weight: 600; 
    color: inherit; 
    opacity: 1; 
}