/* ============================================================
   DIA v7 — country selector + phone control
   ============================================================ */

.phone-control {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--s2);
  align-items: stretch;
}

/* ---------------- closed state ---------------- */
.cselect { position: relative; min-width: 0; }

.cselect__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 0 0.7rem 0 0.75rem;
  border: 1px solid var(--border-medium);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
.cselect__btn:hover { border-color: rgba(16, 24, 32, 0.3); background: var(--surface-soft); }
.cselect__btn:focus-visible { outline: none; border-color: var(--primary); box-shadow: var(--sh-focus); }
.cselect__btn[aria-expanded="true"] { border-color: var(--primary); box-shadow: var(--sh-focus); }

/* Regional-indicator pairs render as a flag on macOS, iOS and Android.
   Windows has no flag glyphs and falls back to the two ISO letters, so the
   badge below keeps that fallback looking deliberate instead of broken. */
.cselect__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 2px 4px;
  border-radius: 4px;
  background: var(--surface-sunken);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}
.cselect__name { overflow: hidden; text-overflow: ellipsis; }
.cselect__dial { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.cselect__chev {
  width: 8px; height: 8px;
  margin-left: 2px;
  border-right: 1.7px solid var(--text-secondary);
  border-bottom: 1.7px solid var(--text-secondary);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-fast);
  flex: none;
}
.cselect__btn[aria-expanded="true"] .cselect__chev { transform: rotate(-135deg) translate(-3px, -3px); }

/* ---------------- popover ---------------- */
.cselect__pop {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  width: min(340px, 86vw);
  background: var(--surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  padding: var(--s3);
  animation: cs-in 160ms var(--ease-out) both;
}
@keyframes cs-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .cselect__pop { animation: none; } }

.cselect__search {
  width: 100%;
  min-height: 42px;
  padding: 0.5rem 0.75rem;
  margin-bottom: var(--s2);
  border: 1px solid var(--border-medium);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  font-size: var(--fs-sm);
}
.cselect__search:focus { outline: none; border-color: var(--primary); box-shadow: var(--sh-focus); background: var(--surface); }

.cselect__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: min(300px, 46vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cselect__group {
  margin: var(--s2) 0 2px;
  padding: 0 0.5rem;
  font-size: 11px;
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.cselect__opt {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0.5rem;
  min-height: 44px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.cselect__opt.is-active { background: var(--surface-blue); }
.cselect__opt[aria-selected="true"] { font-weight: 600; }
.cselect__opt[aria-selected="true"] .cselect__optname::after {
  content: "";
  display: inline-block;
  width: 12px; height: 6px;
  margin-left: 8px;
  border-left: 1.8px solid var(--primary);
  border-bottom: 1.8px solid var(--primary);
  transform: rotate(-45deg) translateY(-2px);
}
.cselect__optname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect__optcode { color: var(--text-muted); font-size: var(--fs-xs); }
.cselect__optdial { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.cselect__empty { margin: var(--s3) 0 var(--s2); padding: 0 0.5rem; font-size: var(--fs-sm); color: var(--text-secondary); }

/* ---------------- phone field ---------------- */
.phone-control .input {
  min-height: 52px;
  font-size: 17px;
  border-radius: var(--r-md);
}
.phone-hint { display: block; margin-top: 8px; font-size: var(--fs-xs); color: var(--text-muted); }

/* ---------------- responsive ---------------- */
@media (max-width: 560px) {
  .phone-control { grid-template-columns: minmax(0, 1fr); }
  .cselect__pop { width: min(340px, 92vw); }
  .cselect__name { display: none; }          /* 🇳🇱 +31 ▾ on small screens */
  .cselect__btn { justify-content: flex-start; }
}
@media (max-width: 380px) {
  .cselect__opt { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .cselect__optcode { display: none; }
}