.mg-wrap { --gap:14px; --radius:14px; --border:#e7e7e7; }
.mg-topbar { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; margin-bottom:14px; }
.mg-filter { display:flex; flex-direction:column; gap:8px; }
.mg-label { font-size:13px; color:#444; }
.mg-meta { font-size:13px; color:#444; }

.mg-country { border:1px solid var(--border); border-radius:12px; padding:10px 12px; background:#fff; font-size:14px; min-width:220px; }
.mg-select-hidden { position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; }

/* Custom dropdown with icons */
.mg-country-ui { position:relative; display:inline-block; }
.mg-dd-btn{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--border); border-radius:12px;
  padding:10px 12px; background:#fff; font-size:14px; cursor:pointer;
  min-width:220px; justify-content:space-between;
}
.mg-dd-label { flex: 1 1 auto; text-align:left; }
.mg-dd-flag{
  width:18px; height:18px; border-radius:999px; flex:0 0 auto;
  background-size:cover; background-position:center;
  border:1px solid rgba(0,0,0,.06);
}
.mg-dd-caret{ opacity:.7; }
.mg-hidden{ display:none; }

.mg-dd-menu{
  position:absolute; z-index:9999; top: calc(100% + 8px); left:0;
  width:100%; background:#fff; border:1px solid var(--border);
  border-radius:14px; padding:6px; box-shadow: 0 10px 30px rgba(0,0,0,.08);
  display:none;
}
.mg-dd-menu.is-open{ display:block; }
.mg-dd-item{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:10px 10px; border-radius:12px;
  background:transparent; border:none; cursor:pointer; text-align:left;
}
.mg-dd-item:hover{ background:#f6f6f6; }
.mg-dd-text{ font-size:14px; color:#111; }

.mg-grid { display:grid; gap:var(--gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mg-wrap[data-columns="1"] .mg-grid { grid-template-columns: repeat(1, 1fr); }
.mg-wrap[data-columns="2"] .mg-grid { grid-template-columns: repeat(2, 1fr); }
.mg-wrap[data-columns="3"] .mg-grid { grid-template-columns: repeat(3, 1fr); }
.mg-wrap[data-columns="4"] .mg-grid { grid-template-columns: repeat(4, 1fr); }
.mg-wrap[data-columns="5"] .mg-grid { grid-template-columns: repeat(5, 1fr); }
.mg-wrap[data-columns="6"] .mg-grid { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 980px) { .mg-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 720px) { .mg-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .mg-grid { grid-template-columns: 1fr !important; } }

.mg-card{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  padding:14px; display:flex; gap:12px; align-items:center;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.mg-avatar{
  width:44px; height:44px; border-radius:999px; object-fit:cover; flex:0 0 auto;
}
.mg-avatar--placeholder{
  background: linear-gradient(135deg, #ddd, #f3f3f3);
}
.mg-name{ margin:0; font-size:15px; font-weight:650; }
.mg-card__body{ min-width:0; }

.mg-tag{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:8px; font-size:12px; padding:4px 8px;
  border-radius:999px; border:1px solid var(--border); color:#333; background:#fcfcfc;
}
.mg-flag{
  width:16px; height:16px; border-radius:999px;
  background-size:cover; background-position:center;
  border:1px solid rgba(0,0,0,.06);
}

.mg-website{ margin-top:8px; font-size:13px; }
.mg-website a{ text-decoration:none; border-bottom:1px solid rgba(0,0,0,.15); }
.mg-website a:hover{ border-bottom-color: rgba(0,0,0,.35); }

.mg-empty{
  padding:18px; border:1px dashed #d8d8d8; border-radius:14px; color:#444; background:#fff;
}
.mg-footer{ display:flex; justify-content:center; margin-top:16px; }
.mg-loadmore{
  border:1px solid var(--border); border-radius:12px; padding:10px 12px; background:#fff;
  font-size:14px; cursor:pointer;
}
.mg-loadmore:disabled{ opacity:.55; cursor:not-allowed; }