/* =========================
   NS Info (Country Navigation)
   ========================= */

.nsinfo-group {
  width: 100%;
  border: 1px solid #cbd1d8;
  border-radius: 10px;
  background: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.nsinfo-row { position: relative; }
.nsinfo-row:not(:last-child) { border-bottom: 1px solid #cbd1d8; }

.nsinfo-group .nsinfo-trigger {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .7rem 1rem;
  cursor: pointer;
  color: #1f2328;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-transform: none;
  text-align: left;
  user-select: none;
}

.nsinfo-trigger:hover { background: #f6f8fa; }
.nsinfo-trigger:focus-visible {
  outline: 2px solid #306cf6;
  outline-offset: -2px;
  border-radius: 6px;
}

.nsinfo-icon { transition: transform .2s ease; }
.nsinfo-trigger[aria-expanded="true"] .nsinfo-icon { transform: rotate(180deg); }

.nsinfo-trigger[aria-expanded="true"] {
  background: #eef3ff;
  box-shadow: inset 0 0 0 1px #c9d6ff;
}

.nsinfo-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 8px;
  display: none;
  z-index: 10000;
  min-width: 220px;
  background: #fff;
  border: 1px solid #d7dbe1;
  border-radius: 8px;
  padding: 4px 0;
  margin: 0;
  list-style: none;
  white-space: nowrap;
  box-shadow:
    0 10px 24px rgba(16,24,40,.12),
    0  2px  6px rgba(16,24,40,.08);
}

.nsinfo-menu.nsinfo-show { display: block; }

.nsinfo-menu li + li { border-top: 1px solid #eef1f4; }

.nsinfo-menu a {
  display: block;
  padding: .5rem .9rem;
  text-decoration: none;
  color: #1f2328;
}
.nsinfo-menu a:hover,
.nsinfo-menu a:focus {
  background: #f3f6fa;
  outline: 0;
}

.nsinfo-row-single .nsinfo-link {
  display: block;
  padding: .75rem 1rem;
  text-decoration: none;
  color: #1f2328;
}
.nsinfo-row-single .nsinfo-link:hover,
.nsinfo-row-single .nsinfo-link:focus-visible {
  background: #f6f8fa;
  outline: none;
}
