/* ===== HEADER: desktop (.msk-region) + mobile (.msk-rg-nav) ===== */
/* keep the globe from shrinking in the flex row (fixes the 1024px shrink) */
/* ---- Globe icon (image) ---- */
body {
  opacity: 1 !important;
}

.msk-region__globe,
.msk-rg-nav__globe{
  flex:0 0 auto !important;
  object-fit:contain;
}

.msk-region__globe{width:26px !important;}
.msk-rg-nav__globe{width:20px !important;height:20px !important;}

/* ---- Desktop navbar region toggle (.msk-region) ---- */
/* beats theme's .msk-mega{position:static} so the toggle <li> is the anchor,
   giving the same drop as the other mega dropdowns */
.msk-region.msk-mega{
  position:relative !important;
  align-self:stretch !important;
  display:flex !important;
  align-items:center !important;
}
.msk-region.msk-mega > .dropdown-menu{
  position:absolute !important;
  top:100% !important;
  left:0 !important;
  right:auto !important;
  margin-top:14px !important;
  min-width:0 !important;
}
.msk-region .msk-mega__panel{
  width:auto !important;
  min-width:160px !important;
  margin:0 !important;
  transform:none !important;
  max-height:none !important;
}

/* ---- Toggle text label (desktop) ---- */
.msk-region .msk-dd-toggle{gap:6px !important;}
.msk-region__label{font:inherit;color:#8D17CC !important;line-height:1;white-space:nowrap;}
.msk-region__arrow{flex:0 0 auto;transition:transform .2s ease;}
.msk-region.show .msk-region__arrow{transform:rotate(180deg);}
.msk-region .msk-dd-toggle:hover .msk-region__label{color:#8D17CC !important;}

/* ---- Flag/icon on the LEFT of each country name ---- */
.msk-region .msk-simple__list a{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-direction:row !important;      /* icon left, name right */
  white-space:nowrap !important;
}
.msk-region__flag{
  width:22px !important;height:15px !important;flex:0 0 auto !important;
  object-fit:cover;border-radius:2px;border:1px solid rgba(0,0,0,.1);
}
.msk-region__flag--globe{             /* Global item's globe */
  width:22px !important;height:25px !important;border:0 !important;border-radius:0 !important;object-fit:contain;
}


/* ---- Mobile region switcher (.msk-rg-nav) — click to open ---- */
.msk-rg-nav{position:relative;display:inline-block;line-height:1;}
.msk-rg-nav__toggle{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;padding:0;margin:0;cursor:pointer;color:inherit;font:inherit;line-height:1;
}
.msk-rg-nav__label{font:inherit;color:#8D17CC !important;line-height:1;white-space:nowrap;}
.msk-rg-nav__toggle:hover .msk-rg-nav__label{color:#8D17CC !important;}
.msk-rg-nav__caret{flex:none;color:inherit;transition:transform .2s ease;}
.msk-rg-nav.is-open .msk-rg-nav__caret{transform:rotate(180deg);}
.msk-rg-nav__menu{
  position:absolute;right:0;top:100%;margin:10px 0 0;padding:8px 0;
  min-width:250px;list-style:none;
  background:#fff;border:1px solid #e6e6e6;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.15);
  opacity:0;visibility:hidden;pointer-events:none;z-index:2147483647;
}
.msk-rg-nav.is-open .msk-rg-nav__menu{opacity:1;visibility:visible;pointer-events:auto;}
.msk-rg-nav__menu li{margin:0;}
.msk-rg-nav__menu a{display:block;padding:8px 16px;color:#000 !important;text-decoration:none;white-space:nowrap;}
.msk-rg-nav__menu a:hover{color:#8D17CC !important;background:#f5f5f5;}
/* ---- Mobile region switcher (.msk-rg-nav) — image globe + flags, matches header/footer ---- */
.msk-rg-nav__globe{width:24px !important;height:24px !important;object-fit:contain !important;}
.msk-rg-nav__menu li{display:block !important;margin:0 !important;padding:0 !important;list-style:none !important;float:none !important;width:auto !important;line-height:normal !important;}
.msk-rg-nav__menu a{
  display:flex !important;align-items:center !important;gap:8px !important;flex-direction:row !important;
  white-space:nowrap !important;padding:8px 16px !important;margin:0 !important;color:#000 !important;text-decoration:none !important;
}
.msk-rg-nav__menu a:hover{color:#8D17CC !important;background:#f5f5f5 !important;}
.msk-rg-nav__flag{width:22px !important;height:15px !important;flex:0 0 auto !important;object-fit:cover;border-radius:2px;border:1px solid rgba(0,0,0,.1);margin:0 !important;}
.msk-rg-nav__flag--globe{width:22px !important;height:22px !important;border:0 !important;border-radius:0 !important;object-fit:contain;}



/* ===== FOOTER: (.msk-rg) in social bar ===== */

/* --- align the switcher on the same line as the social icons (middle) --- */
.social-media{
  display:flex !important;align-items:center !important;justify-content:flex-end !important;
  gap:14px;flex-wrap:wrap;margin:0;padding:0;list-style:none;
}
.social-media > li{margin:0;list-style:none;display:inline-flex;align-items:center;}

/* --- nothing should clip the dropdown --- */
.footer-social,.footer-social .row,.footer-social [class*="col-"],.social-media,.msk-rg-social{overflow:visible !important;}

.msk-rg{position:relative;display:inline-flex;align-items:center;line-height:1;}
.msk-rg__toggle{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;padding:0;margin:0;cursor:pointer;color:inherit;font:inherit;line-height:1;
}
.msk-rg__caret{flex:0 0 auto;display:block;}                                    /* arrow first */
.msk-rg__globe{flex:0 0 auto;width:46px;height:46px;object-fit:contain;display:block;} /* globe second */

/* dropdown box — same look as header */
.msk-rg__menu{
  position:absolute;left:0;top:100%;margin:14px 0 0 !important;padding:8px 0 !important;
  min-width:150px;list-style:none !important;
  background:#fff;border:1px solid #e6e6e6;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.15);
  opacity:0;visibility:hidden;pointer-events:none;z-index:2147483647;
  display:block !important;
}
.msk-rg__menu::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:16px;}

.msk-rg:hover .msk-rg__menu,
.msk-rg:focus-within .msk-rg__menu{opacity:1 !important;visibility:visible !important;pointer-events:auto !important;}

/* HARD-RESET the menu items so theme .social-media li styles can't bleed in */
.msk-rg__menu li{
  display:block !important;margin:0 !important;padding:0 !important;
  list-style:none !important;float:none !important;width:auto !important;line-height:normal !important;
}
.msk-rg__menu a{
  display:flex !important;align-items:center !important;gap:8px !important;flex-direction:row !important;
  white-space:nowrap !important;padding:8px 16px !important;margin:0 !important;
  color:#000 !important;text-decoration:none !important;background:none;
}
.msk-rg__menu a:hover{color:#8D17CC !important;background:#f5f5f5 !important;}
.msk-rg__flag{width:22px !important;height:15px !important;flex:0 0 auto !important;object-fit:cover;border-radius:2px;border:1px solid rgba(0,0,0,.1);margin:0 !important;}
.msk-rg__flag--globe{width:22px !important;height:22px !important;border:0 !important;border-radius:0 !important;object-fit:contain;}

/* desktop-only; mobile uses the navbar switcher */
@media (max-width:991.98px){ .msk-rg{display:none !important;} }

/* ===== SHARED: globe, label, menu scroll, footer opens upward =====
   (from the old eu-translate.css, translate parts removed; must load last) */

/* Globe image + label alignment */
.msk-globe{width:20px !important;height:20px !important;flex:0 0 auto;object-fit:contain;display:inline-block;margin:0 !important;vertical-align:middle;}
.msk-region__label,.msk-rg-nav__label,.msk-rg__label{display:inline-flex;align-items:center;gap:6px;}

/* long lists scroll inside the dropdown */
.msk-region .msk-simple__list{max-height:min(70vh,480px);overflow-y:auto;overscroll-behavior:contain;padding-right:10px !important;}
.msk-rg-nav__menu{max-height:70vh;overflow-y:auto;overscroll-behavior:contain;}

/* footer: open UPWARD (it sits at the bottom of the page) */
.msk-rg__menu{top:auto !important;bottom:100%;margin:0 0 14px !important;max-height:60vh;overflow-y:auto;overscroll-behavior:contain;}
.msk-rg__menu::before{display:none;}
.msk-rg::after{content:"";position:absolute;left:0;right:0;bottom:100%;height:16px;} /* hover bridge over the 14px gap */

/* mobile region dropdown: fit content instead of 250px */
@media (max-width: 991.98px){
  .msk-rg-nav__menu{min-width:170px !important;width:max-content !important;max-width:calc(100vw - 24px) !important;}
}