/* Estilos gerais para o wrapper */
.pxg-wrapper {
    --pxg-accent-color: #2f69ff;
    --pxg-border-radius: 25px;
    margin-bottom: 30px; /* Espaçamento entre widgets */
}

/* Estilos para o título e subtítulo do widget */
.pxg-widget-header {
    margin-bottom: 20px;
}
.pxg-widget-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}
.pxg-widget-subtitle {
    font-size: 16px;
    color: #666;
    margin-top: 0;
}

/* Variáveis CSS para colunas responsivas */
.pxg-card-container,
.pxg-grid-container,
.pxg-magazine-container,
.pxg-masonry-container,
.pxg-classificado-simples-container,
.pxg-mosaico-imagens-container,
.pxg-listagem-detalhada-container,
.pxg-avaliacao-local-container,
.pxg-classificado-completo-container {
    display: grid;
    grid-template-columns: repeat(var(--pxg-columns, 3), 1fr); /* Default 3 colunas */
    gap: 20px; /* Espaçamento entre os itens */
}

/* Estilos para o layout de lista */
.pxg-list-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Estilos para os itens (card, grid, list, magazine, masonry) */
.pxg-card,
.pxg-grid-item,
.pxg-list-item,
.pxg-magazine-item,
.pxg-masonry-item,
.pxg-classificado-simples-item,
.pxg-listagem-detalhada-item,
.pxg-avaliacao-local-item,
.pxg-classificado-completo-item {
    background-color: #fff;
    border-radius: var(--pxg-border-radius);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    position: relative; /* Para badges e overlays */
}

/* Estilos de imagem */
.pxg-card-img,
.pxg-grid-img,
.pxg-magazine-img,
.pxg-masonry-img,
.pxg-cs-img,
.pxg-ld-img,
.pxg-al-img,
.pxg-cc-img {
    position: relative;
    overflow: hidden;
    border-top-left-radius: var(--pxg-border-radius);
    border-top-right-radius: var(--pxg-border-radius);
}
.pxg-card-img img,
.pxg-grid-img img,
.pxg-magazine-img img,
.pxg-masonry-img img,
.pxg-cs-img img,
.pxg-ld-img img,
.pxg-al-img img,
.pxg-cc-img img {
    width: 100%;
    height: 200px; /* Altura fixa para imagens padrão */
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.pxg-card-img img:hover,
.pxg-grid-img img:hover,
.pxg-magazine-img img:hover,
.pxg-masonry-img img:hover,
.pxg-cs-img img:hover,
.pxg-ld-img img:hover,
.pxg-al-img img:hover,
.pxg-cc-img img:hover {
    transform: scale(1.05);
}

/* Badge de categoria */
.pxg-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--pxg-accent-color);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    z-index: 1;
}

/* Estilos do corpo do item */
.pxg-card-body,
.pxg-grid-body,
.pxg-magazine-body,
.pxg-masonry-body {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Títulos dos posts */
.pxg-card-title,
.pxg-grid-title,
.pxg-list-title,
.pxg-magazine-title,
.pxg-masonry-title {
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.3;
}
.pxg-card-title a,
.pxg-grid-title a,
.pxg-list-title a,
.pxg-magazine-title a,
.pxg-masonry-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease;
}
.pxg-card-title a:hover,
.pxg-grid-title a:hover,
.pxg-list-title a:hover,
.pxg-magazine-title a:hover,
.pxg-masonry-title a:hover {
    color: var(--pxg-accent-color);
}

/* Datas */
.pxg-card-date,
.pxg-grid-date,
.pxg-list-date,
.pxg-magazine-date,
.pxg-masonry-date {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
    display: block;
}

/* Resumos */
.pxg-card-excerpt,
.pxg-grid-excerpt,
.pxg-magazine-excerpt,
.pxg-masonry-excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
    flex-grow: 1; /* Para empurrar o botão para baixo */
}

/* Links "Leia Mais" */
.pxg-card-link,
.pxg-grid-link,
.pxg-list-link,
.pxg-magazine-link,
.pxg-masonry-link {
    color: var(--pxg-accent-color);
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    display: inline-block;
    margin-top: auto; /* Para alinhar o botão na parte inferior */
}
.pxg-card-link:hover,
.pxg-grid-link:hover,
.pxg-list-link:hover,
.pxg-magazine-link:hover,
.pxg-masonry-link:hover {
    text-decoration: underline;
}

/* Estilos específicos para LIST */
.pxg-list-item {
    flex-direction: row;
    align-items: center;
}
.pxg-list-img {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    margin-right: 20px;
    border-radius: var(--pxg-border-radius);
}
.pxg-list-img img {
    height: 100%;
    border-radius: var(--pxg-border-radius);
}
.pxg-list-body {
    padding: 15px 0;
}
.pxg-list-title {
    font-size: 18px;
}
.pxg-list-excerpt {
    display: none; /* Oculta o resumo na lista por padrão */
}

/* Estilos específicos para MAGAZINE */
.pxg-magazine-item {
    /* O layout grid-template-columns do container principal já define as colunas */
}
.pxg-magazine-img img {
    height: 250px; /* Altura maior para imagens de magazine */
}

