/* ====================================
   Critical Fixes for Al Wadha Website
   ==================================== */

/* 1. FIX: Header Black Glitch */
.navbar {
    background-color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.navbar-nav .nav-link {
    color: #333333 !important;
    font-weight: 500 !important;
}

.navbar-nav .nav-link:hover {
    color: #D3BF97 !important;
}

.navbar-nav .nav-link.active {
    color: #D3BF97 !important;
    font-weight: 600 !important;
}

/* Remove any black background from header elements */
.navbar *,
.navbar-brand *,
.navbar-collapse * {
    background-color: transparent !important;
}

/* Ensure contact button stays black */
.contact-now-btn {
    background-color: black !important;
    color: white !important;
}

/* 2. FIX: Service Cards Color Issue */
.service-card {
    background: #ffffff !important;
    color: #333333 !important;
}

.service-card h3,
.service-card h4,
.service-card h5 {
    color: #2c3e50 !important;
}

.service-card p {
    color: #6c757d !important;
}

.service-card .icon,
.service-card .service-icon {
    background: linear-gradient(135deg, #D3BF97, #C4A975) !important;
    color: white !important;
}

/* Fix for service page cards */
.services-section .service-card,
.service-section .service-card {
    background: white !important;
    border: 1px solid #e0e0e0 !important;
}

.services-section .service-card:hover {
    border-color: #D3BF97 !important;
    box-shadow: 0 5px 20px rgba(211, 191, 151, 0.3) !important;
}

/* 3. FIX: Request Service Form Colors */
#serviceModal .modal-content,
.modal-content {
    background-color: #ffffff !important;
    color: #333333 !important;
}

#serviceModal .modal-header {
    background: linear-gradient(135deg, #D3BF97, #C4A975) !important;
    color: white !important;
}

#serviceModal .form-control,
#serviceModal .form-select {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #ced4da !important;
}

#serviceModal .form-control:focus,
#serviceModal .form-select:focus {
    background-color: #ffffff !important;
    border-color: #D3BF97 !important;
    box-shadow: 0 0 0 0.2rem rgba(211, 191, 151, 0.25) !important;
}

#serviceModal .btn-primary {
    background: linear-gradient(135deg, #D3BF97, #C4A975) !important;
    border: none !important;
    color: white !important;
}

#serviceModal .btn-secondary {
    background-color: #6c757d !important;
    border: none !important;
    color: white !important;
}

/* Remove any unwanted black backgrounds */
.modal * {
    background-color: inherit !important;
}

.modal-content,
.modal-body {
    background-color: #ffffff !important;
}

/* 4. FIX: WhatsApp Chat Icon Position - ULTIMATE FIX */
#whatsapp-chat,
.whatsapp-chat,
#alwadha-wa-widget,
body > #alwadha-wa-widget,
body > .whatsapp-chat,
body > #whatsapp-chat {
    position: fixed !important;
    bottom: 24px !important;
    left: 24px !important;
    right: auto !important;
    top: auto !important;
    z-index: 2147483647 !important; /* Maximum z-index */

    /* ABSOLUTE PREVENTION OF MOVEMENT */
    transform: translateZ(0) !important; /* Force GPU layer */
    -webkit-transform: translateZ(0) !important;
    -moz-transform: translateZ(0) !important;
    -ms-transform: translateZ(0) !important;
    -o-transform: translateZ(0) !important;
    transform-origin: 0 0 !important;
    transition: none !important;
    animation: none !important;

    /* Disable all scroll-related properties */
    will-change: unset !important;
    scroll-behavior: auto !important;
    overscroll-behavior: none !important;

    /* Lock positioning */
    margin: 0 !important;
    padding: 0 !important;

    /* Prevent inheritance of transforms */
    transform-style: flat !important;
    -webkit-transform-style: flat !important;

    /* Force hardware acceleration but prevent movement */
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    perspective: none !important;
    -webkit-perspective: none !important;

    /* Ensure it's not affected by parent transforms */
    contain: layout style paint !important;
    isolation: isolate !important;

    /* Prevent any scroll-based positioning */
    pointer-events: auto !important;
    touch-action: auto !important;
}

