/* Complete Language Button Blue Line Fix */

/* Override all Bootstrap button classes that might cause blue lines */
.custom-language-btn,
.custom-language-btn:focus,
.custom-language-btn:active,
.custom-language-btn:hover,
.custom-language-btn:visited,
.custom-language-btn.focus,
.custom-language-btn.active,
.custom-language-btn:not(:disabled):not(.disabled):active,
.custom-language-btn:not(:disabled):not(.disabled).active {
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid #6c757d !important;
  border-color: #6c757d !important;
  color: #6c757d !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  text-underline-offset: 0 !important;
  
  /* Remove all webkit/mobile tap highlights */
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  
  /* Remove all transitions and animations */
  transition: none !important;
  animation: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  -webkit-animation: none !important;
  -moz-animation: none !important;
  -ms-animation: none !important;
  -o-animation: none !important;
}

/* Hover state - light gray background */
.custom-language-btn:hover {
  background-color: #f8f9fa !important;
  border-color: #6c757d !important;
  color: #495057 !important;
}

/* Active state - same as hover */
.custom-language-btn:active,
.custom-language-btn.active {
  background-color: #f8f9fa !important;
  border-color: #6c757d !important;
  color: #495057 !important;
}

/* Focus state - same as hover */
.custom-language-btn:focus,
.custom-language-btn.focus {
  background-color: #f8f9fa !important;
  border-color: #6c757d !important;
  color: #495057 !important;
}

/* Combined states */
.custom-language-btn:focus:active,
.custom-language-btn:active:focus,
.custom-language-btn:focus:hover,
.custom-language-btn:hover:focus,
.custom-language-btn:active:hover,
.custom-language-btn:hover:active {
  background-color: #f8f9fa !important;
  border-color: #6c757d !important;
  color: #495057 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Remove text selection highlighting */
.custom-language-btn::selection,
.custom-language-btn *::selection {
  background: transparent !important;
  color: inherit !important;
}

.custom-language-btn::-moz-selection,
.custom-language-btn *::-moz-selection {
  background: transparent !important;
  color: inherit !important;
}

/* Override Bootstrap's btn-outline-secondary if it's still applied */
.btn.custom-language-btn.btn-outline-secondary,
.btn.custom-language-btn.btn-outline-secondary:focus,
.btn.custom-language-btn.btn-outline-secondary:active,
.btn.custom-language-btn.btn-outline-secondary:hover {
  background-color: transparent !important;
  border-color: #6c757d !important;
  color: #6c757d !important;
  box-shadow: none !important;
}

/* Force override on scroll states */
.header.scrolled .custom-language-btn,
.header.scrolled .custom-language-btn:focus,
.header.scrolled .custom-language-btn:active,
.header.scrolled .custom-language-btn:hover {
  background-color: transparent !important;
  border-color: #6c757d !important;
  color: #6c757d !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Icon and text inside button - Remove all text decorations */
.custom-language-btn .globe-icon,
.custom-language-btn .language-code {
  color: inherit !important;
  -webkit-tap-highlight-color: transparent !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  text-underline-offset: 0 !important;
  border-bottom: none !important;
}

/* Remove any underlines from spans and text inside */
.custom-language-btn span,
.custom-language-btn i,
.custom-language-btn *,
.language-switcher span,
.language-switcher i,
.language-switcher * {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  text-underline-offset: 0 !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Media queries for different screen sizes */
@media (max-width: 768px) {
  .custom-language-btn,
  .custom-language-btn:focus,
  .custom-language-btn:active,
  .custom-language-btn:hover {
    background-color: transparent !important;
    border-color: #6c757d !important;
    color: #6c757d !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* Ensure no blue flash on any browser */
.custom-language-btn::-webkit-focus-ring {
  display: none !important;
}

.custom-language-btn::-moz-focus-inner {
  border: 0 !important;
  outline: none !important;
}

/* Remove any possible underlines from browser defaults */
.custom-language-btn,
.custom-language-btn:link,
.custom-language-btn:visited,
.custom-language-btn:hover,
.custom-language-btn:active,
.custom-language-btn:focus {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  text-decoration-style: none !important;
  text-decoration-thickness: 0 !important;
  text-underline-offset: 0 !important;
  border-bottom: none !important;
  border-bottom-color: transparent !important;
  border-bottom-width: 0 !important;
  border-bottom-style: none !important;
}

/* Force remove underlines on Arabic text specifically */
.custom-language-btn .language-code,
#currentLanguage {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  text-decoration-style: none !important;
  text-decoration-thickness: 0 !important;
  text-underline-offset: 0 !important;
  border-bottom: none !important;
  border-bottom-color: transparent !important;
  border-bottom-width: 0 !important;
  border-bottom-style: none !important;
}

/* Hide any accidental vertical scrollbar on language area */
.language-switcher,
.language-switcher button,
.custom-language-btn {
  overflow: hidden !important;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE/Edge */
  background-clip: padding-box !important; /* prevent border artifacts */
}

.language-switcher::-webkit-scrollbar,
.language-switcher button::-webkit-scrollbar,
.custom-language-btn::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Ensure the header actions never create inner scrollbars */
.header .header-actions,
.custom-navbar-menu .header-actions,
.custom-navbar-menu .language-switcher {
  overflow: visible !important; /* avoid inner scroll area */
}

/* Additional hardening against tiny scroll indicators and caret */
.custom-language-btn {
  white-space: nowrap !important;
  line-height: 1.2 !important;
  height: auto !important;
  min-height: 44px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border-image: none !important;
  caret-color: transparent !important; /* hide any caret-like artifacts */
  position: relative !important;
  overflow: hidden !important;
}

/* Mask any blue line with a white overlay */
.custom-language-btn::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  right: -2px; /* cover right edge */
  width: 4px;
  background: #ffffff;
  pointer-events: none;
  z-index: 1;
}

[dir="rtl"] .custom-language-btn::after {
  right: auto;
  left: -2px; /* cover left edge in RTL */
}

/* Hide scrollbar on the entire custom menu but allow scrolling via touch */
@media (max-width: 991.98px) {
  .custom-navbar-menu {
    overflow-y: auto !important; /* allow internal scroll */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(100vh - var(--header-h, 72px) - 16px) !important;
    background: #ffffff !important;
  }
  .custom-navbar-menu::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
  .custom-navbar-menu::-webkit-scrollbar-track { background: transparent !important; display: none !important; }
  .custom-navbar-menu::-webkit-scrollbar-thumb { background: transparent !important; border: none !important; display: none !important; }
  .custom-navbar-menu::-webkit-scrollbar-corner { background: transparent !important; display: none !important; }
  
  /* Force hide any blue scroll indicator */
  .custom-navbar-menu {
    -webkit-overflow-scrolling: touch !important;
    -ms-scroll-chaining: none !important;
    overscroll-behavior-y: contain !important;
  }
}