/*!
 * CSS FINAL - SISTEMA VENDIDO 
 * Data: Janeiro 2025
 * Função: Selo vendido funcional SEM animações complexas
 */

/* ========================================
   CONTAINERS - POSICIONAMENTO CORRETO
   ======================================== */

.card-img-container,
.position-relative,
.product-image,
.thumbnail-container {
  position: relative !important;
  overflow: hidden !important;
}

/* ========================================
   OVERLAYS DE VENDIDO - VISÍVEIS IMEDIATAMENTE
   ======================================== */

/* OVERLAY PÚBLICO - Páginas home, listagem, categoria */
.sold-overlay-public {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999 !important;
  opacity: 1 !important; /* VISÍVEL IMEDIATAMENTE */
  pointer-events: none !important;
}

/* OVERLAY DETALHES - Página individual */
.sold-overlay-detail {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999 !important;
  opacity: 1 !important; /* VISÍVEL IMEDIATAMENTE */
  pointer-events: none !important;
}

/* OVERLAY MINIATURAS - Galeria de fotos */
.sold-overlay-thumbnail {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999 !important;
  opacity: 1 !important; /* VISÍVEL IMEDIATAMENTE */
  pointer-events: none !important;
}

/* OVERLAY ADMIN - Área administrativa */
.sold-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999 !important;
  opacity: 1 !important; /* VISÍVEL IMEDIATAMENTE */
  pointer-events: none !important;
}

/* ========================================
   SELOS SVG - TAMANHOS PROPORCIONAIS
   ======================================== */

/* SELO PÚBLICO - Listagem e home */
.sold-seal-public {
  width: auto !important;
  height: auto !important;
  max-width: 70% !important;
  max-height: 70% !important;
  min-width: 60px !important;
  min-height: 40px !important;
  object-fit: contain !important;
  filter: drop-shadow(3px 3px 8px rgba(0,0,0,0.7)) !important;
  opacity: 1 !important; /* VISÍVEL IMEDIATAMENTE */
  pointer-events: none !important;
}

/* SELO DETALHES - Página individual (maior) */
.sold-seal-detail {
  width: auto !important;
  height: auto !important;
  max-width: 60% !important;
  max-height: 60% !important;
  min-width: 80px !important;
  min-height: 50px !important;
  object-fit: contain !important;
  filter: drop-shadow(4px 4px 10px rgba(0,0,0,0.8)) !important;
  opacity: 1 !important; /* VISÍVEL IMEDIATAMENTE */
  pointer-events: none !important;
}

/* SELO MINIATURAS - Galeria (pequeno) */
.sold-seal-thumbnail {
  width: auto !important;
  height: auto !important;
  max-width: 75% !important;
  max-height: 75% !important;
  min-width: 30px !important;
  min-height: 20px !important;
  object-fit: contain !important;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.6)) !important;
  opacity: 1 !important; /* VISÍVEL IMEDIATAMENTE */
  pointer-events: none !important;
}

/* SELO ADMIN - Área administrativa */
.sold-seal-admin {
  width: auto !important;
  height: auto !important;
  max-width: 80% !important;
  max-height: 80% !important;
  min-width: 30px !important;
  min-height: 20px !important;
  object-fit: contain !important;
  filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.6)) !important;
  opacity: 1 !important; /* VISÍVEL IMEDIATAMENTE */
  pointer-events: none !important;
}

/* SELO GENÉRICO - Fallback universal */
.sold-seal {
  width: auto !important;
  height: auto !important;
  max-width: 70% !important;
  max-height: 70% !important;
  min-width: 50px !important;
  min-height: 30px !important;
  object-fit: contain !important;
  filter: drop-shadow(3px 3px 8px rgba(0,0,0,0.7)) !important;
  opacity: 1 !important; /* VISÍVEL IMEDIATAMENTE */
  pointer-events: none !important;
}

/* ========================================
   ANIMAÇÃO SIMPLES - APENAS HOVER
   ======================================== */

.sold-overlay-public:hover,
.sold-overlay-detail:hover,
.sold-overlay-thumbnail:hover,
.sold-overlay:hover {
  background: rgba(0, 0, 0, 0.6) !important;
  transition: background 0.3s ease !important;
}

.sold-seal-public:hover,
.sold-seal-detail:hover,
.sold-seal-thumbnail:hover,
.sold-seal-admin:hover,
.sold-seal:hover {
  transform: scale(1.05) !important;
  transition: transform 0.3s ease !important;
}

/* ========================================
   FILTROS DE IMAGEM - EFEITO VENDIDO
   ======================================== */

/* Imagens com filtro vendido */
.img-sold-public .card-img-top,
.product-image-sold img,
.thumbnail-sold .thumbnail,
.image-sold .classified-thumbnail {
  filter: brightness(0.6) saturate(0.7) grayscale(0.3) !important;
  transition: filter 0.3s ease !important;
}

/* Bordas vermelhas nos containers */
.img-sold-public .card,
.product-image-sold,
.thumbnail-sold .thumbnail,
.image-container.image-sold {
  border: 2px solid #dc3545 !important;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3) !important;
}

/* ========================================
   RESPONSIVIDADE MÓVEL
   ======================================== */

@media (max-width: 768px) {
  .sold-seal-public,
  .sold-seal,
  .sold-seal-thumbnail {
    max-width: 80% !important;
    max-height: 80% !important;
  }
  
  .sold-seal-detail {
    max-width: 70% !important;
    max-height: 70% !important;
  }
  
  .sold-seal-admin {
    max-width: 85% !important;
    max-height: 85% !important;
  }
}

@media (max-width: 480px) {
  .sold-seal-public,
  .sold-seal,
  .sold-seal-thumbnail {
    max-width: 85% !important;
    max-height: 85% !important;
  }
  
  .sold-seal-detail {
    max-width: 75% !important;
    max-height: 75% !important;
  }
  
  .sold-seal-admin {
    max-width: 90% !important;
    max-height: 90% !important;
  }
}

/* ========================================
   FALLBACK DE EMERGÊNCIA
   ======================================== */

/* Fallback textual se SVG não carregar */
.sold-overlay-public:not(:has(img))::after,
.sold-overlay-detail:not(:has(img))::after,
.sold-overlay-thumbnail:not(:has(img))::after,
.sold-overlay:not(:has(img))::after {
  content: "VENDIDO" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) rotate(-15deg) !important;
  color: #dc3545 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  padding: 8px 15px !important;
  border-radius: 5px !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;
  letter-spacing: 2px !important;
  z-index: 1000 !important;
  opacity: 1 !important;
  font-family: Arial, sans-serif !important;
  border: 2px solid #dc3545 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* ========================================
   PERFORMANCE E COMPATIBILIDADE
   ======================================== */

.sold-overlay-public,
.sold-overlay-detail,
.sold-overlay-thumbnail,
.sold-overlay,
.sold-seal-public,
.sold-seal-detail,
.sold-seal-thumbnail,
.sold-seal-admin,
.sold-seal {
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

/* Prefixos para navegadores antigos */
.sold-seal-public,
.sold-seal-detail,
.sold-seal-thumbnail,
.sold-seal-admin,
.sold-seal {
  -webkit-filter: drop-shadow(3px 3px 8px rgba(0,0,0,0.7)) !important;
  -moz-filter: drop-shadow(3px 3px 8px rgba(0,0,0,0.7)) !important;
  -ms-filter: drop-shadow(3px 3px 8px rgba(0,0,0,0.7)) !important;
}

/* FIM DO ARQUIVO */