/* ── Country dial-code picker (CFlag) ───────────────────────────────────────── */
.cflag-select { position: relative; flex: 0 0 132px; }

.cflag-img { border-radius: 2px; object-fit: cover; display: block; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.25); }

.cflag-trigger {
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: #0f1318; border: 1px solid #1f2530; border-radius: 8px;
  padding: 8px 10px; cursor: pointer; transition: border-color 0.15s;
  font-family: 'Barlow', sans-serif; color: #dce3ed; outline: none;
}
.cflag-trigger:hover { border-color: #2a3040; }
.cflag-select.open .cflag-trigger { border-color: var(--accent); }
.cflag-code { font-size: 13px; font-weight: 600; }
.cflag-caret { font-size: 18px; color: #5a6678; margin-left: auto; }

.cflag-menu {
  display: none; position: absolute; top: calc(100% + 4px); left: 0;
  width: 240px; max-width: 80vw; z-index: 320;
  background: #11161c; border: 1px solid #2a3040; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5); padding: 8px; overflow: hidden;
}
.cflag-select.open .cflag-menu { display: block; }

.cflag-search { margin-bottom: 6px; padding: 7px 10px; font-size: 13px; }

.cflag-list { list-style: none; margin: 0; padding: 0; max-height: 248px; overflow-y: auto; }
.cflag-opt {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 6px; cursor: pointer; transition: background 0.1s;
}
.cflag-opt:hover  { background: #1d2634; }
.cflag-opt.active { background: rgba(var(--accent-rgb), 0.12); }
.cflag-opt-name { font-size: 13px; color: #dce3ed; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cflag-opt-code { font-size: 12px; color: #7a8a9b; font-weight: 600; flex-shrink: 0; }
.cflag-empty { padding: 10px 8px; font-size: 13px; color: #5a6678; text-align: center; }

/* ── Light mode ──────────────────────────────────────────────────────────── */
body.light-mode .cflag-trigger {
  background: #ffffff; border-color: #dde2ec; color: #1a2030;
}
body.light-mode .cflag-trigger:hover { border-color: #c2cad8; }
body.light-mode .cflag-caret { color: #8a96a8; }

body.light-mode .cflag-menu {
  background: #ffffff; border-color: #dde2ec; box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}
body.light-mode .cflag-opt:hover  { background: #f0f3f8; }
body.light-mode .cflag-opt-name { color: #1a2030; }
body.light-mode .cflag-opt-code { color: #6b7a8d; }
body.light-mode .cflag-empty { color: #8a96a8; }