/* ============================================================
   Geo language suggestion banner (ml-geo)
   ============================================================
   A consistent SIBLING of the cookie-consent banner (consent.css): the same
   resting-header glass (transparent navy + blur), the same edge-glow pseudo
   layers, the same entrance/exit motion and reduced-motion handling, built only
   from existing tokens. Differences are deliberate and minimal:
     - docked BOTTOM-RIGHT, so it never collides with the consent banner
       (bottom-left) when a first-time overseas visitor triggers both;
     - compact single-row layout (a short line + a native-language CTA + a
       dismiss x), since this is an offer, not a paragraph of copy;
     - the CTA reuses the brand-red glass of the consent Accept button so the
       primary action reads identically across the two banners.
   No cursor tracking here (geo.js does not set --cx/--cy), so the glow falls
   back to the centred 50%/50% static sheen the CSS already defines.

   Markup contract: #ml-geo.ml-geo > .ml-geo__inner > .ml-geo__text(.ml-geo__msg)
   + .ml-geo__actions(.ml-geo__btn--go, .ml-geo__btn--dismiss).
   [hidden] / .is-visible / .is-leaving states mirror the consent banner.
   ------------------------------------------------------------ */

.ml-geo {
  position: fixed;
  right: 16px;
  bottom: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;                 /* same band as the consent banner: over the body, under the header */
  width: min(420px, calc(100vw - 32px));

  background: rgba(25, 22, 64, 0.56);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 56px rgba(25, 22, 64, 0.42);
  color: #fff;

  overflow: hidden;
  isolation: isolate;

  opacity: 0;
  transform: translateY(16px);
  transition: opacity 480ms var(--ease-out),
              transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.ml-geo[hidden] { display: none; }

/* ---------- Edge glow (static centred sheen, same technique as consent) ---------- */
.ml-geo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    circle 320px at var(--cx, 50%) var(--cy, 50%),
    color-mix(in oklab, var(--color-brand-blue) 30%, transparent) 0%,
    color-mix(in oklab, var(--color-brand-blue) 16%, transparent) 36%,
    transparent 70%
  );
  opacity: 0.6;
  transition: opacity var(--duration-base) var(--ease-out);
}
.ml-geo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(
    circle 240px at var(--cx, 50%) var(--cy, 50%),
    color-mix(in oklab, var(--color-brand-blue) 70%, white) 0%,
    color-mix(in oklab, var(--color-brand-blue) 80%, transparent) 24%,
    transparent 60%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.7;
  transition: opacity var(--duration-base) var(--ease-out);
}
.ml-geo:hover::before { opacity: 0.85; }
.ml-geo:hover::after  { opacity: 0.9; }

/* ---------- Inner wrapper ---------- */
.ml-geo__inner {
  position: relative;
  z-index: 1;
  padding: var(--space-4);     /* 16px: tighter than the consent panel (24px) */
  display: flex;
  align-items: center;
  gap: var(--space-3);         /* 12px */
}
.ml-geo__inner::before {       /* brand-red top sweep, identical to consent */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-brand-red) 28%,
    color-mix(in oklab, var(--color-brand-blue) 80%, #fff) 62%,
    transparent
  );
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity 520ms var(--ease-out) 120ms,
              transform 720ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
}

/* ---------- Entrance / exit ---------- */
.ml-geo.is-visible { opacity: 1; transform: translateY(0); }
.ml-geo.is-visible .ml-geo__inner::before { opacity: 1; transform: scaleX(1); }
.ml-geo.is-leaving {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 320ms var(--ease-out),
              transform 360ms var(--ease-out);
}

/* ---------- Copy ---------- */
.ml-geo__text {
  position: relative;
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;                /* allow the line to wrap/ellipsis inside flex */
}
.ml-geo__text::before {        /* text-protection scrim, as on the consent body */
  content: "";
  position: absolute;
  inset: -8px -12px;
  z-index: -1;
  border-radius: var(--radius-md);
  background: radial-gradient(
    120% 120% at 18% 30%,
    rgba(25, 22, 64, 0.50) 0%,
    rgba(25, 22, 64, 0.34) 45%,
    rgba(25, 22, 64, 0.0) 100%
  );
  pointer-events: none;
}
.ml-geo__msg {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(25, 22, 64, 0.45);
}

/* ---------- Actions ---------- */
.ml-geo__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);         /* 8px */
  flex: 0 0 auto;
}
.ml-geo__btn {
  position: relative;
  appearance: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-base) var(--ease-spring);
}
.ml-geo__btn:active { transform: scale(0.97); }
.ml-geo__btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}

/* Go = brand-red glass, identical treatment to the consent Accept button; the
   label is the visitor's language written in its own native name (set by geo.js). */
.ml-geo__btn--go {
  padding: 10px 18px;
  min-height: 40px;
  border: 1px solid color-mix(in oklab, var(--color-brand-red) 70%, transparent);
  background: color-mix(in oklab, var(--color-brand-red) 42%, transparent);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
          backdrop-filter: blur(6px) saturate(140%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(25, 22, 64, 0.45);
  white-space: nowrap;
}
.ml-geo__btn--go:hover {
  background: color-mix(in oklab, var(--color-brand-red) 56%, transparent);
  border-color: color-mix(in oklab, var(--color-brand-red) 88%, transparent);
}
.ml-geo__btn--go:focus-visible { outline-offset: 3px; }

/* Dismiss = a glass x chip (the same hairline-on-transparent glass as the
   consent Decline button), square so the x sits centred. */
.ml-geo__btn--dismiss {
  width: 40px;
  height: 40px;
  min-height: 40px;
  font-size: 20px;
  font-weight: 400;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(25, 22, 64, 0.45);
}
.ml-geo__btn--dismiss:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
}

/* ---------- Mobile (<= 600px): full-width bottom card, stacked actions ---------- */
@media (max-width: 600px) {
  .ml-geo {
    left: 12px;
    right: 12px;
    bottom: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: auto;
  }
  .ml-geo__inner {
    flex-wrap: wrap;
  }
  .ml-geo__text { flex: 1 1 100%; }
  .ml-geo__actions { flex: 1 1 100%; }
  .ml-geo__btn--go { flex: 1 1 auto; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ml-geo,
  .ml-geo.is-leaving {
    transition: opacity 1ms linear;
    transform: none;
  }
  .ml-geo.is-visible { transform: none; }
  .ml-geo__inner::before {
    transition: opacity 1ms linear;
    transform: scaleX(0);
  }
  .ml-geo.is-visible .ml-geo__inner::before { transform: scaleX(1); }
  .ml-geo::before,
  .ml-geo::after { transition: none; }
  .ml-geo__btn:active { transform: none; }
}