/* Estilos específicos para MASONRY */
.pxg-masonry-container {
    /* Para um masonry real, o ideal é usar JavaScript ou a propriedade column-count */
    /* column-count: var(--pxg-columns, 3); */
    /* column-gap: 20px; */
    /* break-inside: avoid; */
    /* Se usar CSS Grid, o Elementor já aplica grid-template-columns */
}
.pxg-masonry-item {
    /* break-inside: avoid; */
    /* margin-bottom: 20px; */
}
.pxg-masonry-img img {
    height: auto; /* Altura automática para masonry */
}

/* Estilos para carrossel */
.pxg-carousel-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    --pxg-carousel-items-visible: 3; /* Default, será sobrescrito por JS */
    --pxg-carousel-gap-calc: 20px; /* Default, será sobrescrito por JS */
}

.pxg-carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.pxg-carousel-item {
    flex: 0 0 calc((100% / var(--pxg-carousel-items-visible)) - (var(--pxg-carousel-gap-calc) * (var(--pxg-carousel-items-visible) - 1) / var(--pxg-carousel-items-visible)));
    margin-right: var(--pxg-carousel-gap-calc);
    box-sizing: border-box;
}
.pxg-carousel-item:last-child {
    margin-right: 0;
}

.pxg-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pxg-accent-color);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.pxg-carousel-arrow:hover {
    background-color: var(--pxg-accent-color);
    color: #fff;
    border-color: var(--pxg-accent-color);
}
.pxg-carousel-arrow:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.5);
    color: #999;
    border-color: #eee;
}

.pxg-carousel-prev {
    left: 10px;
}

.pxg-carousel-next {
    right: 10px;
}

/* Placeholder para imagens */
.pxg-card-img img[src*="placeholder.png"],
.pxg-grid-img img[src*="placeholder.png"],
.pxg-list-img img[src*="placeholder.png"],
.pxg-magazine-img img[src*="placeholder.png"],
.pxg-masonry-img img[src*="placeholder.png"],
.pxg-cs-img img[src*="placeholder.png"],
.pxg-ld-img img[src*="placeholder.png"],
.pxg-al-img img[src*="placeholder.png"],
.pxg-cc-img img[src*="placeholder.png"] {
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 14px;
    text-align: center;
    height: 200px; /* Ajuste conforme a necessidade */
}

/* --- NOVOS ESTILOS --- */

/* Classificado Simples */
.pxg-classificado-simples-item {
    /* Herda estilos base de item */
}
.pxg-cs-img {
    height: 220px; /* Altura um pouco maior para a imagem */
}
.pxg-cs-img img {
    height: 100%;
}
.pxg-cs-badge-featured {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #ff5722; /* Laranja para FEATURED */
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 1;
}
.pxg-cs-author-avatar {
    position: absolute;
    bottom: -20px; /* Metade para fora da imagem */
    right: 15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 2;
}
.pxg-cs-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pxg-cs-body {
    padding: 25px 20px 20px; /* Mais padding em cima por causa do avatar */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.pxg-cs-category {
    font-size: 12px;
    color: #999;
    margin-bottom: 5px;
    display: block;
}
.pxg-cs-title {
    font-size: 18px;
    margin-bottom: 10px;
}
.pxg-cs-location {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
}
.pxg-cs-location i {
    margin-right: 5px;
    color: #aaa;
}
.pxg-cs-rating {
    color: #ffc107; /* Cor das estrelas */
    font-size: 14px;
    margin-bottom: 10px;
}
.pxg-cs-rating .far.fa-star {
    color: #e0e0e0; /* Estrelas vazias */
}
.pxg-cs-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto; /* Empurra para o final */
    padding-top: 15px;
    border-top: 1px solid #eee;
}
.pxg-cs-price {
    font-size: 18px;
    font-weight: bold;
    color: var(--pxg-accent-color);
}
.pxg-cs-views {
    font-size: 13px;
    color: #999;
}
.pxg-cs-views i {
    margin-right: 5px;
}

