/* SaaSDeals SPA - Additional Custom Styles */

/* Toast Notification - Already handled in app.js inline, but here for reference */
#toastNotification {
    font-family: 'Space Grotesk', sans-serif;
    max-width: 400px;
    word-wrap: break-word;
}

/* Sponsored Ad Card Enhancements */
.sponsored-ad-card {
    position: relative;
    background: linear-gradient(135deg, rgba(124, 59, 237, 0.05) 0%, rgba(8, 247, 254, 0.05) 100%);
}

.sponsored-ad-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, #7c3bed, #08F7FE);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.3;
}

/* Ad Fallback Styles */
.ad-fallback {
    transition: all 0.3s ease;
}

.ad-fallback:hover {
    transform: scale(1.02);
}

/* Loading Animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Smooth transitions for dynamic content */
#couponsGrid > * {
    animation: fadeIn 0.3s ease-in;
}

/*
  Deals grid hardening:
  Some environments end up rendering the 3-column layout in a too-narrow container,
  which makes cards collapse and text wrap letter-by-letter. Force an auto-fitting
  grid with a sensible minimum card width and consistent spacing.
*/
#deals-grid {
    display: grid;
    gap: 1.5rem; /* matches Tailwind gap-6 */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: stretch;
}

#deals-grid > * {
    min-width: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Button state for revealed codes */
.get-deal-btn.code-revealed {
    cursor: default;
    pointer-events: none;
}

/* Responsive Toast */
@media (max-width: 768px) {
    #toastNotification {
        bottom: 20px !important;
        right: 20px !important;
        left: 20px !important;
        max-width: calc(100vw - 40px);
    }
}

/* Enhanced hover effects for sponsored ads */
.sponsored-ad-hover:hover {
    box-shadow: 0 10px 40px rgba(124, 59, 237, 0.3);
}

/* Lazy loading image placeholder */
img[loading="lazy"] {
    background: linear-gradient(90deg, #1e1b26 25%, #2a2634 50%, #1e1b26 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

img[loading="lazy"].loaded {
    animation: none;
    background: transparent;
}

/* Ensure proper spacing for dynamic grid */
#couponsGrid.grid {
    min-height: 400px;
}

/* No results state styling */
.no-results-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: #94a3b8;
}

/* Filter active states */
.category-filter:checked + span {
    color: #7c3bed !important;
    font-weight: 600;
}

#verifiedOnly:checked + span {
    color: #10b981 !important;
    font-weight: 600;
}

/* Enhance the shimmer animation for ads */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* AdSense zone visibility */
.ad-zone-active .ad-fallback {
    display: none;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Print styles - hide ads when printing */
@media print {
    #leaderboard-ad,
    #sidebar-ad,
    .sponsored-ad-card,
    #toastNotification {
        display: none !important;
    }
}