/* HHHaf Developers - Red Theme CSS */
/* Additional red theme styling for the website */

:root {
    --primary-red: #e63946;
    --dark-red: #c1121f;
    --light-red: #f1a7a7;
    --red-gradient: linear-gradient(135deg, #e63946 0%, #c1121f 100%);
}

/* Red theme button variations */
.btn-red-primary {
    background: var(--red-gradient);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.3);
}

.btn-red-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(230, 57, 70, 0.4);
}

/* Red accent colors */
.text-accent-red {
    color: var(--primary-red);
}

.bg-accent-red {
    background-color: var(--primary-red);
}

.border-accent-red {
    border-color: var(--primary-red);
}

/* Red hover states */
.hover-red:hover {
    color: var(--primary-red);
}

.hover-bg-red:hover {
    background-color: var(--primary-red);
}

/* Red gradient backgrounds */
.bg-red-gradient {
    background: var(--red-gradient);
}

.bg-red-gradient-light {
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.1) 0%, rgba(193, 18, 31, 0.1) 100%);
}

/* Red theme for cards */
.card-red-accent {
    border-left: 4px solid var(--primary-red);
}

.card-red-accent:hover {
    border-left-color: var(--dark-red);
    box-shadow: 0 4px 20px rgba(230, 57, 70, 0.15);
}

/* Red theme for navigation */
.nav-red-active {
    color: var(--primary-red) !important;
    font-weight: 600;
}

/* Red theme for links */
.link-red {
    color: var(--primary-red);
    text-decoration: none;
    transition: color 0.3s ease;
}

.link-red:hover {
    color: var(--dark-red);
    text-decoration: underline;
}

/* Red theme for form elements */
.form-red:focus {
    border-color: var(--primary-red);
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.1);
}

.form-red-error {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* Red theme for badges and tags */
.badge-red {
    background-color: var(--primary-red);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

.badge-red-outline {
    border: 1px solid var(--primary-red);
    color: var(--primary-red);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Red theme for progress bars */
.progress-red {
    background-color: var(--primary-red);
}

/* Red theme for icons */
.icon-red {
    color: var(--primary-red);
}

/* Red theme animations */
@keyframes red-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(230, 57, 70, 0);
    }
}

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

/* Red theme for testimonials */
.testimonial-red {
    border-top: 3px solid var(--primary-red);
}

/* Red theme for pricing tables */
.pricing-red-featured {
    border: 2px solid var(--primary-red);
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(230, 57, 70, 0.2);
}

/* Red theme for footer */
.footer-red {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    border-top: 4px solid var(--primary-red);
}

/* Responsive red theme adjustments */
@media (max-width: 768px) {
    .btn-red-primary {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .badge-red, .badge-red-outline {
        font-size: 0.75rem;
        padding: 3px 8px;
    }
}

/* Dark mode red theme support */
@media (prefers-color-scheme: dark) {
    .link-red:hover {
        color: var(--light-red);
    }
    
    .badge-red-outline {
        background-color: rgba(230, 57, 70, 0.1);
    }
}