/* ================================================================
   FAVORITOS.CSS - Botão Coração & Notificações
   ================================================================ */

/* --- BOTÃO BASE (RESET TOTAL PARA REMOVER CAIXAS/BORDAS) --- */
.favorite-btn-card,
.favorite-btn-popup {
    /* Reseta tudo que o Bootstrap ou User Agent aplicam */
    all: unset !important;
    
    /* Comportamento Base */
    position: absolute !important;
    z-index: 50 !important; /* Acima da imagem */
    cursor: pointer !important;
    
    /* Flexbox para centralizar o SVG */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Tamanho da área de clique */
    width: 40px !important;
    height: 40px !important;
    
    /* Remove highlights e seleções */
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    
    /* Garante transparência total */
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* --- POSICIONAMENTO ESPECÍFICO --- */

/* No Card da Grid (Canto superior esquerdo ou direito) */
.favorite-btn-card {
    top: 5px !important;
    left: 1px !important;
    /* right: auto !important; */
}

/* No Popup (Dentro da imagem) */
.favorite-btn-popup {
    top: 8px !important;
    right: 10px !important;
    /* left: auto !important; */
}

/* --- ESTILO DO SVG (O ÍCONE) --- */
.favorite-btn-card svg,
.favorite-btn-popup svg {
    width: 28px !important;
    height: 28px !important;
    stroke-width: 2px !important;
    display: block !important;
    overflow: visible !important; /* Permite animação de pulo */
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Estado: NÃO FAVORITADO (Vazio/Cinza) */
.favorite-btn-card:not(.favorited) svg,
.favorite-btn-popup:not(.favorited) svg {
    stroke: #9ca3af !important; /* Cinza médio */
    fill: transparent !important;
}

/* Hover no Estado Vazio */
.favorite-btn-card:not(.favorited):hover svg,
.favorite-btn-popup:not(.favorited):hover svg {
    stroke: #ef4444 !important; /* Vermelho */
    transform: scale(1.1) !important;
}

/* Estado: FAVORITADO (Cheio/Vermelho) */
.favorite-btn-card.favorited svg,
.favorite-btn-popup.favorited svg {
    stroke: #ef4444 !important;
    fill: #ef4444 !important;
    animation: heartPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Feedback de Clique */
.favorite-btn-card:active svg,
.favorite-btn-popup:active svg {
    transform: scale(0.9) !important;
}

/* --- ANIMAÇÃO DE PULO (BOUNCY) --- */
@keyframes heartPop {
    0% { transform: scale(1); }
    40% { transform: scale(0.6); } /* Encolhe */
    60% { transform: scale(1.2); } /* Expande */
    100% { transform: scale(1); }  /* Normaliza */
}

/* ================================================================
   SISTEMA DE NOTIFICAÇÕES (TOASTS)
   ================================================================ */
.toast-notification {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 99999 !important;
    
    background: #1f2937 !important; /* Fundo escuro moderno */
    color: white !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3) !important;
    
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    max-height: 30px; /*20px fica no limite mas fica top*/
    
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none !important;
}

/* Estado Visível */
.toast-notification.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Variações de Cor */
.toast-notification.success span { color: #34d399 !important; }
.toast-notification.error span { color: #f87171 !important; }
.toast-notification.warning span { color: #fbbf24 !important; }

/* Ícone do Toast */
.toast-notification span {
    font-size: 1.2rem !important;
    display: flex !important;
}

/* Sistema de Fila (Empilhamento visual) */
.toast-notification:nth-last-child(1) { bottom: 20px !important; }
.toast-notification:nth-last-child(2) { bottom: 80px !important; scale: 0.95; opacity: 0.8 !important; }
.toast-notification:nth-last-child(3) { bottom: 140px !important; scale: 0.90; opacity: 0.6 !important; }
.toast-notification:nth-last-child(n+4) { display: none !important; }

/* Mobile */
@media (max-width: 768px) {
    .toast-notification {
        right: 10px !important;
        left: 10px !important;
        bottom: 10px !important;
        justify-content: center !important;
    }
}