/* --- Design tokens --- */
:root {
  --niq-navy: #060b3a;          /* deep navy (from your screenshot) */
  --niq-navy-70: #1a225c;
  --niq-border: #cdd2db;        /* light gray border */
  --niq-border-hover: #aeb6c5;
  --niq-bg: #ffffff;
  --niq-bg-soft: #f5f7fb;
  --niq-radius: 2px;
  --niq-height: 40px;
  --niq-padding-x: 10px;
  --niq-shadow-focus: 0 0 0 3px rgba(6, 11, 58, 0.12);
}

.niq-office-list-wrap { max-width: 1200px; margin: 0 auto; padding: 12px; }
.niq-title { font-size: 28px; font-weight: 700; margin: 0 0 4px; }
.niq-subtitle { color: #555;     margin: 0 0 30px;
    font-size: 16px !important;}

.niq-layout { display: grid; grid-template-columns: 295px 1fr; gap: 16px; }
@media (max-width: 900px) { .niq-layout { grid-template-columns: 1fr; } }

.niq-card { background: #f5f6f7;  border-radius: 7px; padding: 20px; }
.niq-card-hq { background: #060A45; color: #fff; border-color: #060A45; }
.niq-card-hq .dashicons, .niq-card-hq a { color: #fff; }
.niq-hq-header { display:flex; align-items:center; gap:8px; font-weight:700; margin-bottom:20px; font-size: 20px; }
.niq-dot { width:10px; height:10px; background:#e11d48; border-radius:50%; display:inline-block; }
.niq-hq-img { width:100%; height:auto; border-radius:8px; margin-bottom:10px; }
.niq-hq-line { margin: 6px 0; display:flex; gap:6px; align-items:center; font-size: 16px !important;}
.niq-card-empty { opacity: .85; }

.niq-filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; justify-content: space-between;
    align-items: flex-start;}
.niq-filter input, .niq-filter select { padding: 8px 10px; border:1px solid #d1d5db; width: 20px; height: 20px; }
/* .niq-filter-search input { min-width: 200px; } */
.niq-btn { background:#060A45; color:#fff; border:0; padding: 8px 11px; border-radius: 2px; cursor:pointer; }
.niq-btn:hover { background:#132352; }

.reset-btn{background:#FFFFFF; color:#060A45; border: 1px solid #060A45 !important; padding: 8px 15px; border-radius: 2px; cursor:pointer; }
.reset-btn:hover { background:#060A45; color:#FFFFFF; }


.niq-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1100px) { .niq-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .niq-grid { grid-template-columns: 1fr; } }

.niq-card-body p { margin: 20px 0; color:#060A45; font-size: 16px !important;
    line-height: 1.6 !important; gap: 5px;
    display: flex;
    align-items: center;}
.niq-card-map a { color: #060A45; text-decoration: none; font-weight: 600; }
.niq-card-phone .dashicons, .niq-card-map .dashicons, .niq-hq-line .dashicons { vertical-align: middle; font-size: 16px !important; }

.niq-empty { padding: 10px; color:#6b7280; }
.niq-pagination { display:flex; justify-content: center; align-items:center; margin-top:20px; }

.niq-pagination span, .niq-pagination a {padding:0px 7px; border-radius:2px; color:#060A45; text-decoration: none; }

 .niq-pagination a:hover { background-color:#060A45; color: #ffffff; }
.niq-page { color:#060A45; text-decoration:none; border:1px solid #060A45; padding:6px 10px; border-radius:8px; }
.niq-page-current { color:#374151; }
#niq-office-grid.niq-loading { opacity: .6; pointer-events: none; }


.niq-card-address, .niq-card-map, .niq-card-phone, .niq-hq-line {
    display: flex;
    gap: 10px;
    margin: 10px 0 20px;
    font-size: 16px !important;
}
.niq-icon{
    width: 16px;
    height: 100%;
    flex: 0 0 auto;
    margin-top: 5px;
}


/* Title: keep items centered and prevent wrapping from stretching the flag */
.niq-card-title {
  display: flex;
  align-items: flex-start;      /* keep flag vertically centered against multi-line title */
  gap: 10px;
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;         /* stable line-height */
}

/* Fixed-size circular flag container */
.flag-circle {
  width: 20px;              /* fixed size */
  height: 20px;
  flex: 0 0 20px;           /* do not grow/shrink; stay 20x20 no matter what */
  display: inline-flex;     /* avoid baseline “pulling” */
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;         /* crop into circle */
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
  line-height: 0;           /* prevents inline line-height affecting the circle box */
}

/* The flag image itself should never stretch vertically with text */
.flag-circle img {
  display: block;           /* remove inline baseline gap */
  width: 100%;
  height: 100%;
  object-fit: cover;        /* keeps it nicely cropped within the circle */
  object-position: center;
}

.niq-filter-options{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    width: 75%;
}

.niq-filter{
    flex: 1;
    min-width: 130px;
}




/* --- Buttons --- */
.niq-filter-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Clear (outlined) */
#niq-office-reset-btn.reset-btn {
  height: var(--niq-height);
  padding: 0 20px;
  border-radius: var(--niq-radius);
  background: transparent;
  border: 1px solid var(--niq-navy) !important;
  color: var(--niq-navy);
  font-weight: 500;
  transition: all .15s ease;
}
#niq-office-reset-btn.reset-btn:hover {
  background: #eef0f8;
  border-color: #eef0f8;
}

/* Search (filled) */
#niq-office-search-btn.niq-btn {
  height: var(--niq-height);
  padding: 0 24px;
  border-radius: var(--niq-radius);
  background: var(--niq-navy);
  color: #fff;
  border: 2px solid var(--niq-navy);
  font-weight: 600;
  transition: all .15s ease;
}
#niq-office-search-btn.niq-btn:hover {
  background: var(--niq-navy-70);
  border-color: var(--niq-navy-70);
}

/* Loading in grid */
#niq-office-grid.niq-loading {
  background: var(--niq-bg-soft);
  border-radius: 12px;
  padding: 24px;
}
.niq-loading-text {
  color: var(--niq-navy);
  opacity: 0.75;
}

.niq-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    font-size: 16px;
    padding: 20px 0;
}

.niq-page-number {
    padding: 8px 14px;
    border-radius: 2px;
    text-decoration: none;
    color: #222;
    font-weight: 700;
}

.niq-page-number:hover {
    background: #f2f4f7;
}

.niq-page-number.active {
    background: #2563eb;  /* blue */
    color: #fff;
    font-weight: 600;
}

.niq-page-arrow {
    font-size: 22px;
    padding: 4px 10px;
    text-decoration: none;
    color: #222;
}

.niq-page-arrow:hover {
    background: #f2f4f7;
    border-radius: 6px;
}

.niq-page-arrow.disabled {
    color: #aaa;
}

.niq-page-ellipsis {
    color: #444;
    font-size: 18px;
    padding: 0 6px;
}
/* Small screens */
@media (max-width: 768px) {
  .niq-filter-options { gap: 12px; width: 100%; }
  .niq-filter { min-width: 100%; }
  .niq-filter-actions { width: 100%; margin-top: 20px; justify-content: space-between; }
  #niq-office-reset-btn.reset-btn, #niq-office-search-btn.niq-btn {
    flex: 1 1 0;
  }
}