/* ============================================================
   v2 country-selector bar (components/v2/country-selector.html.twig), root URL only.
   No maquette: a sober sand band above the header, in the header's type.
     mobile  (< 960px)  : text, then select + button on one row
     desktop (>= 960px) : text left, form right, one row
   The select and the button reuse the v2 country/language form controls
   (.bf-locale-form__select / __submit, css/v2/menu.css, loaded on every v2 page);
   only their size changes here.
   In the flow, not sticky: sticky offsets (--bf-header-h / --bf-promo-h) are unchanged. Its height
   is published as --bf-country-h for the load-time hero height (css/v2/video-hero.css). The height
   depends on how the text wraps (detected language, width: 118px with 2 lines at 375px, 138px
   with 3), so the template measures the bar and sets the variable; the value below is only the
   no-JS fallback (the 2-line mobile height).
   ============================================================ */

:root {
  --bf-country-h: 118px;
}

.bf-country-bar {
  background: var(--bf-c-sand);
  border-bottom: 1px solid var(--bf-c-line-light);
  font-family: var(--bf-font-body);
}

.bf-country-bar__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0;
}

.bf-country-bar__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--bf-c-ink-idle);
}

.bf-country-bar__text strong {
  font-weight: 600;
  color: var(--bf-c-black);
}

.bf-country-bar__form {
  display: flex;
  gap: 8px;
  margin: 0;
}

.bf-country-bar .bf-country-bar__select {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
}

/* js/country_selector.js adds .error on an empty submit; :invalid (required + empty value)
   drops the red border as soon as a country is picked. */
.bf-country-bar .bf-country-bar__select.error:invalid {
  border-color: #c00;
  box-shadow: 0 0 0 1px #c00;
}

.bf-country-bar .bf-country-bar__submit {
  flex: none;
  width: auto;
  height: 44px;
  margin: 0;
}

/* ---- Desktop (UIkit @m) ---- */

@media (min-width: 960px) {
  .bf-country-bar__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 10px 0;
  }

  .bf-country-bar__form {
    flex: none;
    width: 400px;
  }

  .bf-country-bar .bf-country-bar__select,
  .bf-country-bar .bf-country-bar__submit {
    height: 40px;
  }
}