body {
  width: 100%;
  height: 100%;
  font-family: "Conv_Gill Sans MT Medium", Sans-Serif;
  font-size: 2.2rem;
  line-height: 3rem;
  font-weight: 400;
  color: #fff;
}

.mui-title,
.mui-details,
.mui-detail {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/*
.mui-wrapper { padding-bottom: 40px; }
.mui-hero {
  background: linear-gradient(120deg, #0e6ba8, #0a4d74);
  color: #fff; padding: 40px 16px; text-align: center;
}
.mui-hero h1 { margin: 0 0 16px; font-weight: 700; }
.mui-searchbar { display: flex; gap: 8px; max-width: 1150px; margin: 0 auto; }
.mui-searchbar input { flex: 1; padding: 12px 16px; border-radius: 8px; border: none; color: #000000; }
.mui-searchbar button { padding: 12px 18px; border: 0; border-radius: 8px; background: #ff6b35; color: #ffffff; cursor: pointer; }
*/

.mui-body { display: grid; grid-template-columns: 260px 1fr; gap: 24px; max-width: 100%; width: 100%; margin: 24px auto; padding: 10vh 16px 0 16px !important; }
.mui-left { background: none; padding: 5px; height: fit-content; }
.mui-filter-title { font-weight: 700; margin-bottom: 8px; color: #ffffff;  font-size: 18px; text-transform: uppercase; font-family:"Conv_Dinot Font"; }
.mui-check { display: flex; margin: 10px 0;font-size: 16px; line-height: 1.4; font-family:"Conv_Dinot Font"; font-weight: 200; align-items: center; gap: 8px;  }

/* checkbox style */
.mui-left input[type="checkbox"] {
  -webkit-appearance: none; /* remove default styling */
  -moz-appearance: none;
  appearance: none;
  width: 1.2em;
  height: 1.2em;
  border: 0.10em solid #ff6b35;
  border-radius: 0.15em;
  background-color: transparent;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin: 4px;
}

.mui-left input[type="checkbox"]:checked {
  background-color: #ff6b35; /* box background */
  border-color: #ff6b35;
}

/* White tick */
.mui-left input[type="checkbox"]:checked::after {
  content: "✓";
  color: white;
  font-size: 1em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
}

.mui-right .mui-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.mui-count { font-weight: 600; }

.mui-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; width: 100%; box-sizing: border-box; }
.mui-card { background: rgba(85, 167, 202, 0.7);  border: 1px solid #e6e6e6; border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06); padding: 10px; display: flex; flex-direction: column; gap: 10px; height:300px;
}
.mui-badge {
  display: inline-block; font-size: 11px; font-weight: 400; padding: 2px 20px; border-radius: 8px; color: #fff; width: fit-content;
}
.mui-badge-posters { background: #175069; }
.mui-badge-medical { background: #175069; }
.mui-badge-publications { background: #175069; }
.mui-badge-trials { background: #175069; color: #ffffff; }

.mui-title { font-weight: 400; font-family: "Conv_dinot-medium"; color: #ffffff; font-size: 16px; line-height: 1.3; max-height:calc(1.3em * 3); overflow: hidden; 
  display: -webkit-box; 
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; 
}
.mui-details { font-size: 14px; font-family: "Conv_Dinot Font"; color: #f9f9f9; }
.mui-detail { margin: 2px 0; }
.mui-dk { font-weight: 400; color: #f9f9f9; }

.mui-actions { margin-top: auto; }
.mui-btn { display: inline-block; font-weight: 400; padding: 2px 20px; border-radius: 8px; background-image: -webkit-linear-gradient(-90deg, rgb(244, 127, 37) 0%, rgb(228, 26, 55) 100%); 
  color: #fff; font-size:12px ; text-decoration: none;
}
.mui-btn:hover { filter: brightness(0.95); }

.mui-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  font-size: 16px;
  color: #444;
}

.mui-loader .spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #ff6b35;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* --- Autocomplete Dropdown --- */
.mui-autocomplete {
  position: absolute;
  background-color: #fff;
  border: 1px solid #cfd8dc;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-height: 220px;
  overflow-y: auto;
  display: none;
  z-index: 1000;
}

.mui-autocomplete.visible {
  display: block;
}

.mui-autocomplete-item {
  padding: 2px 12px;
  cursor: pointer;
  color: #292929;
  font-size: 14px;
}

.mui-autocomplete-item:hover {
  background-color: #e3f2fd;
  color: #175069;
}

.mui-autocomplete-item .highlight {
  color: #ff6b35;
}

#mui-pagination, 
#mui-pagination-top, 
.pagination-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 16px 0;
  transition: opacity 0.3s ease-in-out;
}

#mui-pagination,
#mui-pagination-top {
  opacity: 0;
}
#mui-pagination.visible,
#mui-pagination-top.visible {
  opacity: 1;
}

/* --- Page number buttons --- */
.mui-page-btn {
  background-color: #206b8b;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 14px;
  min-width: 36px;
  transition: background-color 0.2s ease;
}

.mui-page-btn:hover {
  background-color: #38b3e8;
}

.mui-page-btn.active {
  background-color: #38b3e8;
  cursor: default;
}

.page-links,
.per-page {
  display: flex;
  gap: 6px;
}

/* --- Per page selector --- */
.per-page .mui-page-btn {
  background-color: #206b8b;
}

.per-page .mui-page-btn.active {
  background-color: #38b3e8;
}

.pagination-controls button:disabled {
  background-color: #ccc;
  cursor: default;
}

/*#mui-pagination.disabled {
  opacity: 0.7;
  pointer-events: none;
}*/

#mui-pagination-top {
  margin-top: 10px;
  margin-bottom: 20px;
}

#mui-pagination {
  margin-top: 20px;
  margin-bottom: 20px;
}

.mui-no-results {
  display: none;
  text-align: left;
  color: #d3d3d3;
  font-size: 1.1rem;
  margin-top: 2rem;
}

.mui-no-results h3 {
  font-weight: 500;
  color: #d3d3d3;
}


/* =========================================================
   UNIFIED SEARCH PAGE MEDIA QUERIES
   ========================================================= */

/* Large tablets and small desktops (1200px) */
@media (max-width: 1200px)  {
  .mui-body {
    grid-template-columns: 220px 1fr; 
    gap: 16px;
  }
  .mui-title {
    font-size: 15px;
  }
  .mui-card {
    height: auto;
  }
  #mui-pagination,
  #mui-pagination-top {
    gap: 16px;
  }
  .mui-page-btn {
    padding: 6px 8px;
    font-size: 13px;
  }
  .page-links,
  .per-page {
    gap: 4px;
  }
}

