/* Dark Mode Service Card Overrides - Ensuring Purple Accents */

/* CRITICAL FIX: Force ALL section titles to be white in dark mode */
[data-theme="dark"] .section-title,
[data-theme="dark"] h2.section-title,
[data-theme="dark"] #big_my_works_philosophy,
[data-theme="dark"] #get_in_touch_trans,
[data-theme="dark"] #big_about_trans,
[data-theme="dark"] #ai_consulting_services_trans,
[data-theme="dark"] #trusted_by_leaders_trans,
[data-theme="dark"] #big_blog_trans {
    color: #ffffff !important;
}

/* Make all blog post content headings white in dark mode */
[data-theme="dark"] .blog-post-content h1,
[data-theme="dark"] .blog-post-content h2,
[data-theme="dark"] .blog-post-content h3,
[data-theme="dark"] .blog-post-content h4,
[data-theme="dark"] .blog-post-content h5,
[data-theme="dark"] .blog-post-content h6,
[data-theme="dark"] .blog-post-title,
[data-theme="dark"] .post-title {
    color: #ffffff !important;
}

/* REMOVE PURPLE GRADIENT FROM BLOG POSTS */
.blog-post-header,
.blog-post-header::before,
.blog-post-header::after,
.blog-container,
.blog-container::before,
.blog-container::after,
#post-title,
#post-title::before,
#post-title::after {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Ensure no gradient backgrounds on any blog elements */
[data-theme="dark"] .blog-post-header,
[data-theme="dark"] .blog-container,
body.dark .blog-post-header,
body.dark .blog-container {
    background: transparent !important;
    background-image: none !important;
}

/* Collaborator Cards - Apply same purple glow as service cards */
[data-theme="dark"] .collaborators-grid {
    opacity: 1 !important;
}

[data-theme="dark"] .collaborator-item {
    background: linear-gradient(135deg, #1e1e2e 0%, #16161f 100%) !important;
    border: 2px solid rgba(108, 108, 229, 0.3) !important;
    border-radius: 20px !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(108, 108, 229, 0.2) !important;
    transition: all 0.3s ease-in-out !important;
}

[data-theme="dark"] .collaborator-item:hover {
    transform: translateY(-10px) !important;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 10px 30px rgba(108, 108, 229, 0.5) !important;
    border-color: rgba(108, 108, 229, 0.7) !important;
}

/* Override all pink colors with purple in dark mode */
[data-theme="dark"] .service-card {
    border: 1px solid #2a2a3e !important;
}

[data-theme="dark"] .service-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 8px 24px rgba(108, 108, 229, 0.4) !important;
    border-color: rgba(108, 108, 229, 0.6) !important;
}

/* Service icon circles - purple background */
[data-theme="dark"] .service-icon {
    background: rgba(108, 108, 229, 0.15) !important;
    color: #6C6CE5 !important;
}

