/* Regional site switcher — shared by gpswhizz.com and brisbanecpf.com.
   Namespaced lang-* so it cannot collide with either site's theme.
   Colours are driven by CSS variables so each site can tint it in its own stylesheet. */
:root {
  --lang-fg: #4e5155;
  --lang-bg: #fff;
  --lang-border: rgba(0, 0, 0, .15);
  --lang-hover: #f4f5f9;
  --lang-menu-fg: #212529;
  --lang-accent: #444bf8;
  --lang-accent-fg: #fff;
  --lang-radius: 4px;
}

.lang-dd { position: relative; display: inline-block; font-family: inherit; }

.lang-dd__toggle {
  display: inline-flex; align-items: center; gap: .45rem;
  height: 34px; padding: 0 .6rem;
  background: var(--lang-bg); color: var(--lang-fg);
  border: 1px solid var(--lang-border); border-radius: var(--lang-radius);
  font: inherit; font-size: .8125rem; font-weight: 500; letter-spacing: .02em;
  line-height: 1; cursor: pointer; white-space: nowrap;
}
.lang-dd__toggle:hover { background: var(--lang-hover); }
.lang-dd__toggle:focus { outline: 0; box-shadow: 0 0 0 .15rem rgba(68, 75, 248, .25); }

.lang-dd__flag { display: inline-flex; width: 22px; height: 15px; flex: 0 0 auto; }
.lang-dd__flag svg { width: 100%; height: 100%; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }

.lang-dd__caret {
  width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .7;
}

.lang-dd__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 1100;
  min-width: 190px; margin: 0; padding: .3rem 0; list-style: none;
  background: #fff; border: 1px solid var(--lang-border); border-radius: var(--lang-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
  display: none;
}
.lang-dd.is-open .lang-dd__menu { display: block; }

.lang-dd__item {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .5rem .85rem; background: none; border: 0; text-align: left;
  font: inherit; font-size: .875rem; color: var(--lang-menu-fg); cursor: pointer;
}
.lang-dd__item:hover { background: var(--lang-hover); }
.lang-dd__item.is-current { font-weight: 600; }
.lang-dd__item.is-current::after {
  content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lang-accent);
}

/* ---------- modal ---------- */
.lang-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.lang-modal[hidden] { display: none; }
.lang-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background .2s; }
.lang-modal.is-visible .lang-modal__backdrop { background: rgba(0, 0, 0, .5); }

.lang-modal__dialog {
  position: relative; width: 100%; max-width: 480px;
  background: #fff; color: var(--lang-menu-fg);
  border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  font-family: inherit; font-size: 1rem; line-height: 1.5;
  transform: translateY(-16px); opacity: 0; transition: transform .2s, opacity .2s;
}
.lang-modal.is-visible .lang-modal__dialog { transform: none; opacity: 1; }

.lang-modal__header { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.lang-modal__flag { display: inline-flex; width: 36px; height: 24px; flex: 0 0 auto; }
.lang-modal__flag svg { width: 100%; height: 100%; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.lang-modal__title { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.3; }

.lang-modal__body { padding: 1.25rem; }
.lang-modal__body p { margin: 0 0 .75rem; }
.lang-modal__body p:last-child { margin-bottom: 0; }
.lang-modal__visit { font-weight: 500; word-break: break-word; }
.lang-modal__note { font-size: .875rem; color: #6c757d; }

.lang-modal__footer { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; padding: 1rem 1.25rem; border-top: 1px solid rgba(0, 0, 0, .1); background: #f8f9fb; border-radius: 0 0 6px 6px; }
.lang-modal__btn {
  padding: .5rem 1rem; border-radius: var(--lang-radius); border: 1px solid transparent;
  font: inherit; font-size: .9375rem; font-weight: 500; line-height: 1.5; cursor: pointer;
}
.lang-modal__btn--stay { background: #fff; color: var(--lang-menu-fg); border-color: var(--lang-border); }
.lang-modal__btn--stay:hover { background: var(--lang-hover); }
.lang-modal__btn--go { background: var(--lang-accent); color: var(--lang-accent-fg); }
.lang-modal__btn--go:hover { filter: brightness(.92); }
.lang-modal__btn:focus { outline: 0; box-shadow: 0 0 0 .15rem rgba(68, 75, 248, .3); }

body.lang-modal-open { overflow: hidden; }

@media (max-width: 480px) {
  .lang-modal__footer { flex-direction: column-reverse; }
  .lang-modal__btn { width: 100%; }
}
