/* Layout */
.filter-super-bar-niq {

  z-index: 11;
  position: relative;
}

.niq-filter-bar {
  display: flex;
  align-items: center;
  gap: 16px;
}

.niq-filters {
  display: grid;
  gap: 16px;
  flex: 1;
  z-index: 1;
}

/* Filter button */
.niq-filter-btn {
  width: 100%;
  border-style: solid !important;
  border-width: 0px 0px 1px 0px !important;
  border-color: #797979 !important;
  background: #fff;
  /* border: 1px solid #d1d5db; */
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
}

/* Arrow in circle */
.niq-filter-arrow {
  width: 18px;
  height: 18px;
  /* border-radius: 50%; */
  /* border: 1.5px solid #111; */
  position: relative;
}

.niq-filter-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid #111;
  border-bottom: 2px solid #111;
  transform: translate(-50%, -60%) rotate(45deg);
}

/* Dropdown */
.niq-filter-dropdown {
  color: #2D6DF6;
  display: none;
  position: absolute;
  margin-top: 0px;
  width: 100%;
  background: #E0E9FE;
  /* border-radius: 6px; */
  /* padding: 12px; */
  z-index: 10;
}

.niq-filter.open .niq-filter-dropdown {
  display: block;
}

.niq-filter {
  position: relative;
}

/* Checkbox list */
.niq-filter-dropdown label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  font-size: 14px;
  font-weight: 500;
}

.niq-filter-dropdown :hover {
  background-color: #98b8fa;
}


/* Clear all */
.niq-clear-all {
  padding: 8px 16px;
  border-radius: 6px !important;
  border: 1.5px solid #2D6DF6 !important;
  background: #fff;
  color: #2D6DF6;
  cursor: pointer;
}

.niq-filter-label {
  color: #111;
}

/* Number badge (circle) */
.niq-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  margin-right: 8px;

  background: #2D6DF6;
  /* blue */
  color: #ffffff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

/* Text next to badge */
.niq-filter-text {
  color: #111;
  font-size: 16px;
}

/* Header */
.niq-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 2px solid #DADDE3;
  cursor: pointer;
}

/* Actions container */
.niq-filter-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Arrow toggle */
.niq-filter-toggle {
  width: 15px;
  height: 15px;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  padding: 0;
}

/* Chevron */
.niq-filter-toggle::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-right: 1px solid #111;
  border-bottom: 1px solid #111;
  transform: rotate(45deg);
}

/* Open state arrow */
.niq-filter.open .niq-filter-toggle::after {
  transform: rotate(-135deg);
  /* up */
}

/* Bin icon */
.niq-filter-clear {
  display: none;
  cursor: pointer;
}

/* Show bin only when selected */
.niq-filter.has-selection .niq-filter-clear {
  display: inline-flex;
}

/* =========================
   ACTIVE / OPEN STATE
   ========================= */

/* Header when filter is open */
.niq-filter.open .niq-filter-head {
  background: #E0E9FE;
  /* light blue */
  border-bottom-color: transparent;
  /* remove separation line */
  border-radius: 6px 6px 0px 0px;
}

/* Label text when open */
.niq-filter.open .niq-filter-text {
  color: #2D6DF6;
  /* blue text */
  font-weight: 500;
}

/* Count badge stays same, just adjust spacing harmony */
.niq-filter.open .niq-count-badge {
  background: #2D6DF6;
}

/* Arrow color remains dark (matches reference) */
.niq-filter.open .niq-filter-toggle::after {
  border-right-color: #2D6DF6;
  border-bottom-color: #2D6DF6;
}

/* =========================
   DROPDOWN INTEGRATION
   ========================= */