[data-theme="dark"] .service-card:hover .service-icon {
    background: #6C6CE5 !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

/* Ensure icons themselves (FontAwesome/icon fonts) are purple */
[data-theme="dark"] .service-icon i,
[data-theme="dark"] .service-icon svg,
[data-theme="dark"] .service-icon [class*="icon"],
[data-theme="dark"] .service-icon [class*="fa"] {
    color: #6C6CE5 !important;
}

[data-theme="dark"] .service-card:hover .service-icon i,
[data-theme="dark"] .service-card:hover .service-icon svg,
[data-theme="dark"] .service-card:hover .service-icon [class*="icon"],
[data-theme="dark"] .service-card:hover .service-icon [class*="fa"] {
    color: #ffffff !important;
}

/* Override the pink checkmark icons */
[data-theme="dark"] .service-features li::before,
[data-theme="dark"] .service-card .service-features li::before {
    background: #6C6CE5 !important;
    color: #ffffff !important;
}

/* Override any inline pink elements */
[data-theme="dark"] .service-card [style*="ff4c60"],
[data-theme="dark"] .service-card [style*="255, 76, 96"] {
    color: #6C6CE5 !important;
}

/* Override featured card styles - Remove all red/pink accents */
[data-theme="dark"] .service-card.featured,
[data-theme="dark"] .service-card.popular,
[data-theme="dark"] .service-card:nth-child(2) { /* Custom AI Development is usually 2nd */
    border-color: rgba(108, 108, 229, 0.4) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important; /* No red glow */
}

[data-theme="dark"] .service-card.featured:hover,
[data-theme="dark"] .service-card.popular:hover,
[data-theme="dark"] .service-card:nth-child(2):hover {
    box-shadow: 
        0 30px 60px rgba(108, 108, 229, 0.3),
        0 12px 32px rgba(0, 0, 0, 0.4) !important;
}

/* Remove any red/pink badge or label */
[data-theme="dark"] .service-card .badge,
[data-theme="dark"] .service-card .label,
[data-theme="dark"] .service-card .tag,
[data-theme="dark"] .service-card .popular-badge,
[data-theme="dark"] .service-card [class*="badge"] {
    background: #6C6CE5 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Remove red glow from featured card icon */
[data-theme="dark"] .service-card.featured .service-icon,
[data-theme="dark"] .service-card.popular .service-icon,
[data-theme="dark"] .service-card:nth-child(2) .service-icon {
    box-shadow: none !important;
}

/* Ensure all text uses proper colors */
[data-theme="dark"] .service-card h3 {
    color: #ffffff !important;
}

[data-theme="dark"] .service-card p {
    color: #d4d4d9 !important;
}

/* Override any animation-created pink glows */
[data-theme="dark"] .service-card::before,
[data-theme="dark"] .service-card::after {
    background: transparent !important;
}

[data-theme="dark"] .service-card:hover::before,
[data-theme="dark"] .service-card:hover::after {
    background: radial-gradient(circle at center, rgba(108, 108, 229, 0.1), transparent) !important;
}

/* Override button styles if any */
[data-theme="dark"] .service-card .btn,
[data-theme="dark"] .service-card .button,
[data-theme="dark"] .service-card a.btn {
    background: #6C6CE5 !important;
    border-color: #6C6CE5 !important;
}

[data-theme="dark"] .service-card .btn:hover,
[data-theme="dark"] .service-card .button:hover,
[data-theme="dark"] .service-card a.btn:hover {
    background: #7c7ef0 !important;
    border-color: #7c7ef0 !important;
}

/* Remove pink shadows but keep functional shadows */
[data-theme="dark"] .service-card:hover {
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 8px 24px rgba(108, 108, 229, 0.4) !important;
}

/* Override any icon background circles or decorative elements */
[data-theme="dark"] .service-icon::before,
[data-theme="dark"] .service-icon::after {
    background: rgba(108, 108, 229, 0.1) !important;
    border-color: #6C6CE5 !important;
}

[data-theme="dark"] .service-card:hover .service-icon::before,
[data-theme="dark"] .service-card:hover .service-icon::after {
    background: rgba(108, 108, 229, 0.2) !important;
}

/* Override any gradient backgrounds */
[data-theme="dark"] .service-card {
    background: linear-gradient(135deg, #1e1e2e 0%, #16161f 100%) !important;
}

/* Specifically target the POPULAR badge */
[data-theme="dark"] .badge-popular,
[data-theme="dark"] .badge-featured,
[data-theme="dark"] .service-card .badge-pill,
[data-theme="dark"] span.badge {
    background: #6C6CE5 !important;
    background-color: #6C6CE5 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

/* Allow hover animations but ensure proper visibility */
[data-theme="dark"] .service-card:hover {
    transform: translateY(-10px) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Keep cards visible but remove red overlays */
[data-theme="dark"] .service-card::before,
[data-theme="dark"] .service-card::after {
    background: transparent !important;
}

/* The pink checkmarks - make them purple */
[data-theme="dark"] .service-features li::before {
    content: "✓" !important;
    background: #6C6CE5 !important;
    color: white !important;
    width: 20px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    margin-right: 12px !important;
    font-size: 12px !important;
    font-weight: bold !important;
}

/* Fix form field icon color on focus in dark mode - make it purple instead of blue/red */
[data-theme="dark"] .ios-form-control:focus + .ios-form-icon,
[data-theme="dark"] .ios-form-control:focus ~ .ios-form-icon {
    color: #6C6CE5 !important;
}