/**
 * CDF Plus Premium - Frontend Styles
 * Version: 2.0.0
 * Design: Dark Red Premium Theme with Tailwind CSS
 */

:root {
    --cdf-primary: #991b1b;     /* Dark Red 800 */
    --cdf-secondary: #7f1d1d;   /* Dark Red 900 */
    --cdf-accent: #dc2626;      /* Red 600 */
    --cdf-light: #fef2f2;       /* Red 50 */
    --cdf-dark: #450a0a;        /* Dark Red 950 */
    --cdf-gray: #f3f4f6;        /* Gray 100 */
}

/* Premium Container */
.cdf-premium-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Premium Card */
.cdf-premium-card {
    @apply bg-white rounded-2xl shadow-2xl overflow-hidden;
    border: 2px solid var(--cdf-light);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cdf-premium-card:hover {
    @apply shadow-3xl;
    transform: translateY(-4px);
}

/* Premium Header */
.cdf-premium-header {
    @apply relative py-8 px-6;
    background: linear-gradient(135deg, var(--cdf-primary) 0%, var(--cdf-secondary) 100%);
}

.cdf-premium-logo {
    @apply text-white text-4xl font-bold tracking-tight;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.cdf-premium-subtitle {
    @apply text-red-100 text-sm mt-2;
}

/* Premium Progress Bar */
.cdf-progress-container {
    @apply relative w-full h-3 bg-gray-200 rounded-full overflow-hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.cdf-progress-bar {
    @apply h-full rounded-full transition-all duration-300 ease-out;
    background: linear-gradient(90deg, var(--cdf-accent) 0%, var(--cdf-primary) 100%);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
}

.cdf-progress-text {
    @apply absolute inset-0 flex items-center justify-center text-xs font-bold text-white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Premium Button */
.cdf-premium-btn {
    @apply relative px-8 py-4 rounded-xl font-semibold text-white transition-all duration-300;
    background: linear-gradient(135deg, var(--cdf-accent) 0%, var(--cdf-primary) 100%);
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

.cdf-premium-btn:hover {
    @apply transform -translate-y-1;
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
}

.cdf-premium-btn:active {
    @apply transform translate-y-0;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.3);
}

.cdf-premium-btn:disabled {
    @apply opacity-50 cursor-not-allowed;
    transform: none !important;
}

/* Premium Timer Display */
.cdf-timer-display {
    @apply text-5xl font-bold text-center;
    background: linear-gradient(135deg, var(--cdf-accent) 0%, var(--cdf-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Loading Spinner */
.cdf-loading-spinner {
    @apply inline-block w-12 h-12 border-4 border-red-200 border-t-red-600 rounded-full;
    animation: cdf-spin 1s linear infinite;
}

@keyframes cdf-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Ad Placeholder */
.cdf-ad-placeholder {
    @apply flex items-center justify-center min-h-[250px] bg-gray-50 rounded-lg;
    border: 2px dashed #e5e7eb;
}

/* Lazy Ad Container */
.cdf-lazy-ad {
    @apply relative overflow-hidden rounded-lg;
}

.cdf-lazy-ad.loaded .cdf-ad-placeholder {
    @apply hidden;
}

.cdf-lazy-ad.loaded .cdf-ad-content {
    @apply block !important;
}

/* Premium Banner Ad */
.cdf-banner-ad {
    @apply mx-auto my-6 flex items-center justify-center;
    min-height: 250px;
}

/* Modal Styles */
.cdf-modal {
    @apply fixed inset-0 z-[9999] overflow-hidden;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
}

.cdf-modal-content {
    @apply relative mx-auto my-auto p-8 bg-white rounded-2xl shadow-2xl;
    max-width: 600px;
    top: 50%;
    transform: translateY(-50%);
    animation: cdf-modal-appear 0.3s ease-out;
}

@keyframes cdf-modal-appear {
    from {
        opacity: 0;
        transform: translateY(-50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

/* Rewarded Ad Modal */
.cdf-rewarded-modal {
    @apply cdf-modal;
}

.cdf-rewarded-content {
    @apply text-center;
}

.cdf-rewarded-title {
    @apply text-2xl font-bold mb-4;
    color: var(--cdf-primary);
}

.cdf-rewarded-description {
    @apply text-gray-600 mb-6;
}

/* Previous/Next Navigation */
.cdf-navigation {
    @apply grid grid-cols-1 md:grid-cols-2 gap-6 mt-8;
}

.cdf-nav-item {
    @apply relative group overflow-hidden rounded-xl;
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    border: 2px solid #e5e7eb;
    transition: all 0.3s ease;
}

.cdf-nav-item:hover {
    @apply border-red-300 shadow-lg;
    transform: translateY(-4px);
}

.cdf-nav-thumbnail {
    @apply w-full h-48 bg-cover bg-center;
    transition: transform 0.5s ease;
}

.cdf-nav-item:hover .cdf-nav-thumbnail {
    transform: scale(1.1);
}

.cdf-nav-content {
    @apply p-6;
}

.cdf-nav-title {
    @apply text-lg font-bold mb-2 text-gray-800;
}

.cdf-nav-excerpt {
    @apply text-sm text-gray-600;
}

/* Related Articles Grid */
.cdf-related-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8;
}

.cdf-related-article {
    @apply bg-white rounded-xl overflow-hidden shadow-md transition-all duration-300;
    border: 1px solid #e5e7eb;
}

.cdf-related-article:hover {
    @apply shadow-xl;
    transform: translateY(-4px);
}

.cdf-related-thumbnail {
    @apply w-full h-48 object-cover;
}

.cdf-related-content {
    @apply p-6;
}

.cdf-related-title {
    @apply text-lg font-bold mb-2 text-gray-800 line-clamp-2;
}

.cdf-related-excerpt {
    @apply text-sm text-gray-600 mb-4 line-clamp-3;
}

.cdf-related-date {
    @apply text-xs text-gray-500;
}

/* Footer */
.cdf-footer {
    @apply mt-12 py-8 border-t-2 border-gray-200;
    background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
}

.cdf-footer-content {
    @apply flex flex-col md:flex-row justify-between items-center text-sm text-gray-600;
}

.cdf-footer-link {
    @apply text-red-600 hover:text-red-700 transition-colors;
}

/* AdBlock Warning */
.cdf-adblock-warning {
    @apply fixed inset-0 z-[10000] flex items-center justify-center;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
}

.cdf-adblock-content {
    @apply bg-white rounded-2xl p-8 max-w-md text-center shadow-2xl;
}

.cdf-adblock-icon {
    @apply text-6xl mb-4;
    color: var(--cdf-accent);
}

.cdf-adblock-title {
    @apply text-2xl font-bold mb-4;
    color: var(--cdf-primary);
}

.cdf-adblock-text {
    @apply text-gray-600 mb-6;
}

/* Animations */
@keyframes cdf-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cdf-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cdf-fade-in {
    animation: cdf-fade-in 0.5s ease-out;
}

.cdf-slide-up {
    animation: cdf-slide-up 0.5s ease-out;
}

/* Responsive Utilities */
@media (max-width: 768px) {
    .cdf-premium-logo {
        @apply text-3xl;
    }
    
    .cdf-timer-display {
        @apply text-4xl;
    }
    
    .cdf-premium-btn {
        @apply px-6 py-3;
    }
}

/* Custom Scrollbar */
.cdf-custom-scroll::-webkit-scrollbar {
    width: 8px;
}

.cdf-custom-scroll::-webkit-scrollbar-track {
    background: var(--cdf-light);
}

.cdf-custom-scroll::-webkit-scrollbar-thumb {
    background: var(--cdf-primary);
    border-radius: 4px;
}

.cdf-custom-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--cdf-secondary);
}

/* Print Styles */
@media print {
    .cdf-premium-card,
    .cdf-modal,
    .cdf-adblock-warning {
        display: none !important;
    }
}