/* Make dropdown feel attached */
.niq-filter-dropdown {
  margin-top: 0;
  /* remove gap */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Ensure header + dropdown feel like one panel */
.niq-filter.open .niq-filter-dropdown {
  border-radius: 0px 0px 6px 6px;
  background: #E0E9FE;
  max-height: 450px;
  overflow-y: auto;
}

/* =========================
   ARROW BUTTON – RESET ALL STATES
   ========================= */

.niq-filter-toggle {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Hover */
.niq-filter-toggle:hover {
  background: transparent !important;
  box-shadow: none !important;
}

/* Focus */
.niq-filter-toggle:focus,
.niq-filter-toggle:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/*
 Optional: if your site adds border-radius or padding on buttons
*/
.brand-filter label.grey {
  color: #b5b5b5;
}

/* =========================
   GREYED (0 RESULT) FILTERS
   ========================= */

.niq-filter label.grey {
  color: #BBC0C9 !important;
}

/* If text is wrapped or styled by theme */
.niq-filter label.grey span,
.niq-filter label.grey .niq-filter-text {
  color: #BBC0C9 !important;
}

/* Optional: reduce emphasis */
.niq-filter label.grey {
  /* opacity: 0.4; */
}

/* Optional: cursor feedback */
.niq-filter label.grey {
  cursor: not-allowed;
}

/* Greyed filter = disabled */
.niq-filter label.grey {
  color: #BBC0C9 !important;
  cursor: not-allowed;
  /* opacity: 0.4; */
}

.niq-filter label.grey input {
  pointer-events: none;
  box-shadow: none;
  opacity: 0.4;
}


.niq-results {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.niq-insight-card {
  /* border: 1px solid #ddd; */
  padding: 0px 0 40px 0;
  position: relative;
}

/* =========================
   FILTER GRID
========================= */
.niq-filters {
  display: grid;
  /* grid-template-columns: repeat(5, 1fr); 4 filters + clear all */
  gap: 16px;
  grid-template-columns: repeat(4, 1fr) 130px;

}

@media (max-width: 1200px) {
  .niq-filters {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* =========================
   CLEAR ALL AS FILTER TILE
========================= */
.niq-clear-all-wrapper {
  display: flex;
  align-items: center;
  max-width: 130px;
}

.niq-clear-all-btn {
  width: 100%;
  height: 48px;
  border: 1.5px solid #2D6DF6 !important;
  /* blue */
  background: #fff;
  color: #2D6DF6;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.niq-clear-all-btn:hover {
  background: #2D6DF6;
  color: #fff;
}

.niq-clear-all-icon {
  font-size: 18px;
}

/* =========================
   RESULTS HEADER
========================= */
.niq-results-header {
  display: flex;
  font-size: 24px;
  justify-content: space-between;
  align-items: center;
  margin: 24px 0;
}

.niq-results-total {
  color: #7b7b7b;
  margin-left: 6px;
}

.niq-results-sort {
  display: flex;
  align-items: center;
  gap: 8px;
}

.niq-sort-btn {
  background: none !important;
  border: none;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #111;
}

.niq-sort-arrow {
  font-size: 16px;
}

.niq-sort-btn :hover {
  color: #2D6DF6;
}

.niq-sort-btn.active {
  color: #2D6DF6;
  background-color: none !important;
}



/* =========================
   RESULTS GRID
========================= */
.niq-results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 1200px) {
  .niq-results-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .niq-results-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   INSIGHT CARD
========================= */

.niq-insight-card {
  border: 1px solid #060A45;
  border-radius: 10px 10px 0 10px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.niq-insight-image img,
.niq-image-placeholder {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: #f3f4f6;
}

.niq-insight-content {
  padding: 16px;
}

.niq-insight-date {
  font-size: 14px;
  color: #6b7280;
  position: absolute;
  bottom: 15px;
}

.niq-insight-title {
  font-size: 18px;
  margin-bottom: 8px;
  line-height: 1.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.niq-insight-excerpt {
  font-size: 14px;
  color: #374151;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.niq-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.niq-card-link:hover {
  text-decoration: none;
}

.niq-insight-btn {
  font-size: 14px;
  font-weight: 500;
  color: #2D6DF6;
  text-decoration: none;
}

.niq-insight-btn:hover {
  text-decoration: underline;
}

.niq-results-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 180px;
  padding: 24px;
  color: #374151;
}

.niq-results-spinner {
  width: 28px;
  height: 28px;
  border: 4px solid rgba(45, 109, 246, 0.25);
  border-top-color: #2D6DF6;
  border-radius: 50%;
  animation: niq-spinner-rotate 0.8s linear infinite;
}

@keyframes niq-spinner-rotate {
  100% {
    transform: rotate(360deg);
  }
}

/* =========================
   CLEAR ALL BUTTON
========================= */

.niq-clear-all-wrapper {
  filter: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-template-columns: minmax(150px, 150px) 1fr 1fr;
}

.niq-clear-all-btn {
  padding: 12px 18px !important;
  width: 100%;
  height: 48px;
  border: 1.5px solid #2D6DF6;
  background: #fff;
  color: #2D6DF6;
  border-radius: 6px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  font-size: 14px;
  font-weight: 500;
}

.niq-clear-all-btn:hover {
  background: #2D6DF6;
  color: #fff;
}

.niq-clear-all-icon {
  width: 24px;
  height: 24px;
  display: block;
}

.niq-clear-all-btn:hover .niq-clear-all-icon {
  /* filter: brightness(0) invert(1); */
}

/* =========================
   SORT BUTTON OVERRIDE
   ========================= */
/* =========================
   SORT BUTTON HARD OVERRIDE
   ========================= */

/* Date / Alphabetical buttons */
.niq-results-sort .niq-sort-field,
.niq-results-sort .niq-sort-field:hover,
.niq-results-sort .niq-sort-field:focus,
.niq-results-sort .niq-sort-field:active {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #000 !important;
  /* adjust if needed */
  box-shadow: none !important;
  outline: none !important;
  padding: 5px 3px;
  font-weight: 400;
}


/* Asc / Desc arrow button */
.niq-results-sort .niq-sort-order,
.niq-results-sort .niq-sort-order:hover,
.niq-results-sort .niq-sort-order:focus,
.niq-results-sort .niq-sort-order:active {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #000 !important;
  box-shadow: none !important;
  outline: none !important;
  font-weight: 400 !important;
}

.niq-results-sort .niq-sort-field.active {
  color: #2F5FC6 !important;
  font-weight: 700;
}

.niq-results-sort button {
  appearance: none;
  -webkit-appearance: none;
  border: none;
}

/* shadow bos  */

.niq-filter {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}

/* Arrow should not handle clicks independently */
.niq-filter-toggle {
  pointer-events: none;
}



/* mobile css  */
/* =========================
   MOBILE FILTERS
========================= */


.niq-mobile-filter-head {
  display: none;
}

@media (max-width: 768px) {

  .niq-results-sort .niq-sort-field,
  .niq-results-sort .niq-sort-field:hover,
  .niq-results-sort .niq-sort-field:focus,
  .niq-results-sort .niq-sort-field:active {

    padding: 5px 3px;
  }

  .niq-results-total {

    margin-left: 0px;
  }
}

@media (max-width: 768px) {


  /* Filter by bar */
  .niq-mobile-filter-head {
    /* background-color: black !important; */
    /* display: block; */
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 0px;
  }

  .niq-mobile-filter-toggle {
    width: 60%;
    background: none;
    border: 2px;
    /* border-color: black !important; */
    border-bottom: 2px solid #DADDE3 !important;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 400;
    padding: 0px 12px 0px 12px;
    /* color: black !important; */
  }

  .niq-mobile-filter-head button {
    background-color: #ffffff !important;
    /* color: #111111 !important; */
  }



  .niq-clear-all-btn:not(:disabled):hover {
    background: #ffffff !important;
    color: #DADDE3 !important;
    border-color: #DADDE3 !important;

  }

  .niq-clear-all-icon:hover {
    filter: grayscale(1) brightness(1) opacity(0.18);
  }

  .niq-clear-all-btn:disabled {
    color: #DADDE3 !important
  }

  .niq-clear-all-text {
    /* color: #DADDE3 !important */
  }

  .niq-mobile-filter-head:hover {
    background-color: #ffffff !important;
    color: #DADDE3 !important
  }


  .niq-mobile-filter-head button:hover {
    background-color: #fff !important;
    /* color: #000 !important; */
  }

  .niq-mobile-filter-toggle:hover {
    background-color: #fff !important;

  }

  .niq-mobile-filter-toggle button:hover {
    background-color: #ffffff !important;
  }

  #mob-rem-btn {
    display: none;
  }



  .niq-mobile-filter-arrow {
    font-size: 14px;
    transition: transform 0.2s;
  }


  /* Collapsed by default */
  .niq-filters {
    display: none;
    grid-template-columns: 1fr;
  }

  /* When open */
  .niq-filters.open {
    display: grid;
    gap: 0;
  }

  /* Filter rows */
  .niq-filter {
    border-bottom: 1px solid #e5e7eb;
  }

  .niq-filter-head {
    height: 48px;

  }

  .niq-filter-dropdown {
    display: none;
  }

  .niq-filter.open .niq-filter-dropdown {
    display: block;
    background: #E0E9FE;
    /* matches screenshot */
    /* padding: 12px; */
  }

  /* Results: 1 column */
  .niq-results-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .niq-clear-all-wrapper {
    justify-content: flex-end;
  }
}

/* =========================
   MOBILE FILTER HEADER
========================= */
@media (max-width: 768px) {

  .niq-mobile-filter-head {
    display: flex;
    /* ✅ REQUIRED */
    align-items: center;
    justify-content: space-between;

    padding: 16px 0px 0px 0px;
    font-size: 15px;
    font-weight: 600;
    color: #111827;

    /* border-bottom: 1px solid #e5e7eb; */
    margin-bottom: 0px;
  }
}

@media (max-width: 768px) {

  .niq-filter {
    width: 100%;
    border-bottom: 1px solid #e5e7eb;
    padding: 0;
    box-shadow: none;
    filter: none;
  }

  .niq-filter.open {
    box-shadow: none;
    filter: none;
  }

  .niq-filter-head {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 12px 12px;
    margin-top: 6px;

    background: transparent;


  }

  .niq-mobile-filter-toggle .niq-filter-label {
    font-size: 15px;
    font-weight: 500;
  }

  .niq-filter-bar {
    flex-direction: column;
    align-items: normal;
    gap: 0px;

  }
}


@media (max-width: 768px) {

  .niq-filter-dropdown {
    display: none;
    /* padding: 12px; */
    background-color: #E0E9FE;
  }

  .niq-filter.open .niq-filter-dropdown {
    display: block;
  }
}

@media (max-width: 768px) {

  .niq-clear-all-wrapper {
    /* margin-left: auto; */
    width: 35%;
  }

  .niq-clear-all-btn {
    height: 48px;
    padding: 10px 10px !important;
    padding: 0 12px;
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .filter-super-bar-niq {
    position: sticky;
    top: 0;
    background: white;
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.2);

  }

  .niq-results-sort {
    gap: 0px;
    font-size: 14px;

  }

  .niq-sort-field {
    font-size: 14px;
    padding: 0px;
  }

  .niq-results-header {
    font-size: 14px;
    margin: 0px;
    padding: 18px 0px;
  }

  .niq-sort-order {
    padding: 0px;
  }

  .niq-sort-arrow {
    font-size: 14px;
    margin-left: 10px;
  }

  .niq-filter-text {

    font-size: 14px;
  }

  .niq-clear-all-icon {
    width: 18px;
    height: 18px;
  }

  .niq-mobile-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  /* Rotate mobile Filter-by arrow when filters are open */

  .niq-filters {
    display: none;
  }

  .niq-filter-bar.open .niq-filters {
    display: grid;
  }

  /* Rotate mobile "Filter by" arrow */
  .niq-filter-bar.open .niq-mobile-filter-toggle .niq-filter-toggle::after {
    transform: rotate(-135deg);
  }

  /* =====================================================
   STOP GLOBAL BLUE HOVER FOR MOBILE FILTER BUTTON
   ===================================================== */

  .niq-mobile-filter-head .niq-mobile-filter-toggle,
  .niq-mobile-filter-head .niq-mobile-filter-toggle:hover,
  .niq-mobile-filter-head .niq-mobile-filter-toggle:focus,
  .niq-mobile-filter-head .niq-mobile-filter-toggle:active {
    background-color: transparent !important;
    color: #111 !important;
    border-color: #DADDE3 !important;
    box-shadow: none !important;
    outline: none !important;
  }

}

/* test */
/* =====================================================
   CLEAR ALL – HARD DISABLE WHEN NO SELECTION
   ===================================================== */

/* Default = disabled */


.niq-clear-all-btn {
  border-color: #DADDE3 !important;
  color: #DADDE3 !important;
  background: #ffffff !important;
  cursor: not-allowed !important;
  pointer-events: none;
  /* 🔑 THIS IS THE FIX */
  font-size: 16px;
}

.niq-clear-all-btn button:hover {
  border-color: #DADDE3 !important;
  color: #2D6DF6 !important;
  background: #ffffff !important;
  pointer-events: none;
  /* 🔑 THIS IS THE FIX */
}

.niq-clear-all-icon {
  filter: grayscale(1) brightness(1) opacity(0.18);

}

/* =====================================================
   CLEAR ALL – ENABLE ONLY WHEN FILTERS SELECTED
   ===================================================== */

.niq-filter-bar:has(.niq-filter.has-selection) .niq-clear-all-btn {
  border-color: #2D6DF6 !important;
  color: #2D6DF6 !important;
  cursor: pointer !important;
  pointer-events: auto;
  /* 🔑 RE‑ENABLE */
}

.niq-filter-bar:has(.niq-filter.has-selection) .niq-clear-all-icon {
  filter: none;
  opacity: 1;
}

/* Enabled hover (now safe, because hover can only fire when enabled) */
.niq-filter-bar:has(.niq-filter.has-selection) .niq-clear-all-btn:hover {
  background-color: #ffffff !important;
  color: #2D6DF6 !important;
}

.niq-clear-all-btn {
  background: #fff;
  border: 1.5px solid #DADDE3;
  color: #DADDE3;
  cursor: not-allowed;
}

.niq-clear-all-btn:not(:disabled) {
  border-color: #2D6DF6;
  color: #2D6DF6;
  cursor: pointer;
}

.niq-clear-all-btn:not(:disabled):hover {
  /* background: #2D6DF6 !important; */
  /* color: #fff !important; */
}



/* Clear All: no hover ever */
.niq-clear-all-btn {
  pointer-events: none;
}

/* Re-enable click only when active (optional) */
.niq-filter-bar.has-selection .niq-clear-all-btn {
  pointer-events: auto;
}

/* .niq-filter.niq-clear-all-wrapper button:hover {
  background-color: #ffffff !important;
} */

/* =========================
   CLEAR ALL – STOP GLOBAL HOVER
========================= */

.niq-filter.niq-clear-all-wrapper button,
.niq-filter.niq-clear-all-wrapper button:hover,
.niq-filter.niq-clear-all-wrapper button:focus,
.niq-filter.niq-clear-all-wrapper button:active {
  background-color: #ffffff !important;
  color: #DADDE3 !important;
  border-color: #DADDE3 !important;
  box-shadow: none !important;
}

/* ===== For Chrome, Edge, Safari, Opera ===== */
.filter-super-bar-niq::-webkit-scrollbar {
  width: 10px;              /* Width of vertical scrollbar */
  height: 10px;             /* Height of horizontal scrollbar */
}

.filter-super-bar-niq::-webkit-scrollbar-track {
  background: #f1f1f1;      /* Track (background) color */
}

.filter-super-bar-niq::-webkit-scrollbar-thumb {
  background: #888;         /* Scroll handle color */
  border-radius: 5px;       /* Rounded corners */
}

.filter-super-bar-niq::-webkit-scrollbar-thumb:hover {
  background: #2D6DF6;         /* Handle color on hover */
}

/* ===== For Firefox ===== */
.filter-super-bar-niq {
  scrollbar-width: thin;           /* "auto" or "thin" */
  scrollbar-color: #7199f0 #E0E9FE;   /* thumb color | track color */
}