/* Ensure WhatsApp button itself doesn't move */
.whatsapp-btn,
.alwadha-wa-button {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #25D366 !important;
    color: #ffffff !important;
    padding: 16px 24px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;

    /* Remove any vertical movement animations */
    animation: pulse-static 2s infinite !important;
    transform: none !important;
}

/* Static pulse animation that doesn't move the element */
@keyframes pulse-static {
    0%, 100% {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    50% {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 0 0 10px rgba(37, 211, 102, 0);
    }
}

.whatsapp-btn:hover,
.alwadha-wa-button:hover {
    background: #128C7E !important;
    color: #ffffff !important;
    /* Only scale slightly on hover, no vertical movement */
    transform: scale(1.05) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
    text-decoration: none !important;
}

/* Ensure no parent elements can affect WhatsApp position */
body > #whatsapp-chat,
body > .whatsapp-chat {
    position: fixed !important;
}

/* Mobile specific WhatsApp fixes */
@media (max-width: 768px) {
    #whatsapp-chat,
    .whatsapp-chat,
    #alwadha-wa-widget {
        bottom: 16px !important;
        left: 16px !important;
        position: fixed !important;
        z-index: 2147483647 !important;
        transform: none !important;
    }

    .whatsapp-btn {
        padding: 12px 16px !important;
        gap: 8px !important;
    }

    .whatsapp-text {
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    .whatsapp-btn i {
        font-size: 18px !important;
    }
}

/* 5. Additional Service Page Fixes */
.services-page .service-item {
    background-color: #ffffff !important;
    color: #333333 !important;
}

.services-page .service-icon {
    background: linear-gradient(135deg, #D3BF97, #C4A975) !important;
    color: white !important;
}

/* Fix any black text that should be visible */
.text-dark {
    color: #333333 !important;
}

.text-black {
    color: #000000 !important;
}

/* Ensure proper contrast for all text */
p, span, div, li {
    color: inherit;
}

/* Fix for navigation in mobile responsive that might be causing black issue */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: #ffffff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        margin-top: 10px !important;
        padding: 10px !important;
    }

    .navbar-nav .nav-link {
        color: #333333 !important;
        padding: 10px 15px !important;
    }

    .navbar-nav .nav-link:hover {
        background-color: #f8f9fa !important;
        color: #D3BF97 !important;
        border-radius: 5px !important;
    }
}

/* Override any problematic dark mode styles */
@media (prefers-color-scheme: dark) {
    .navbar,
    .navbar-collapse,
    .service-card,
    .modal-content {
        background-color: #ffffff !important;
        color: #333333 !important;
    }
}

/* Ensure WhatsApp widget is always on top of everything */
#whatsapp-chat,
#alwadha-wa-widget {
    z-index: 2147483647 !important; /* Maximum z-index value */
    position: fixed !important;
}

/* Remove any conflicting transforms or transitions */
.whatsapp-chat,
.whatsapp-chat * {
    -webkit-transform-style: flat !important;
    transform-style: flat !important;
}

/* Force WhatsApp to stay in viewport */
@supports (position: fixed) {
    #whatsapp-chat,
    .whatsapp-chat {
        position: fixed !important;
    }
}

/* Fallback for older browsers */
@supports not (position: fixed) {
    #whatsapp-chat,
    .whatsapp-chat {
        position: absolute !important;
    }
}

/* CRITICAL: Prevent parent transforms from affecting fixed elements */
body {
    transform-style: flat !important;
}

/* Reset transforms on main containers */
main,
.container,
.container-fluid,
.wrapper,
#wrapper,
.gov-hero-modern,
.floating-card {
    transform: none !important;
    will-change: auto !important;
}

/* Ensure the WhatsApp widget is not affected by any scroll-based animations */
html:has(#alwadha-wa-widget) {
    scroll-behavior: smooth;
}

/* Override any scroll-based transform on parent elements */
*:has(> #alwadha-wa-widget),
*:has(> #whatsapp-chat),
*:has(> .whatsapp-chat) {
    transform: none !important;
    transform-style: flat !important;
}