/*
 * CAROUSEL & IMAGE VISIBILITY FIX
 * Fixes dark mode image display issues and distorted images
 */

/* CAROUSEL IMAGES - PERFECT VISIBILITY IN BOTH MODES */
.carousel img,
.owl-carousel img,
.header-carousel img,
.carousel-item img {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    transition: all 0.3s ease !important;
}

/* DARK MODE CAROUSEL FIXES */
[data-theme="dark"] .carousel img,
[data-theme="dark"] .owl-carousel img,
[data-theme="dark"] .header-carousel img,
[data-theme="dark"] .carousel-item img {
    filter: brightness(0.95) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    border-radius: 8px !important;
}

/* LIGHT MODE CAROUSEL - ENSURE NO FILTERS */
[data-theme="light"] .carousel img,
[data-theme="light"] .owl-carousel img,
[data-theme="light"] .header-carousel img,
[data-theme="light"] .carousel-item img {
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* FIX DISTORTED IMAGES - PROPER ASPECT RATIOS */
.carousel-item {
    height: 500px !important;
    overflow: hidden !important;
}

.carousel-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* ABOUT SECTION IMAGE FIXES */
.about img,
.about .position-relative img,
.about .position-absolute img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 10px !important;
}

[data-theme="dark"] .about img,
[data-theme="dark"] .about .position-relative img,
[data-theme="dark"] .about .position-absolute img {
    filter: brightness(0.95) contrast(1.05) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
}

/* SERVICE/FEATURE IMAGES */
.service-item img,
.feature-card img,
.portfolio-item img {
    width: 100% !important;
    height: 250px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 8px !important;
}

[data-theme="dark"] .service-item img,
[data-theme="dark"] .feature-card img,
[data-theme="dark"] .portfolio-item img {
    filter: brightness(0.9) contrast(1.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* TEAM MEMBER IMAGES */
.team-item img,
.team-member img {
    width: 100% !important;
    height: 300px !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 10px !important;
}

[data-theme="dark"] .team-item img,
[data-theme="dark"] .team-member img {
    filter: brightness(0.95) contrast(1.05) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
}

/* BLOG/PROJECT IMAGES */
.blog-item img,
.project-img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
}

[data-theme="dark"] .blog-item img,
[data-theme="dark"] .project-img {
    filter: brightness(0.9) contrast(1.1) !important;
}

/* LOGO AND BRAND IMAGES */
.navbar-brand img,
.logo img {
    max-height: 50px !important;
    width: auto !important;
    object-fit: contain !important;
}

[data-theme="dark"] .navbar-brand img,
[data-theme="dark"] .logo img {
    filter: brightness(1.1) contrast(1.1) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    padding: 5px !important;
    border-radius: 8px !important;
}

/* FIX FOR MISSING IMAGES - PLACEHOLDER */
img[src=""],
img:not([src]),
img[src*="my_recom.png"] {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb) !important;
    border: 2px dashed #d1d5db !important;
    border-radius: 8px !important;
    position: relative !important;
    min-height: 200px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[data-theme="dark"] img[src=""],
[data-theme="dark"] img:not([src]),
[data-theme="dark"] img[src*="my_recom.png"] {
    background: linear-gradient(135deg, #374151, #4b5563) !important;
    border: 2px dashed rgba(255, 255, 255, 0.3) !important;
}

img[src=""]:before,
img:not([src]):before,
img[src*="my_recom.png"]:before {
    content: "🖼️ Image Not Found" !important;
    color: #6b7280 !important;
    font-size: 1rem !important;
    position: absolute !important;
}

[data-theme="dark"] img[src=""]:before,
[data-theme="dark"] img:not([src]):before,
[data-theme="dark"] img[src*="my_recom.png"]:before {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* RESPONSIVE IMAGE FIXES */
@media (max-width: 768px) {
    .carousel-item {
        height: 300px !important;
    }
    
    .team-item img,
    .team-member img {
        height: 250px !important;
    }
    
    .service-item img,
    .feature-card img {
        height: 200px !important;
    }
}

@media (max-width: 576px) {
    .carousel-item {
        height: 250px !important;
    }
    
    .about img {
        margin-bottom: 20px !important;
    }
}

/* PRINT STYLES */
@media print {
    [data-theme="dark"] img {
        filter: none !important;
        border: none !important;
    }
}