/* Custom styles for Local SEO Ad Generator */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
}

.ad-container {
    width: 600px;
    height: 400px;
    border: 1px solid #374151;
    transition: all 0.3s ease;
}

.ad-container:hover {
    border-color: #3B82F6;
    box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.1), 0 10px 10px -5px rgba(59, 130, 246, 0.04);
}

/* Color variants for ad containers */
.ad-container.variant-green {
    background: linear-gradient(135deg, #1a2f1a 0%, #0f1f0f 100%);
}

.ad-container.variant-green:hover {
    border-color: #10B981;
    box-shadow: 0 20px 25px -5px rgba(16, 185, 129, 0.1), 0 10px 10px -5px rgba(16, 185, 129, 0.04);
}

.ad-container.variant-purple {
    background: linear-gradient(135deg, #2d1a4c 0%, #1a1035 100%);
}

.ad-container.variant-purple:hover {
    border-color: #8B5CF6;
    box-shadow: 0 20px 25px -5px rgba(139, 92, 246, 0.1), 0 10px 10px -5px rgba(139, 92, 246, 0.04);
}

.ad-container.variant-orange {
    background: linear-gradient(135deg, #422006 0%, #2c1504 100%);
}

.ad-container.variant-orange:hover {
    border-color: #F59E0B;
    box-shadow: 0 20px 25px -5px rgba(245, 158, 11, 0.1), 0 10px 10px -5px rgba(245, 158, 11, 0.04);
}

.ad-container.variant-pink {
    background: linear-gradient(135deg, #431529 0%, #2d0f1c 100%);
}

.ad-container.variant-pink:hover {
    border-color: #EC4899;
    box-shadow: 0 20px 25px -5px rgba(236, 72, 153, 0.1), 0 10px 10px -5px rgba(236, 72, 153, 0.04);
}
/* Custom animations */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(239, 68, 68, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.8);
    }
}

.animate-pulse-glow {
    animation: pulse-glow 2s infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ad-container {
        width: 100%;
        max-width: 400px;
        height: 300px;
    }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1f2937;
}

::-webkit-scrollbar-thumb {
    background: #3B82F6;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2563eb;
}