/* Mosaico de Imagens */
.pxg-mosaico-imagens-item {
    border-radius: var(--pxg-border-radius);
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.pxg-mosaico-imagens-item img {
    width: 100%;
    height: 250px; /* Altura padrão, pode variar com masonry real */
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.pxg-mosaico-imagens-item:hover img {
    transform: scale(1.05);
}
.pxg-mi-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    color: #fff;
    padding: 20px;
    padding-top: 50px; /* Para o gradiente */
}
.pxg-mi-category {
    font-size: 12px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 5px;
    display: block;
}
.pxg-mi-title {
    font-size: 18px;
    margin: 0;
}
.pxg-mi-title a {
    color: #fff;
    text-decoration: none;
}
.pxg-mi-title a:hover {
    text-decoration: underline;
}

/* Listagem Detalhada */
.pxg-listagem-detalhada-item {
    /* Herda estilos base de item */
}
.pxg-ld-img {
    height: 220px;
}
.pxg-ld-img img {
    height: 100%;
}
.pxg-ld-badge-category {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--pxg-accent-color);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 1;
    text-decoration: none;
}
.pxg-ld-badge-featured {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #ff5722; /* Laranja para Featured */
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 1;
}
.pxg-ld-badge-status {
    position: absolute;
    bottom: 15px;
    left: 15px;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 1;
}
.pxg-ld-badge-open {
    background-color: #4CAF50; /* Verde para Open Now */
    color: #fff;
}
.pxg-ld-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.pxg-ld-title {
    font-size: 20px;
    margin-bottom: 10px;
}
.pxg-ld-location {
    font-size: 13px;
    color: #666;
    margin-bottom: 15px;
}
.pxg-ld-location i {
    margin-right: 5px;
    color: #aaa;
}
.pxg-ld-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}
.pxg-ld-features span {
    background-color: #f0f0f0;
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 12px;
    color: #555;
}
.pxg-ld-features i {
    margin-right: 3px;
}
.pxg-ld-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #eee;
}
.pxg-ld-rating {
    color: #ffc107;
    font-size: 14px;
}
.pxg-ld-rating .far.fa-star {
    color: #e0e0e0;
}
.pxg-ld-price {
    font-size: 18px;
    font-weight: bold;
    color: var(--pxg-accent-color);
}

/* Avaliação de Local */
.pxg-avaliacao-local-item {
    /* Herda estilos base de item */
}
.pxg-al-img {
    height: 250px; /* Imagem maior */
}
.pxg-al-img img {
    height: 100%;
}
.pxg-al-actions {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    gap: 10px;
    z-index: 1;
}
.pxg-al-action-btn {
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.pxg-al-action-btn:hover {
    background-color: var(--pxg-accent-color);
}
.pxg-al-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.pxg-al-title {
    font-size: 20px;
    margin-bottom: 10px;
}
.pxg-al-rating-info {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.pxg-al-rating-value {
    font-size: 16px;
    font-weight: bold;
    color: var(--pxg-accent-color);
    margin-right: 5px;
}
.pxg-al-stars {
    color: #ffc107;
    font-size: 14px;
}
.pxg-al-stars .far.fa-star {
    color: #e0e0e0;
}
.pxg-al-category {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
    display: block;
}
.pxg-al-excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
    flex-grow: 1;
}
.pxg-al-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #eee;
}
.pxg-al-location, .pxg-al-status {
    font-size: 13px;
    color: #666;
}
.pxg-al-location i, .pxg-al-status i {
    margin-right: 5px;
    color: #aaa;
}
.pxg-al-status-open {
    color: #4CAF50;
}
.pxg-al-status-closed {
    color: #f44336;
}

/* Classificado Completo */
.pxg-classificado-completo-item {
    /* Herda estilos base de item */
}
.pxg-cc-img {
    height: 220px;
}
.pxg-cc-img img {
    height: 100%;
}
.pxg-cc-badge-category {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--pxg-accent-color);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 1;
    text-decoration: none;
}
.pxg-cc-badge-featured {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #ff5722; /* Laranja para FEATURED */
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 1;
}
.pxg-cc-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.pxg-cc-title {
    font-size: 20px;
    margin-bottom: 10px;
}
.pxg-cc-location {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
}
.pxg-cc-location i {
    margin-right: 5px;
    color: #aaa;
}
.pxg-cc-rating {
    color: #ffc107;
    font-size: 14px;
    margin-bottom: 15px;
}
.pxg-cc-rating .far.fa-star {
    color: #e0e0e0;
}
.pxg-cc-price-info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #eee;
}
.pxg-cc-price {
    font-size: 18px;
    font-weight: bold;
    color: var(--pxg-accent-color);
}
.pxg-cc-condition, .pxg-cc-storage {
    background-color: #f0f0f0;
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 12px;
    color: #555;
}


/* Responsividade */
@media (max-width: 1024px) {
    .pxg-card-container,
    .pxg-grid-container,
    .pxg-magazine-container,
    .pxg-masonry-container,
    .pxg-classificado-simples-container,
    .pxg-mosaico-imagens-container,
    .pxg-listagem-detalhada-container,
    .pxg-avaliacao-local-container,
    .pxg-classificado-completo-container {
        grid-template-columns: repeat(var(--pxg-columns-tablet, 2), 1fr);
    }
    .pxg-list-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .pxg-list-img {
        margin-right: 0;
        margin-bottom: 15px;
    }
}

@media (max-width: 767px) {
    .pxg-card-container,
    .pxg-grid-container,
    .pxg-magazine-container,
    .pxg-masonry-container,
    .pxg-classificado-simples-container,
    .pxg-mosaico-imagens-container,
    .pxg-listagem-detalhada-container,
    .pxg-avaliacao-local-container,
    .pxg-classificado-completo-container {
        grid-template-columns: repeat(var(--pxg-columns-mobile, 1), 1fr);
    }
    .pxg-list-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .pxg-list-img {
        margin-right: 0;
        margin-bottom: 15px;
    }
    .pxg-carousel-arrow {
        width: 30px;
        height: 30px;
        font-size: 18px;
    }
}