/*
 * The market and language control in the masthead, and the dialog behind it.
 *
 * Split from legal.css for the reason that sheet's own header gives: both stay under the repo's
 * line cap. It loads on every page because the control lives in the masthead, so the rules for
 * the closed control come first and the dialog's follow.
 *
 * The register is legal.css's, read through its tokens, so this re-themes with the rest of the
 * estate rather than carrying a second palette. Nothing here names a country, a language or a
 * flag: every option is the marketplace registry's (see `src/lib/marketplace/`).
 */

/* ── The market and language control ──────────────────────────────────────────────────────────
   The same pill the sibling site carries on ITS green bar (`LocaleSwitcherButton`'s on-green
   tone): transparent, a white/30 border, white text, 13px semibold, 8.75px by 12.25px with a 7px
   gap (its `px-3.5 py-2.5 gap-2` on that site's 14px root, written here in px because this sheet's
   root is 16px), washing to white/10 on hover. It sits left of the call to action, and being
   transparent is what keeps it from competing with the white pill beside it.

   Both live inside `.masthead-actions` now, which carries the `margin-left: auto` that puts them
   at the right end of the bar. */
.masthead-locale {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8.75px 12.25px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-pill);
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--on-brand);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.masthead-locale:hover {
  background: rgba(255, 255, 255, 0.1);
}

.masthead-locale-flag {
  font-size: 0.9375rem;            /* 15px, the sibling pill's own flag size */
  line-height: 1;
}

.locale-chevron {
  width: 0.75rem;
  height: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

/* ── The country and language dialog ─────────────────────────────────────────────────────────
   Two columns, the country's own languages first. Every option comes from the marketplace
   registry; nothing here names a country or a language. */

.locale-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-md);
}

.locale-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(11, 17, 30, 0.45);
  cursor: default;
}

.locale-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 35rem;
  max-height: 85vh;
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--radius-sheet);
  box-shadow: 0 30px 80px rgba(11, 17, 30, 0.35);
}

.locale-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-lg) var(--sp-lg) var(--sp-md);
}

.locale-head h2 {
  margin: 0;
  font-size: 1.25rem;              /* text-h3 20 / 26 / 800 */
  line-height: 1.625rem;
}

.locale-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-subtle);
  cursor: pointer;
}

.locale-close:hover {
  background: #edeff1;
  color: var(--ink);
}

.locale-close svg {
  width: 1rem;
  height: 1rem;
}

.locale-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-lg);
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--sp-lg) var(--sp-lg);
}

.locale-column-languages {
  padding-left: var(--sp-lg);
  border-left: 1px solid var(--line);
}

.locale-column-title {
  margin: 0 0 var(--sp-xs);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.locale-options {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.locale-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 10px;
  background: none;
  font: inherit;
  font-size: 0.9375rem;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}

.locale-option:hover {
  background: rgba(11, 17, 30, 0.04);
}

/* Selected is the brand green, the one place in this dialog it appears: it marks the choice, and
   the only other green on the page is the CTA in the bar behind it. */
.locale-option[aria-pressed="true"] {
  background: rgba(0, 124, 31, 0.08);
  color: var(--primary);
  font-weight: 700;
}

.locale-option-flag {
  font-size: 1rem;
  line-height: 1;
}

.locale-option-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.locale-check {
  flex: none;
  width: 1rem;
  height: 1rem;
}

.locale-divider {
  margin: var(--sp-xs) 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.locale-actions {
  display: flex;
  justify-content: center;
  padding: var(--sp-md) var(--sp-lg);
  border-top: 1px solid var(--line);
}

/* Button, `default` variant: green-600 filled, white text, pill. Every pick has already applied by
   the time this is pressed, so it closes; it is here because a dialog needs an obvious way out. */
.locale-save {
  display: inline-flex;
  align-items: center;
  height: 2.75rem;
  padding: 0 1.75rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--primary);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-brand);
  cursor: pointer;
}

.locale-save:hover {
  background: var(--primary-hover);
}

/* One column on a narrow screen: two 8rem columns of country names wrap into unreadable ladders. */
@media (max-width: 40rem) {
  .locale-columns {
    grid-template-columns: 1fr;
  }

  .locale-column-languages {
    padding-left: 0;
    padding-top: var(--sp-md);
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}