/* Tooltip index: one-column wrapper, responsive items grid (4/3/2/1) */
.tooltip-index-grid {
    display: block;               /* single column wrapper */
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 1rem;
}

.tooltip-index-grid .tooltip-items {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, 1fr); /* default desktop: 4 columns */
    align-items: start;
}

/* desktop large -> 4, medium -> 3, small -> 2, mobile -> 1 */
@media (max-width: 1200px) {
    .tooltip-index-grid .tooltip-items { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .tooltip-index-grid .tooltip-items { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .tooltip-index-grid .tooltip-items { grid-template-columns: 1fr; }
}

.tooltip-item {
    background: #fff;
    border: 1px solid #ececec;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.03);
    transition: transform .28s ease, opacity .28s ease;
}

/* pager container: full width, centered at the bottom */
.tooltip-pager-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    box-sizing: border-box;
    padding: 0 1rem;
}
.tooltip-pager {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 6px;
    flex-wrap: wrap;
}
.tooltip-pager button {
    padding:.38rem .7rem;
    border:1px solid #ddd;
    background:#fff;
    cursor:pointer;
    border-radius:6px;
    color:#333;
}
.tooltip-pager button.active{ background:#222;color:#fff;border-color:#222; }
.tooltip-pager button:disabled{ opacity:.5; cursor:default; }

/* loading state */
.tooltip-items.is-loading { pointer-events: none; opacity: .6; filter: blur(.2px); transition: opacity .2s ease; }

/* ensure pager sits below content on small screens too */
@media (max-width: 768px) {
    .tooltip-pager-container { padding-left: .75rem; padding-right: .75rem; }
    .tooltip-pager { width: 100%; justify-content: center; }
}

/* Search bar styles */
.tooltip-search-wrap { margin-bottom: 1rem; display:flex; flex-direction:column; gap:.4rem; align-items:flex-start; }
.tooltip-search-box { display:flex; margin: 0 auto; align-items:center; gap:.5rem; background:#fff; border:1px solid #e6e6e6; padding:6px 8px; border-radius:10px; box-shadow:0 2px 10px rgba(20,20,20,0.03); width:100%; max-width:720px; }
.tooltip-search-icon { color:#888; display:inline-flex; align-items:center; justify-content:center; margin-left:2px; }
.tooltip-search { flex:1 1 auto; border:0; outline:none; font-size:15px; padding:8px 6px; background:transparent; color:#222; }
.tooltip-search::placeholder { color:#9aa0a6; opacity:1; }
.tooltip-search:focus { box-shadow: none; }
.tooltip-search-clear { background:transparent; border:0; color:#777; font-size:18px; line-height:1; padding:4px 6px; cursor:pointer; border-radius:6px; }
.tooltip-search-clear:hover { background:rgba(0,0,0,0.05); color:#333; }

/* meta row (count) */
.tooltip-search-meta { font-size:13px; color:#666; }
.tooltip-search-count { display:inline-block; padding:0.15rem 0.4rem; background:rgba(0,0,0,0.03); border-radius:6px; }

/* ensure search sits above grid on narrow screens */
@media (max-width: 900px) {
    .tooltip-search-box { max-width:100%; }
}

/* grid and items rules (keeps responsive 4/3/2/1 columns) */
.tooltip-index-grid { display:block; max-width:1200px; margin:0 auto; padding:0 1rem; box-sizing:border-box; }
.tooltip-index-grid .tooltip-items { display:grid; gap:1rem; grid-template-columns: repeat(4,1fr); }
@media (max-width:1200px){ .tooltip-index-grid .tooltip-items{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:900px){ .tooltip-index-grid .tooltip-items{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:540px){ .tooltip-index-grid .tooltip-items{ grid-template-columns:1fr;} }