/* Tablets (992px) */
@media (max-width: 992px)  {
  .mui-body {
    grid-template-columns: 1fr; 
    padding: 8vh 12px 0 12px !important;
  }
  .mui-left {
    order: -1; /* sidebar comes first */
    margin-bottom: 16px;
  }
  .mui-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
  .mui-card {
    height: auto; 
  }
  .mui-title { 
    font-weight: 200;
  }
  #mui-pagination,
  #mui-pagination-top {
    justify-content: center;
    gap: 14px;
  }
  .mui-page-btn {
    padding: 6px 8px;
    font-size: 13px;
  }
  .page-links,
  .per-page {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Mobile landscape and small tablets (768px) */
@media (max-width: 768px) {
  .mui-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .mui-count {
    font-size: 14px;
  }
  .mui-details {
    font-size: 13px;
  }
  .mui-title {
    font-weight: 200;
    -webkit-line-clamp: unset;
    max-height: none;
    overflow: visible;
  }
  .mui-card {
    height: auto;
  }
  .mui-btn {
    font-size: 11px;
    padding: 4px 14px;
  }
  #mui-pagination,
  #mui-pagination-top {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    margin-bottom: 12px;
  }
  .page-links,
  .per-page {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  .mui-page-btn {
    font-size: 12px;
    padding: 5px 8px;
    min-width: 32px;
  }
}

/* Mobile portrait (576px) */
@media (max-width: 576px) {
  .mui-body {
    padding: 6vh 8px 0 8px !important;
  }
  .mui-grid {
    grid-template-columns: 1fr; 
  }
  .mui-card {
    padding: 8px;
  }
  .mui-title {
    font-size: 14px;
  }
  .mui-details {
    font-size: 12px;
  }
  .mui-badge {
    font-size: 10px;
    padding: 2px 12px;
  }
  .mui-autocomplete-item {
    padding: 4px;
    font-size: 14px;
  }
  .mui-autocomplete-item {
  padding: 1px 10px;
  font-size: 14px;
  }
  #mui-pagination,
  #mui-pagination-top {
    flex-direction: column;
    gap: 8px;
  }

  .page-links,
  .per-page {
    justify-content: center;
    flex-wrap: wrap;
  }
  .mui-page-btn {
    font-size: 11px;
    padding: 4px 6px;
    min-width: 28px;
  }
}
/* =========================================================
   END OF UNIFIED SEARCH PAGE MEDIA QUERIES
   ========================================================= */