/* Country-first flow layered on top of the shared EurAtlas visual system. */

.country-button {
  display: flex;
  min-width: 170px;
  height: 46px;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(34, 211, 238, .12), var(--panel-soft));
  cursor: pointer;
  text-align: left;
  transition: border-color .18s, transform .18s, background .18s;
}

.country-button:hover { border-color: var(--cyan); transform: translateY(-1px); }
.country-flag { width: 30px; flex: 0 0 30px; font-size: 22px; line-height: 1; text-align: center; filter: saturate(.92); }
.country-button-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 1px; }
.country-button-copy small { color: var(--dim); font-size: 8px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.country-button-copy strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.country-brand {
  position: fixed;
  z-index: 950;
  top: 91px;
  left: 14px;
  display: flex;
  min-width: 168px;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-radius: 14px;
  transition: opacity .2s, transform .2s;
}

.country-brand > span:first-child { font-size: 25px; }
.country-brand span:last-child { display: flex; flex-direction: column; }
.country-brand small { color: var(--dim); font-size: 8px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.country-brand b { margin-top: 1px; font-size: 13px; }

body.country-picking .topbar,
body.country-picking .country-brand,
body.country-picking .legend,
body.country-picking .map-note,
body.country-picking .mobile-sheet-button {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

body.country-picking #map { filter: saturate(.65) brightness(.65); }

.country-picker-layer {
  position: fixed;
  z-index: 3500;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 14% 10%, rgba(79, 70, 229, .18), transparent 30%),
    radial-gradient(circle at 86% 92%, rgba(34, 211, 238, .14), transparent 32%),
    rgba(2, 8, 18, .78);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  transition: opacity .24s, visibility .24s;
}

.country-picker-layer.hidden { visibility: hidden; opacity: 0; pointer-events: none; }

.country-picker-card {
  display: flex;
  overflow: hidden;
  width: min(1060px, 100%);
  max-height: min(850px, calc(100dvh - 36px));
  flex-direction: column;
  color: #edf7ff;
  border: 1px solid rgba(103, 232, 249, .21);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(10, 27, 47, .98), rgba(4, 13, 25, .995));
  box-shadow: 0 34px 120px rgba(0, 0, 0, .62);
}

.country-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 24px 12px;
}

