/*
 * Tawk.to Chat Widget Position Fix
 * Ensures the chat widget remains fixed at bottom-right during scrolling
 */

/* Critical: Prevent body/html from creating stacking contexts */
html, body {
    /* These properties can break fixed positioning */
    transform: none !important;
    will-change: auto !important;
    /* Ensure smooth scrolling doesn't affect positioning */
    scroll-behavior: auto !important;
    /* Remove any perspective that could affect fixed elements */
    perspective: none !important;
    /* Ensure no transforms are applied during scroll */
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
}

/* Force Tawk.to widget container to stay fixed */
div[id*="tawk"] {
    position: fixed !important;
    z-index: 999999 !important;
    transform: none !important;
    will-change: auto !important;
    backface-visibility: hidden !important;
}

/* Specific targeting for Tawk.to widget iframe and containers */
iframe[src*="tawk.to"],
iframe[src*="embed.tawk.to"] {
    position: fixed !important;
    z-index: 999999 !important;
    transform: none !important;
    will-change: auto !important;
}

/* Ensure Tawk.to main container stays in place */
div[style*="position: fixed"] {
    transform: none !important;
    will-change: auto !important;
    backface-visibility: hidden !important;
}

/* Override any parent transforms that might affect the widget */
body, html {
    /* Prevent any transforms from affecting fixed positioned children */
    transform-style: flat !important;
}

/* Specific fix for elements that commonly create stacking contexts */
.nav-bar,
.navbar,
header {
    /* Remove will-change that creates stacking context issues */
    will-change: auto !important;
}

/* Ensure the widget appears above all site content */
div[id^="tawk_"],
div[class*="tawk"] {
    z-index: 999999 !important;
    position: fixed !important;
    transform: none !important;
    will-change: auto !important;
}

/* Additional specificity for Tawk.to bubble and widget */
div[style*="bottom"][style*="right"][style*="position: fixed"] {
    transform: none !important;
    will-change: auto !important;
    z-index: 999999 !important;
    backface-visibility: hidden !important;
}

/* Super specific Tawk.to selectors */
div[id^="twk-"],
div[class*="tawk-"],
iframe[title*="chat widget"],
iframe[title*="tawk"],
div[style*="tawk.to"] {
    position: fixed !important;
    z-index: 999999 !important;
    transform: none !important;
    will-change: auto !important;
    backface-visibility: hidden !important;
}

/* Override Bootstrap or other framework styles that might interfere */
.container,
.container-fluid,
.row,
.col,
.navbar,
.header,
.main,
.content,
section,
article {
    /* Ensure these common elements don't create stacking contexts */
    transform: none !important;
    will-change: auto !important;
    perspective: none !important;
}

/* Prevent any animations from affecting the widget - removed invalid keyframe */

/* Override any CSS that might be applied globally - but exclude hamburger menu */
*:not([id*="tawk"]):not([class*="tawk"]):not(.hamburger-menu):not(.mobile-menu):not(.dropdown-menu):not(.mobile-submenu) {
    transform-style: flat !important;
}

/* Ensure hamburger menu and mobile elements can still transform properly */
.hamburger-menu,
.mobile-menu,
.dropdown-menu,
.mobile-submenu,
.mobile-menu-content,
.nav-dropdown,
.dropdown-item,
.mobile-submenu-item,
.mobile-dropdown-icon {
    transform: none !important;
    will-change: auto !important;
    transform-style: initial !important;
}

/* Allow specific transforms for mobile submenu functionality */
.mobile-submenu {
    transform: translateY(-10px) !important;
    opacity: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

/* Special handling for dropdown animations */
.dropdown-menu.active,
.mobile-submenu.active {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure dropdowns can use their transforms */
.dropdown-menu {
    transform: translateY(15px) !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.dropdown-menu.active {
    transform: translateY(0) !important;
}