/* ===== Microsoft Edge Compatibility Fixes ===== */

/* Edge-specific fallbacks for CSS custom properties */
@supports not (background: var(--test)) {
  /* Fallback for older Edge versions that don't support CSS variables */

  body {
    background: linear-gradient(135deg, #0a0a0f, #1a1a2e);
    color: #f0e7ff;
  }

  .cursor {
    background: radial-gradient(circle, #00ffff, #9333ea, #6b21a8);
    box-shadow: 0 0 15px #00ffff, 0 0 25px #9333ea;
  }

  .cursor-trail {
    border: 3px solid #bb86fc;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.15), transparent);
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #9333ea, #7c3aed, #6b21a8);
  }

  ::-webkit-scrollbar-track {
    background: linear-gradient(45deg, #1a1a2e, #16213e);
  }
}

/* Fix for Edge animation performance */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* Legacy Edge specific styles */
  .cursor,
  .cursor-trail {
    will-change: auto;
  }

  /* Simplified animations for Edge */
  .cursor {
    animation: simple-pulse 2s ease-in-out infinite;
  }

  @keyframes simple-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
  }
}

/* Edge Chromium specific fixes */
@supports (-webkit-appearance: none) and (not (-moz-appearance: none)) {
  /* This targets Chromium-based Edge */

  /* Ensure backdrop-filter fallback */
  .cursor-trail {
    background: rgba(168, 85, 247, 0.1);
  }

  /* Fix for gradient rendering issues */
  .cursor {
    background: radial-gradient(circle at center, #00ffff 0%, #9333ea 50%, #6b21a8 100%);
  }
}

/* Fix for contrast and readability */
@media (prefers-contrast: high) {
  .cursor {
    background: #ffffff;
    border: 2px solid #000000;
    box-shadow: 0 0 10px #ffffff;
  }

  .cursor-trail {
    border: 3px solid #ffffff;
    background: rgba(255, 255, 255, 0.2);
  }
}

/* Fix for reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .cursor,
  .cursor-trail,
  ::-webkit-scrollbar-thumb {
    animation: none !important;
    transition: none !important;
  }
}

/* Ensure proper z-index stacking for Edge */
.cursor {
  z-index: 2147483647 !important; /* Maximum z-index for Edge */
}

.cursor-trail {
  z-index: 2147483646 !important;
}

/* Edge-specific media query fixes */
@media screen and (min-width: 0\0) {
  /* IE10+ and Edge specific */
  .cursor {
    display: block;
    visibility: visible;
  }
}

/* Progressive enhancement for modern Edge features */
@supports (backdrop-filter: blur(10px)) {
  .cursor-trail {
    backdrop-filter: blur(3px);
  }
}

@supports (mix-blend-mode: multiply) {
  .cursor {
    mix-blend-mode: normal;
  }
}

/* Fix for Edge scrollbar appearance */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar-corner {
    background: #1a1a2e;
  }
}

/* Edge font rendering fixes */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Fix for Edge CSS Grid issues if any */
@supports (display: grid) {
  .grid-container {
    display: grid;
  }
}

/* Edge-specific performance optimizations */
.cursor,
.cursor-trail {
  transform: translateZ(0); /* Force hardware acceleration */
  backface-visibility: hidden;
}

/* Fix for Edge flexbox issues */
@supports (display: flex) {
  .flex-container {
    display: flex;
  }
}

/* Edge color profile fixes */
@media (color-gamut: srgb) {
  .cursor {
    background: radial-gradient(circle, #00ffff, #9333ea, #6b21a8);
  }
}

/* Fix for Edge viewport units */
@supports (height: 100vh) {
  .full-height {
    height: 100vh;
  }
}

@supports not (height: 100vh) {
  .full-height {
    height: 100%;
  }
}

/* ===== Language Switcher Edge Compatibility Fixes ===== */

/* Specific fixes for Microsoft Edge */
@supports (-ms-accelerator: true) {
    /* Edge Legacy fixes */
    .language-switcher,
    .language-switcher-mobile {
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-align: center !important;
        align-items: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;
    }

    .language-switcher button,
    .language-switcher [id$="-lang-btn"] {
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-align: center !important;
        align-items: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;
        border: 1px solid rgba(147, 51, 234, 0.3) !important;
        filter: blur(0px) !important;
        -ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelradius=10)" !important;
    }

    .language-switcher span {
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-align: center !important;
        align-items: center !important;
    }

    /* Fallback background for Edge Legacy */
    .language-switcher button:hover,
    .language-switcher [id$="-lang-btn"]:hover {
        background: rgba(147, 51, 234, 0.3) !important;
        border-color: rgba(147, 51, 234, 0.6) !important;
    }
}

/* Modern Edge (Chromium) fixes */
@supports (appearance: none) {
    .language-switcher,
    .language-switcher-mobile {
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    .language-switcher button,
    .language-switcher [id$="-lang-btn"] {
        -webkit-appearance: none !important;
        appearance: none !important;
        outline: none !important;
        border: 1px solid rgba(147, 51, 234, 0.2) !important;
        background: rgba(255, 255, 255, 0.08) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    .language-switcher button:focus,
    .language-switcher [id$="-lang-btn"]:focus {
        outline: 2px solid rgba(147, 51, 234, 0.5) !important;
        outline-offset: 2px !important;
    }
}

/* General Edge compatibility for language switcher */
.language-switcher,
.language-switcher-mobile {
    /* Ensure proper box model */
    box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;

    /* Prevent text selection issues in Edge */
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;

    /* Fix font rendering in Edge */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

.language-switcher button,
.language-switcher [id$="-lang-btn"] {
    /* Fix button styling in Edge */
    border: 1px solid rgba(147, 51, 234, 0.2) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.9) !important;

    /* Ensure proper sizing */
    min-width: 80px !important;
    height: 40px !important;
    padding: 8px 12px !important;

    /* Fix text alignment */
    text-align: center !important;
    vertical-align: middle !important;

    /* Smooth transitions */
    transition: all 0.2s ease-in-out !important;
    -webkit-transition: all 0.2s ease-in-out !important;
    -moz-transition: all 0.2s ease-in-out !important;
    -ms-transition: all 0.2s ease-in-out !important;

    /* Fix cursor */
    cursor: pointer !important;

    /* Fix overflow */
    overflow: hidden !important;

    /* Fix white space */
    white-space: nowrap !important;

    /* Edge-specific rendering */
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

.language-switcher button:hover,
.language-switcher [id$="-lang-btn"]:hover {
    background: rgba(147, 51, 234, 0.15) !important;
    border-color: rgba(147, 51, 234, 0.4) !important;
    color: rgba(255, 255, 255, 1) !important;
    transform: translateY(-1px) translateZ(0) !important;
    -webkit-transform: translateY(-1px) translateZ(0) !important;
    -moz-transform: translateY(-1px) translateZ(0) !important;
    -ms-transform: translateY(-1px) translateZ(0) !important;
}

.language-switcher button:active,
.language-switcher [id$="-lang-btn"]:active {
    transform: translateY(0) translateZ(0) !important;
    -webkit-transform: translateY(0) translateZ(0) !important;
    -moz-transform: translateY(0) translateZ(0) !important;
    -ms-transform: translateY(0) translateZ(0) !important;
}

/* Dropdown fixes for Edge */
.language-switcher [id$="-lang-dropdown"],
.language-switcher-mobile [id$="-lang-dropdown"] {
    border: 1px solid rgba(147, 51, 234, 0.3) !important;
    background: rgba(17, 24, 39, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
    z-index: 9999 !important;
    transform: translateZ(0) !important;

    /* Edge-specific positioning fixes */
    position: absolute !important;
    top: calc(100% + 8px) !important; /* Position below the button with 8px gap */
    right: 0 !important;
    left: auto !important;
    margin-top: 0 !important;

    /* Ensure proper viewport positioning */
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
}

/* Edge Legacy specific dropdown positioning */
@supports (-ms-accelerator: true) {
    .language-switcher [id$="-lang-dropdown"],
    .language-switcher-mobile [id$="-lang-dropdown"] {
        top: calc(100% + 12px) !important;
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        transform: translateY(0) !important;
        -ms-transform: translateY(0) !important;
        /* Ensure it stays within viewport */
        margin-top: 0 !important;
        margin-bottom: 20px !important;
    }
}

/* Edge Chromium specific dropdown positioning */
@supports (appearance: none) and (-webkit-appearance: none) {
    .language-switcher [id$="-lang-dropdown"],
    .language-switcher-mobile [id$="-lang-dropdown"] {
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: auto !important;
        margin-top: 0 !important;
        transform: translateZ(0) !important;
    }

    /* Mobile dropdown specific positioning for Edge Chromium */
    .language-switcher-mobile [id$="-lang-dropdown"] {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }
}

/* Ensure parent container has proper positioning context */
.language-switcher,
.language-switcher-mobile {
    position: relative !important;
    z-index: 1000 !important;
}

/* Fix for Edge viewport boundary detection */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .language-switcher [id$="-lang-dropdown"],
    .language-switcher-mobile [id$="-lang-dropdown"] {
        /* Force position to be below button */
        top: 100% !important;
        margin-top: 12px !important;
        position: absolute !important;
        right: 0 !important;

        /* Ensure it doesn't go off-screen */
        max-width: 200px !important;
        width: max-content !important;
        min-width: 160px !important;
    }
}

/* Additional Edge-specific fixes for dropdown positioning */
@supports selector(::-webkit-scrollbar) {
    .language-switcher [id$="-lang-dropdown"],
    .language-switcher-mobile [id$="-lang-dropdown"] {
        /* Force recalculation of position */
        will-change: transform !important;
        contain: layout !important;
    }
}

/* Edge-specific media query for small screens */
@media screen and (max-height: 600px) {
    .language-switcher [id$="-lang-dropdown"],
    .language-switcher-mobile [id$="-lang-dropdown"] {
        max-height: 300px !important;
        top: calc(100% + 4px) !important;
    }
}

/* Additional Edge fixes for dropdown containment */
@supports (-ms-high-contrast: active) or (-ms-high-contrast: none) {
    /* Edge Legacy - ensure dropdown stays within viewport */
    .language-switcher [id$="-lang-dropdown"],
    .language-switcher-mobile [id$="-lang-dropdown"] {
        /* Prevent dropdown from appearing above viewport */
        top: calc(100% + 8px) !important;
        bottom: auto !important;

        /* Ensure it's properly contained */
        max-height: calc(100vh - 100px) !important;
        overflow-y: auto !important;

        /* Fix positioning context */
        position: absolute !important;
        z-index: 10000 !important;

        /* Ensure proper box model */
        box-sizing: border-box !important;

        /* Prevent text selection issues */
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }
}

/* Edge Chromium additional fixes */
@supports (-webkit-appearance: none) and (appearance: none) {
    .language-switcher [id$="-lang-dropdown"],
    .language-switcher-mobile [id$="-lang-dropdown"] {
        /* Force GPU acceleration for better performance */
        transform: translateZ(0) !important;
        will-change: transform !important;

        /* Improve rendering */
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;

        /* Ensure proper stacking */
        isolation: isolate !important;

        /* Fix potential flickering */
        -webkit-transform: translateZ(0) !important;
        -moz-transform: translateZ(0) !important;
        -ms-transform: translateZ(0) !important;
    }
}

/* Force dropdown to stay below button in all Edge versions */
.language-switcher,
.language-switcher-mobile {
    /* Ensure stacking context */
    position: relative !important;
    z-index: 1000 !important;
    isolation: isolate !important;
}

/* Edge-specific: Force hidden state for dropdowns */
.language-switcher [id$="-lang-dropdown"].hidden,
.language-switcher-mobile [id$="-lang-dropdown"].hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
    transform: translateY(-100%) !important;
    -webkit-transform: translateY(-100%) !important;
    -moz-transform: translateY(-100%) !important;
    -ms-transform: translateY(-100%) !important;
}

/* Edge-specific: Ensure dropdowns are hidden by default */
.language-switcher [id$="-lang-dropdown"],
.language-switcher-mobile [id$="-lang-dropdown"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
    transform: translateY(-100%) !important;
    -webkit-transform: translateY(-100%) !important;
    -moz-transform: translateY(-100%) !important;
    -ms-transform: translateY(-100%) !important;
}

.language-switcher [id$="-lang-dropdown"]:not(.hidden),
.language-switcher-mobile [id$="-lang-dropdown"]:not(.hidden) {
    /* Force dropdown below button */
    top: calc(100% + 8px) !important;
    bottom: auto !important;
    position: absolute !important;

    /* Prevent dropdown from going off-screen */
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    /* Ensure it's visible when not hidden */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    height: auto !important;
    transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;
    -moz-transform: translateY(0) !important;
    -ms-transform: translateY(0) !important;

    /* Force highest z-index */
    z-index: 2147483647 !important;
}/* Edge-specific scrollbar styling for dropdown */
@supports selector(::-webkit-scrollbar) {
    .language-switcher [id$="-lang-dropdown"]::-webkit-scrollbar,
    .language-switcher-mobile [id$="-lang-dropdown"]::-webkit-scrollbar {
        width: 6px !important;
    }

    .language-switcher [id$="-lang-dropdown"]::-webkit-scrollbar-track,
    .language-switcher-mobile [id$="-lang-dropdown"]::-webkit-scrollbar-track {
        background: rgba(55, 65, 81, 0.5) !important;
        border-radius: 3px !important;
    }

    .language-switcher [id$="-lang-dropdown"]::-webkit-scrollbar-thumb,
    .language-switcher-mobile [id$="-lang-dropdown"]::-webkit-scrollbar-thumb {
        background: rgba(147, 51, 234, 0.6) !important;
        border-radius: 3px !important;
    }

    .language-switcher [id$="-lang-dropdown"]::-webkit-scrollbar-thumb:hover,
    .language-switcher-mobile [id$="-lang-dropdown"]::-webkit-scrollbar-thumb:hover {
        background: rgba(147, 51, 234, 0.8) !important;
    }
}

.language-switcher .lang-option,
.language-switcher-mobile .lang-option {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 10px 16px !important;
    transition: all 0.15s ease !important;
    -webkit-transition: all 0.15s ease !important;
    -moz-transition: all 0.15s ease !important;
    -ms-transition: all 0.15s ease !important;
    cursor: pointer !important;
    transform: translateZ(0) !important;
}

.language-switcher .lang-option:hover,
.language-switcher-mobile .lang-option:hover {
    background: rgba(147, 51, 234, 0.2) !important;
    color: rgba(255, 255, 255, 1) !important;
}

/* SVG fixes for Edge */
.language-switcher svg,
.language-switcher-mobile svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    transition: transform 0.2s ease !important;
    -webkit-transition: transform 0.2s ease !important;
    -moz-transition: transform 0.2s ease !important;
    -ms-transition: transform 0.2s ease !important;
    transform: translateZ(0) !important;
}

/* Loading states for Edge */
.language-switcher.lang-loading,
.language-switcher-mobile.lang-loading {
    opacity: 0.7 !important;
    pointer-events: none !important;
}

.language-switcher.lang-loading button::after,
.language-switcher-mobile.lang-loading button::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 16px !important;
    height: 16px !important;
    margin: -8px 0 0 -8px !important;
    border: 2px solid rgba(147, 51, 234, 0.3) !important;
    border-top-color: rgba(147, 51, 234, 1) !important;
    border-radius: 50% !important;
    animation: edge-spin 1s linear infinite !important;
    -webkit-animation: edge-spin 1s linear infinite !important;
    -moz-animation: edge-spin 1s linear infinite !important;
    -ms-animation: edge-spin 1s linear infinite !important;
}

/* Success animation for Edge */
.language-switcher.lang-success,
.language-switcher-mobile.lang-success {
    animation: edge-successPulse 0.6s ease !important;
    -webkit-animation: edge-successPulse 0.6s ease !important;
    -moz-animation: edge-successPulse 0.6s ease !important;
    -ms-animation: edge-successPulse 0.6s ease !important;
}

/* Keyframes for Edge language switcher */
@keyframes edge-spin {
    0% { transform: rotate(0deg) translateZ(0); }
    100% { transform: rotate(360deg) translateZ(0); }
}

@-webkit-keyframes edge-spin {
    0% { -webkit-transform: rotate(0deg) translateZ(0); }
    100% { -webkit-transform: rotate(360deg) translateZ(0); }
}

@-moz-keyframes edge-spin {
    0% { -moz-transform: rotate(0deg) translateZ(0); }
    100% { -moz-transform: rotate(360deg) translateZ(0); }
}

@-ms-keyframes edge-spin {
    0% { -ms-transform: rotate(0deg) translateZ(0); }
    100% { -ms-transform: rotate(360deg) translateZ(0); }
}

@keyframes edge-successPulse {
    0% { transform: scale(1) translateZ(0); }
    50% { transform: scale(1.05) translateZ(0); }
    100% { transform: scale(1) translateZ(0); }
}

@-webkit-keyframes edge-successPulse {
    0% { -webkit-transform: scale(1) translateZ(0); }
    50% { -webkit-transform: scale(1.05) translateZ(0); }
    100% { -webkit-transform: scale(1) translateZ(0); }
}

@-moz-keyframes edge-successPulse {
    0% { -moz-transform: scale(1) translateZ(0); }
    50% { -moz-transform: scale(1.05) translateZ(0); }
    100% { -moz-transform: scale(1) translateZ(0); }
}

@-ms-keyframes edge-successPulse {
    0% { -ms-transform: scale(1) translateZ(0); }
    50% { -ms-transform: scale(1.05) translateZ(0); }
    100% { -ms-transform: scale(1) translateZ(0); }
}

/* RTL Support for Edge */
[dir="rtl"] .language-switcher svg,
[dir="rtl"] .language-switcher-mobile svg {
    margin-left: 0 !important;
    margin-right: 8px !important;
}

/* High Contrast Mode for Edge language switcher */
@media (prefers-contrast: high) {
    .language-switcher button,
    .language-switcher [id$="-lang-btn"] {
        border: 2px solid #ffffff !important;
        background: #000000 !important;
        color: #ffffff !important;
    }

    .language-switcher button:hover,
    .language-switcher [id$="-lang-btn"]:hover {
        background: #ffffff !important;
        color: #000000 !important;
    }
}

/* Reduced Motion for Edge language switcher */
@media (prefers-reduced-motion: reduce) {
    .language-switcher *,
    .language-switcher-mobile * {
        animation: none !important;
        transition: none !important;
        -webkit-animation: none !important;
        -webkit-transition: none !important;
        -moz-animation: none !important;
        -moz-transition: none !important;
        -ms-animation: none !important;
        -ms-transition: none !important;
    }
}

/* ===== Fallback Translation Indicator Styles ===== */

/* Visual indicator for fallback translations */
.fallback-translation {
    position: relative !important;
    opacity: 0.85 !important;
}

.fallback-translation::after {
    content: "" !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 100% !important;
    height: 1px !important;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.5), rgba(59, 130, 246, 0.2)) !important;
    pointer-events: none !important;
}

/* Different indicator for input elements */
input.fallback-translation::after {
    display: none !important;
}

input.fallback-translation {
    border-bottom: 1px dotted rgba(59, 130, 246, 0.4) !important;
}

/* Hover effect for fallback indicator */
.fallback-translation:hover::after {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.8), rgba(59, 130, 246, 0.4)) !important;
}

/* Accessibility support for fallback indicators */
@media (prefers-reduced-motion: reduce) {
    .fallback-translation::after {
        animation: none !important;
        transition: none !important;
    }
}

/* High contrast mode for fallback indicators */
@media (prefers-contrast: high) {
    .fallback-translation::after {
        background: #0066cc !important;
        height: 2px !important;
    }

    input.fallback-translation {
        border-bottom: 2px solid #0066cc !important;
    }
}