/* Custom styles for GwenDev ZaloChat Website */

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

/* Hero section gradient */
.hero-gradient {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

/* Card hover effects */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Button animations */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition-all duration-200 transform hover:scale-105;
}

.btn-secondary {
    @apply bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-6 rounded-lg transition-all duration-200;
}

/* Code blocks */
.code-block {
    @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto;
}

/* GitHub stats cards */
.github-stat {
    @apply bg-white p-4 rounded-lg shadow-sm border border-gray-200 text-center;
}

.github-stat-number {
    @apply text-2xl font-bold text-blue-600;
}

.github-stat-label {
    @apply text-sm text-gray-500 mt-1;
}

/* Download cards */
.download-card {
    @apply bg-white p-6 rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition-all duration-200;
}

.download-icon {
    @apply w-12 h-12 rounded-lg flex items-center justify-center text-white text-xl mb-4;
}

/* Video thumbnails */
.video-thumbnail {
    @apply relative overflow-hidden rounded-lg cursor-pointer;
}

.video-thumbnail::before {
    content: '';
    @apply absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-200;
}

.video-thumbnail:hover::before {
    content: '▶';
    @apply text-white text-4xl font-bold;
}

/* Mobile menu animation */
.mobile-menu {
    transition: max-height 0.3s ease;
    max-height: 0;
    overflow: hidden;
}

.mobile-menu.active {
    max-height: 300px;
}

/* Loading animation */
.loading {
    @apply inline-block w-4 h-4 border-2 border-gray-300 border-t-blue-600 rounded-full animate-spin;
}

/* Syntax highlighting customization */
pre[class*="language-"] {
    @apply rounded-lg !important;
}

code[class*="language-"] {
    @apply text-sm !important;
}

/* Responsive utilities */
@media (max-width: 768px) {
    .hero-title {
        @apply text-3xl !important;
    }
    
    .hero-subtitle {
        @apply text-lg !important;
    }
}

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

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

::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
}

/* Animation keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* GitHub file tree styling */
.file-tree {
    @apply bg-gray-900 text-gray-100 p-4 rounded-lg font-mono text-sm;
}

.file-tree .folder {
    @apply text-blue-400;
}

.file-tree .file {
    @apply text-gray-300;
}

/* Status badges */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-error {
    @apply bg-red-100 text-red-800;
}

/* Tutorial content styling */
.tutorial-content h1 {
    @apply text-3xl font-bold text-gray-900 mb-6;
}

.tutorial-content h2 {
    @apply text-2xl font-semibold text-gray-900 mb-4 mt-8;
}

.tutorial-content h3 {
    @apply text-xl font-semibold text-gray-900 mb-3 mt-6;
}

.tutorial-content p {
    @apply text-gray-700 mb-4 leading-relaxed;
}

.tutorial-content ul {
    @apply list-disc list-inside text-gray-700 mb-4 space-y-1;
}

.tutorial-content ol {
    @apply list-decimal list-inside text-gray-700 mb-4 space-y-1;
}

.tutorial-content blockquote {
    @apply border-l-4 border-blue-500 pl-4 italic text-gray-600 mb-4;
}

.tutorial-content code {
    @apply bg-gray-100 text-gray-800 px-1 py-0.5 rounded text-sm;
}

.tutorial-content pre {
    @apply mb-4;
}