.picker-brand-row { display: flex; align-items: center; gap: 10px; }
.brand-compass.large { width: 37px; height: 37px; border-radius: 11px; }
.picker-wordmark { font-size: 24px; }
.beta-pill { padding: 4px 7px; color: #7794aa; border: 1px solid rgba(148, 163, 184, .16); border-radius: 999px; font-size: 7px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.country-picker-close { visibility: hidden; }
.country-picker-layer.reopenable .country-picker-close { visibility: visible; }

.country-picker-intro { padding: 8px 24px 15px; border-bottom: 1px solid rgba(148, 163, 184, .13); }
.country-picker-intro h1 { margin: 6px 0 7px; color: #f4fbff; font-size: clamp(27px, 4vw, 43px); letter-spacing: -.055em; line-height: 1.04; }
.country-picker-intro > p { max-width: 710px; margin: 0; color: #91a6bb; font-size: 12px; line-height: 1.55; }
.picker-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.picker-summary span { padding: 5px 8px; color: #8099ad; border: 1px solid rgba(148, 163, 184, .14); border-radius: 8px; background: rgba(15, 31, 51, .58); font-size: 8px; }
.picker-summary b { color: #dffcff; }

.country-search-wrap { position: relative; flex: 0 0 auto; margin: 14px 24px 4px; }
.country-search-wrap span { position: absolute; top: 50%; left: 13px; color: #647f94; font-size: 21px; transform: translateY(-54%); pointer-events: none; }
#country-search { width: 100%; height: 43px; padding: 0 14px 0 40px; color: #edf7ff; border: 1px solid rgba(148, 163, 184, .18); border-radius: 12px; outline: 0; background: rgba(12, 29, 48, .86); }
#country-search::placeholder { color: #607a90; }
#country-search:focus { border-color: rgba(69, 224, 232, .62); box-shadow: 0 0 0 3px rgba(34, 211, 238, .08); }

.country-groups { overflow: auto; min-height: 0; padding: 10px 24px 18px; scrollbar-color: rgba(103, 232, 249, .24) transparent; }
.country-group + .country-group { margin-top: 17px; }
.country-group-head { display: flex; align-items: center; gap: 9px; margin: 0 2px 8px; }
.country-group-head h2 { margin: 0; color: #8fa7b9; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.country-group-head span { color: #506b80; font-size: 8px; }
.country-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }

.country-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 69px;
  grid-template-columns: 35px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
  overflow: hidden;
  color: #dcebf4;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 12px;
  background: rgba(13, 31, 51, .7);
  cursor: pointer;
  text-align: left;
  transition: border-color .16s, background .16s, transform .16s;
}

.country-card::after { position: absolute; right: -25px; bottom: -32px; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle, rgba(34, 211, 238, .09), transparent 67%); content: ""; }
.country-card:hover { z-index: 1; border-color: rgba(69, 224, 232, .52); background: linear-gradient(135deg, rgba(34, 211, 238, .1), rgba(13, 31, 51, .84)); transform: translateY(-1px); }
.country-card.active { border-color: #45e0e8; box-shadow: inset 0 0 0 1px rgba(69, 224, 232, .18); }
.country-card-flag { font-size: 25px; line-height: 1; text-align: center; }
.country-card-copy { min-width: 0; }
.country-card-copy b { display: block; overflow: hidden; color: #f1f9fd; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.country-card-copy small { display: block; margin-top: 3px; color: #6f8ba0; font-size: 8px; }
.country-card-arrow { position: relative; z-index: 1; color: #4e6e83; font-size: 15px; }
.country-card:hover .country-card-arrow { color: #67e8f9; }
.country-empty { padding: 35px 10px; color: #7890a3; text-align: center; }

.country-picker-foot { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 24px 14px; color: #617b90; border-top: 1px solid rgba(148, 163, 184, .12); font-size: 8px; }
.country-picker-foot > div { display: flex; align-items: center; gap: 8px; }
.country-picker-foot .text-button { color: #7f99ad; }

@media (max-width: 1050px) {
  .topbar { width: min(980px, calc(100vw - 28px)); }
  .topbar .brand .wordmark { display: none; }
  .topbar .brand { min-width: auto; }
  .country-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .topbar .brand { display: none; }
  .country-button { min-width: 145px; }
  .metric-button { min-width: 205px; }
  .country-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .country-button { min-width: 0; width: 47px; padding: 6px; justify-content: center; }
  .country-button-copy,
  .country-button .chevron { display: none; }
  .country-brand { top: 68px; left: 8px; min-width: 0; padding: 7px 10px; }
  .country-brand > span:first-child { font-size: 20px; }
  .country-brand small { display: none; }
  .country-brand b { font-size: 10px; }
  .country-picker-layer { padding: 6px; }
  .country-picker-card { max-height: calc(100dvh - 12px); border-radius: 19px; }
  .country-picker-head { padding: 14px 15px 7px; }
  .picker-wordmark { font-size: 21px; }
  .beta-pill { display: none; }
  .country-picker-intro { padding: 7px 15px 12px; }
  .country-picker-intro h1 { font-size: 30px; }
  .country-picker-intro > p { font-size: 10px; }
  .picker-summary span { font-size: 7.5px; }
  .country-search-wrap { margin: 11px 15px 3px; }
  .country-groups { padding: 9px 15px 13px; }
  .country-grid { grid-template-columns: 1fr; gap: 6px; }
  .country-card { min-height: 59px; }
  .country-picker-foot { padding: 9px 15px 11px; }
  .country-picker-foot > div { display: none; }
  .country-picker-foot .text-button { margin-left: auto; }
}