/* ==========================================================================
   Language switcher (replaces the static "NG-ENG" label) + hiding of the
   Google Translate default bar. Works with the light / night themes.
   ========================================================================== */

.pg-lang { position: relative; list-style: none; margin-top: 15px; }   /* centres the 40px button on the 70px nav row */

.pg-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 12px;
  margin: 0;
  font: inherit;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--pg-muted, #56627f);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: color .2s, background-color .2s, border-color .2s;
}
.pg-lang-btn:hover,
.pg-lang-btn[aria-expanded="true"] {
  color: var(--pg-heading, #0623b1);
  background: var(--pg-surface-2, rgba(238, 243, 255, .78));
  border-color: var(--pg-glass-border, rgba(6, 35, 177, .13));
}
.pg-lang-btn .fa { font-size: 17px; line-height: 1; }
.pg-lang-caret { width: 10px; height: 10px; transition: transform .25s ease; }
.pg-lang-btn[aria-expanded="true"] .pg-lang-caret { transform: rotate(180deg); }

.pg-lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 10050;
  min-width: 230px;
  max-height: min(70vh, 470px);
  overflow-y: auto;
  margin: 0;
  padding: 8px;
  list-style: none;
  border-radius: 16px;
  background: var(--pg-glass, rgba(255, 255, 255, .78));
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--pg-glass-border, rgba(6, 35, 177, .13));
  box-shadow: var(--pg-shadow, 0 14px 40px rgba(4, 38, 100, .18));
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  transform-origin: top right;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.pg-lang-menu.pg-open {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity .18s ease, transform .18s ease;
}
.pg-lang-menu li { list-style: none; margin: 0; padding: 0; }
.pg-lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--pg-text, #14213d);
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s;
}
.pg-lang-item:hover,
.pg-lang-item:focus-visible { background: var(--pg-surface-2, rgba(238, 243, 255, .78)); outline: none; }
.pg-lang-native { flex: 1; font-weight: 500; }
.pg-lang-eng { font-size: 12px; color: var(--pg-muted, #56627f); }
.pg-lang-item[aria-selected="true"] { color: var(--pg-heading, #0623b1); }
.pg-lang-item[aria-selected="true"] .pg-lang-native { font-weight: 700; }
.pg-lang-tick { width: 16px; height: 16px; opacity: 0; color: var(--pg-heading, #0623b1); }
.pg-lang-item[aria-selected="true"] .pg-lang-tick { opacity: 1; }
.pg-lang-item[data-code="ar"] .pg-lang-native { font-family: 'Segoe UI', Tahoma, Arial, sans-serif; direction: rtl; }

/* Phones: the menu opens inside the collapsed navigation instead of floating */
@media (max-width: 991px) {
  .pg-lang { display: block; padding: 4px 0; margin-top: 0; }
  .pg-lang-btn { width: 100%; height: 44px; justify-content: flex-start; }
  .pg-lang-menu { position: static; display: none; margin-top: 6px; max-height: 300px; transform: none; opacity: 1; visibility: visible; box-shadow: none; }
  .pg-lang-menu.pg-open { display: block; }
}

/* status message (e.g. translation unavailable) */
.pg-lang-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 100020;
  max-width: min(92vw, 460px);
  padding: 12px 18px;
  border-radius: 14px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pg-text, #14213d);
  background: var(--pg-glass, rgba(255, 255, 255, .78));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--pg-glass-border, rgba(6, 35, 177, .13));
  box-shadow: var(--pg-shadow, 0 10px 30px rgba(4, 38, 100, .18));
  transform: translate(-50%, 20px);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.pg-lang-toast.pg-show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- hide Google Translate's own UI; keep the page layout untouched ---------- */
#google_translate_element,
.goog-te-banner-frame,
.goog-te-balloon-frame,
.goog-te-gadget,
#goog-gt-tt,
.goog-tooltip,
body > .skiptranslate,
iframe.skiptranslate,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-ORHb-OEVmcd { display: none !important; }
body { top: 0 !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
font[style] { vertical-align: inherit; }

/* Arabic: text blocks read right-to-left; the page layout itself is kept as designed */
html[data-pg-lang="ar"] body { font-family: 'Poppins', 'Segoe UI', Tahoma, 'Noto Sans Arabic', Arial, sans-serif; }
html[data-pg-lang="ar"] :is(p, li, h1, h2, h3, h4, h5, h6, td, th, label, blockquote, figcaption, .card-description, .pgm-sub) {
  unicode-bidi: plaintext;
  text-align: start !important;
}
html[data-pg-lang="ar"] :is(input, textarea) { unicode-bidi: plaintext; }

/* The sticky-header plugin lifts the navigation out of <header class="top-area">, which left the home-page news pop-up
   (inside that header) above every nav dropdown. Put the nav wrapper above it, still below popups and the demo dialog. */
.sticky-wrapper { position: relative; z-index: 10001; }
