/* ============================================================================
 * country_switcher.css — dropdown de países
 * Depende de offer.css (variáveis)
 * ============================================================================ */

.country-switcher {
  position: relative;
  display: inline-block;
}
.country-switcher > summary {
  list-style: none;                     /* remove marker default */
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px;
  background: transparent; border: 1px solid transparent;
  font-size: 13px; font-weight: 500; color: var(--text);
  transition: background .12s, border-color .12s;
  user-select: none;
}
.country-switcher > summary::-webkit-details-marker { display: none; }
.country-switcher > summary:hover {
  background: var(--bg); border-color: var(--border);
}
.country-switcher[open] > summary {
  background: var(--bg); border-color: var(--border);
}
.cs-flag {
  display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08);
  flex-shrink: 0;
}
.cs-code {
  font-variant: tabular-nums; letter-spacing: 0.02em;
  color: var(--text-muted);
}
.cs-caret {
  font-size: 10px; opacity: .5; transition: transform .15s;
}
.country-switcher[open] .cs-caret { transform: rotate(180deg); }

/* Menu */
.cs-menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  min-width: 220px; max-height: 70vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 10px 40px rgba(15,23,42,.12);
  padding: 6px; z-index: 100;
}
.cs-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 6px;
  text-decoration: none; color: var(--text); font-size: 14px;
  white-space: nowrap;
}
.cs-item:hover {
  background: var(--bg); text-decoration: none;
}
.cs-item.is-current {
  background: var(--chip-bg); color: var(--chip-text); font-weight: 500;
}
.cs-item span:not(.cs-check) { flex: 1; }
.cs-check { color: var(--chip-text); font-weight: 600; }

/* Mobile: full-width sheet no canto direito ainda fica bem, mas se preferires
   ancorar ao topo em mobile, descomenta o bloco abaixo */
/*
@media (max-width: 600px) {
  .cs-menu {
    position: fixed; top: auto; bottom: 0; right: 0; left: 0;
    max-height: 60vh; border-radius: 12px 12px 0 0;
    box-shadow: 0 -8px 24px rgba(0,0,0,.15);
  }
}
*/