/* ============================================================
   🎨 ESTILOS EXTRAS PARA BOOTSTRAP 4 (AdminLTE)
============================================================ */

/* --- 1. Ajustes no Grid de Produtos --- */
.product-card-wrap {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none; /* Remove borda padrão feia */
    height: 100%; /* Garante que todos tenham a mesma altura */
}

/* Efeito ao passar o mouse no Card Inteiro */
.product-card-wrap:hover {
    transform: translateY(-5px); /* Sobe um pouquinho */
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important; /* Sombra mais forte */
}

/* Área da Imagem (Wrapper) para posicionar Selos e Favoritos */
.img-wrapper {
    position: relative;
    overflow: hidden; /* Para o selo não vazar */
    background-color: #fff;
    padding: 10px; /* Respiro para a imagem */
    height: 200px; /* Altura fixa para alinhar grid */
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-wrapper img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain; /* Imagem inteira aparece sem cortar */
}

/* --- 2. Selo Triangular (Top Right) --- */
.platform-seal {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    z-index: 10;
    background-size: 45%;
    background-repeat: no-repeat;
    background-position: top 8px right 8px;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}

.platform-seal.platform-ml { background-color: #ffe600; background-image: url('/static/img/seal/ml.svg'); }
.platform-seal.platform-amz { background-color: #232f3e; background-image: url('/static/img/seal/amazon.svg'); }
.platform-seal.platform-sh { background-color: #ee4d2d; background-image: url('/static/img/seal/shopee.svg'); }

/* --- 3. Botão Favorito Flutuante (Material Design) --- */
.btn-favorite-float {
    position: absolute;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: all 0.2s;
    padding: 0;
    outline: none !important;
}

.btn-favorite-float:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Cores do ícone */
.btn-favorite-float i.far { color: #ccc; } /* Coração vazio (Cinza) */
.btn-favorite-float i.fas { color: #dc3545; } /* Coração cheio (Vermelho) */

/* POSIÇÃO 1: No Card (Topo Esquerdo) */
.card-fav-pos {
    top: 10px;
    left: 10px;
}

/* POSIÇÃO 2: No Popup (Canto Inferior Direito da Imagem) */
.popup-fav-pos {
    bottom: 15px;
    right: 15px;
}

/* --- 4. Popup (Estilo Modal Bootstrap) --- */
/* Mantemos seu container escuro de fundo, mas estilizamos o miolo */
.popup-content-bootstrap {
    background: #fff;
    border-radius: 0.3rem; /* Padrão Bootstrap */
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.5);
    width: 95%;
    max-width: 800px; /* Tamanho bom para desktop */
    position: relative;
    overflow: hidden;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.close-modal-btn {
    position: absolute;
    top: 10px;
    left: 15px; /* X na esquerda conforme pedido */
    font-size: 1.5rem;
    color: #aaa;
    background: none;
    border: none;
    z-index: 100;
    line-height: 1;
}
.close-modal-btn:hover { color: #333; }

/* Ajuste da imagem no popup */
.popup-img-container {
    background-color: #f8f9fa; /* Cinza bem claro no fundo da foto */
    height: 350px; /* Altura fixa no popup */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Para o favorito flutuar aqui */
}

.popup-img-detail {
    max-height: 90%;
    max-width: 90%;
    object-fit: contain;
}