/*
 * GI Mobile Language Bar Custom Flags v1.0.5
 * OpenCart 3.0.3.8 / Journal3 mobile language switcher enhancement
 * v1.0.5: backend adjustable bar height, button size, and spacing.
 */

.gi-mobile-language-bar {
  display: none;
}

#gi-mobile-language-form {
  display: none !important;
}

@media (max-width: 991px) {
  #gi-mobile-language-bar.gi-mobile-language-bar,
  .gi-mobile-language-bar {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--gi-mlb-button-gap, 14px);
    width: 100%;
    height: var(--gi-mlb-bar-height, 68px);
    min-height: var(--gi-mlb-bar-height, 68px);
    padding: 0 12px;
    box-sizing: border-box;
    background: var(--gi-mlb-bg, #ed1c24);
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    position: relative;
    z-index: 9998;
    scrollbar-width: none;
    transform: translateZ(0);
  }

  .gi-mobile-language-bar::-webkit-scrollbar {
    display: none;
  }

  .gi-mobile-lang-item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--gi-mlb-button-size, 48px);
    height: var(--gi-mlb-button-size, 48px);
    min-width: var(--gi-mlb-button-size, 48px);
    min-height: var(--gi-mlb-button-size, 48px);
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.82), 0 2px 5px rgba(0, 0, 0, 0.18);
    line-height: 1;
    appearance: none;
    -webkit-appearance: none;
  }

  .gi-mobile-lang-item img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: inherit;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.18);
  }

  .gi-mobile-lang-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.96);
    color: #103f49;
    font-size: calc(var(--gi-mlb-button-size, 48px) * 0.32);
    font-weight: 800;
    font-family: Arial, 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    letter-spacing: -0.02em;
  }

  .gi-mobile-lang-item.is-active,
  .gi-mobile-lang-item.active {
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px rgba(16, 63, 73, 0.92), 0 3px 8px rgba(0, 0, 0, 0.22);
  }

  .gi-mobile-lang-item:focus {
    outline: none;
  }

  .gi-mobile-lang-item:focus-visible {
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px rgba(16, 63, 73, 0.92), 0 3px 8px rgba(0, 0, 0, 0.22);
  }

  html.gi-mlb-hide-original #form-language,
  html.gi-mlb-switching #form-language,
  body.gi-mlb-hide-original #form-language,
  body.gi-mlb-switching #form-language,
  body.gi-mlb-hide-original form#form-language,
  body.gi-mlb-hide-original header #form-language,
  body.gi-mlb-hide-original #header #form-language,
  body.gi-mlb-hide-original .top-bar #form-language,
  body.gi-mlb-hide-original .top-menu #form-language,
  body.gi-mlb-hide-original .mobile-bar #form-language,
  body.gi-mlb-hide-original .mobile-header #form-language,
  body.gi-mlb-hide-original .j-menu #form-language,
  body.gi-mlb-hide-original .j-header #form-language,
  body.gi-mlb-hide-original .journal-header #form-language,
  body.gi-mlb-hide-original .language-currency #form-language,
  body.gi-mlb-hide-original .top-bar .language,
  body.gi-mlb-hide-original .top-menu .language,
  body.gi-mlb-hide-original .mobile-bar .language,
  body.gi-mlb-hide-original .mobile-header .language,
  body.gi-mlb-hide-original header .language,
  body.gi-mlb-hide-original #header .language,
  body.gi-mlb-hide-original .j-menu .language,
  body.gi-mlb-hide-original .j-header .language,
  body.gi-mlb-hide-original .journal-header .language,
  body.gi-mlb-hide-original .language-currency .language,
  body.gi-mlb-hide-original .mobile-language,
  body.gi-mlb-hide-original .header-language,
  body.gi-mlb-hide-original .journal-language,
  body.gi-mlb-hide-original .journal3-language,
  body.gi-mlb-hide-original .j-language,
  body.gi-mlb-hide-original .language-selector,
  body.gi-mlb-hide-original .language-dropdown {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (min-width: 992px) {
  #gi-mobile-language-bar.gi-mobile-language-bar,
  .gi-mobile-language-bar {
    display: none !important;
  }
}