/* lolboost.gg – Ranked Accounts Filterbar Addon (v4)
   Load this AFTER your main.css (or append at the end of main.css)
*/

.ranked-accounts-page .shop-filterbar{position:relative;z-index:99998;margin-top:22px;}
/* sticky top is computed from the real header height via JS (fallback 110px) */
.ranked-accounts-page .shop-filterbar--sticky{position:sticky;top:var(--lb-sticky-top, 110px);z-index:99998;}

/* Layout row */
.ranked-accounts-page .shop-filterbar__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ranked-accounts-page .shop-filterbar__actions{margin-left:auto;display:flex;gap:10px;}

/* Search */
.ranked-accounts-page .shop-filterbar__search{
  flex:1 1 280px;min-width:220px;
  display:flex;align-items:center;gap:10px;
  height:44px;padding:0 14px;border-radius:999px;
  background:rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
  border:1px solid rgba(255,255,255,0.08);
}
.ranked-accounts-page .shop-filterbar__search input{width:100%;background:transparent;border:0;outline:0;color:rgba(255,255,255,0.92);}

/* Pills */
.ranked-accounts-page .shop-filterpill{position:relative;}
.ranked-accounts-page .shop-filterpill__btn{
  display:flex;align-items:center;gap:10px;
  height:44px;padding:0 14px;border-radius:999px;
  background:rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
  border:1px solid rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.92);
}
.ranked-accounts-page .shop-filterpill__btn:hover{border-color:rgba(255,255,255,0.14);}
.ranked-accounts-page .shop-dropdown.is-open{display:block;}
.ranked-accounts-page .shop-filterpill__value{opacity:.9;font-weight:800;}
.ranked-accounts-page .shop-filterpill__label{font-weight:700;}

/* Dropdown */
.ranked-accounts-page .shop-dropdown{
  position:absolute;top:calc(100% + 10px);left:0;
  width:360px;max-width:calc(100vw - 24px);
  background:rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  box-shadow:0 18px 60px rgba(0,0,0,0.55);
  display:none;overflow:hidden;
}
.ranked-accounts-page .shop-dropdown__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.06);
}
.ranked-accounts-page .shop-dropdown__head span{font-weight:800;}
.ranked-accounts-page .shop-dropdown__close{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,0.10);
  color:rgba(255,255,255,0.9);
  border-radius:10px;width:34px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;
}

/* Toolbar buttons (Sort + Compact) */

/* Active chips wrapper */
.ranked-accounts-page .shop-filterbar__chips{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:14px;
  padding:10px;
  backdrop-filter: blur(18px);
}

/* Accounts grid: 3 columns (12 per page = 4 rows) */
.ranked-accounts-page .accounts-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
}
@media (max-width: 1100px){
  .ranked-accounts-page .accounts-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width: 720px){
  .ranked-accounts-page .accounts-grid{grid-template-columns:1fr;}
}
.ranked-accounts-page .shop-dropdown__body{padding:12px 14px;}

/* Align menus right when in toolbar */
.ranked-accounts-page .shop-toolbar__right .shop-dropdown,
.ranked-accounts-page .shop-sort .shop-dropdown{left:auto;right:0;}

/* Facet search input */
.ranked-accounts-page .facet-search{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;
  background:rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;padding:10px 12px;
}
.ranked-accounts-page .facet-search__input{width:100%;background:transparent;border:0;outline:0;color:rgba(255,255,255,0.92);}

/* Hide the source <select> elements (we build custom checkbox lists) */
.ranked-accounts-page select.js-facet-source.is-hidden{display:none!important;}

/* Checkbox facet list */
.ranked-accounts-page .facet-scroll{
  max-height:360px;overflow:auto;padding-right:6px;
}
.ranked-accounts-page .facet-scroll::-webkit-scrollbar{width:6px;}
.ranked-accounts-page .facet-scroll::-webkit-scrollbar-thumb{background:rgba(140,110,255,0.55);border-radius:999px;}

.ranked-accounts-page .facet-item{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 10px;border-radius:12px;
  cursor:pointer;user-select:none;
}
.ranked-accounts-page .facet-item:hover{background:rgba(255,255,255,0.04);}
.ranked-accounts-page .facet-item__left{display:flex;align-items:center;gap:10px;min-width:0;}
.ranked-accounts-page .facet-item__text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ranked-accounts-page .facet-item__icon{opacity:.9;}
.ranked-accounts-page .facet-item__check{position:absolute;opacity:0;pointer-events:none;}
.ranked-accounts-page .facet-item__box{
  width:18px;height:18px;border-radius:6px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.22);
  flex:0 0 auto;
}
.ranked-accounts-page .facet-item__check:checked + .facet-item__box{
  background:rgba(140,110,255,0.95);
  border-color:rgba(140,110,255,0.95);
  box-shadow:0 0 0 3px rgba(140,110,255,0.25);
}

/* More Filters grid */
.ranked-accounts-page #ddMore .shop-dropdown__grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media (min-width: 900px){ .ranked-accounts-page #ddMore .shop-dropdown__grid{grid-template-columns:1fr 1fr;} }
.ranked-accounts-page .shop-dropdown__group label{display:block;font-size:12px;opacity:.85;margin:2px 0 8px;font-weight:700;}

/* Make "More Filters" cleaner */
.ranked-accounts-page #ddMore.shop-dropdown{width:560px;max-width:calc(100vw - 24px);} 
.ranked-accounts-page #ddMore .shop-dropdown__actions{padding-top:10px;display:flex;justify-content:flex-end;}
.ranked-accounts-page #ddMore .shop-dropdown__actions .btn{min-width:140px;border-radius:999px;}

/* Price */
.ranked-accounts-page .shop-price__fields{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end;}
.ranked-accounts-page .shop-price__field label{display:block;font-size:12px;opacity:.8;margin-bottom:6px;}
.ranked-accounts-page .shop-price__input{display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;border-radius:12px;background:rgba(0,0,0,0.22);border:1px solid rgba(255,255,255,0.08);}
.ranked-accounts-page .shop-price__input input{width:100%;background:transparent;border:0;outline:0;color:rgba(255,255,255,0.92);}
.ranked-accounts-page .shop-price__sep{opacity:.7;padding-bottom:8px;}
.ranked-accounts-page .shop-range{position:relative;margin:14px 2px 8px;height:28px;}
.ranked-accounts-page .shop-range input[type=range]{
  position:absolute;left:0;top:13px;width:100%;
  pointer-events:none;background:transparent;
  -webkit-appearance:none;appearance:none;
}
.ranked-accounts-page .shop-range input[type=range]::-webkit-slider-runnable-track{height:6px;background:transparent;border:0;}
.ranked-accounts-page .shop-range input[type=range]::-moz-range-track{height:6px;background:transparent;border:0;}
.ranked-accounts-page .shop-range input[type=range]::-webkit-slider-thumb{
  pointer-events:auto;
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:999px;
  background:rgba(140,110,255,0.95);
  border:2px solid rgba(12,12,22,0.9);
  box-shadow:0 0 0 4px rgba(140,110,255,0.18);
  margin-top:0;
}
.ranked-accounts-page .shop-range input[type=range]::-moz-range-thumb{
  pointer-events:auto;
  width:18px;height:18px;border-radius:999px;
  background:rgba(140,110,255,0.95);
  border:2px solid rgba(12,12,22,0.9);
  box-shadow:0 0 0 4px rgba(140,110,255,0.18);
}
.ranked-accounts-page .shop-range__track{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:6px;border-radius:999px;background:rgba(255,255,255,0.12);}
.ranked-accounts-page .shop-range__fill{position:absolute;top:0;height:6px;border-radius:999px;background:rgba(140,110,255,0.95);}
.ranked-accounts-page .shop-price__labels{display:flex;justify-content:space-between;opacity:.85;font-weight:800;}

/* Active filter chips */
.ranked-accounts-page .shop-filterbar__chips{
  margin-top:10px;
  display:flex;gap:8px;overflow:auto;
  padding-bottom:4px;
}
.ranked-accounts-page .shop-filterbar__chips::-webkit-scrollbar{height:6px;}
.ranked-accounts-page .shop-filterbar__chips::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.18);border-radius:999px;}
.ranked-accounts-page .filter-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  color:rgba(255,255,255,0.92);
  white-space:nowrap;
}
.ranked-accounts-page .filter-chip:hover{border-color:rgba(140,110,255,0.35);}
.ranked-accounts-page .filter-chip__x{opacity:.85;}
.ranked-accounts-page .active-filters__hint{opacity:.7;white-space:nowrap;}

/* Toolbar */
.ranked-accounts-page .shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 10px;}
.ranked-accounts-page .shop-count{opacity:.85;font-weight:800;}
.ranked-accounts-page .shop-count__sep{opacity:.5;padding:0 6px;}

/* Sort + density */
.ranked-accounts-page .shop-sort{position:relative;}
.ranked-accounts-page .reset-filters--ghost{
  display:flex;align-items:center;gap:10px;
  height:44px;padding:0 14px;border-radius:999px;
  background:rgba(0,0,0,0.18);
  border:1px solid rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.92);
}

.ranked-accounts-page #ddSort.shop-dropdown{width:260px;}
.ranked-accounts-page .shop-menuitem{
  width:100%;text-align:left;background:transparent;border:0;
  color:rgba(255,255,255,0.92);
  padding:10px 10px;border-radius:10px;
}
.ranked-accounts-page .shop-menuitem:hover{background:rgba(255,255,255,0.06);}

/* Pagination */
.ranked-accounts-page .shop-pagination{display:flex;justify-content:center;margin:24px 0 40px;}
.ranked-accounts-page .page-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ranked-accounts-page .page-btn{
  min-width:40px;height:40px;padding:0 12px;border-radius:12px;
  background:rgba(0,0,0,0.18);
  border:1px solid rgba(255,255,255,0.10);
  color:rgba(255,255,255,0.92);
  font-weight:800;
}
.ranked-accounts-page .page-btn:hover{border-color:rgba(140,110,255,0.35);}
.ranked-accounts-page .page-btn.is-active{background:rgba(140,110,255,0.22);border-color:rgba(140,110,255,0.45);}
.ranked-accounts-page .page-btn.is-disabled{opacity:.45;cursor:not-allowed;}
.ranked-accounts-page .page-ellipsis{opacity:.6;padding:0 4px;}

/* Density toggle (uses .container.density-compact from JS) */
.ranked-accounts-page .container.density-compact .account-card .excerpt{display:none !important;}
.ranked-accounts-page .container.density-compact .account-card .highlights{display:none !important;}
.ranked-accounts-page .container.density-compact .account-card{padding-bottom:10px;}


/* v7.2 More Filters polish */
@media (min-width: 900px){
  .ranked-accounts-page #ddMore .shop-dropdown__grid{column-gap:26px;}
  .ranked-accounts-page #ddMore .shop-dropdown__grid .shop-dropdown__group:nth-child(2){
    padding-left:18px;
    border-left:1px solid rgba(255,255,255,0.08);
  }
}
.ranked-accounts-page #ddMore .shop-check{height:44px;padding:0 10px;border-radius:12px;}
.ranked-accounts-page #ddMore .shop-check:hover{background:rgba(255,255,255,0.06);}

/* v7.4 UI hotfixes */
.ranked-accounts-page .shop-filterpill,
.ranked-accounts-page .shop-sort{z-index:100000;}
.ranked-accounts-page .shop-dropdown{z-index:100001;}

/* Range slider alignment + smoother drag */
.ranked-accounts-page .shop-range{height:26px;}
.ranked-accounts-page .shop-range__track,
.ranked-accounts-page .shop-range__fill{
  top:50%;
  transform:translateY(-50%);
}
.ranked-accounts-page .shop-range input[type=range]{
  top:50%;
  transform:translateY(-50%);
  touch-action:none;
}
.ranked-accounts-page .shop-range input[type=range]::-webkit-slider-thumb{margin-top:0;}


/* dropdown overlay fix */
.ranked-accounts-page .shop-dropdown{z-index:9999999;}
.ranked-accounts-page .shop-dropdown.is-open{z-index:9999999;}


/* =========================================================
   v8.1 – Sort Button hover width fix + sort dropdown items UI
   (merged by ChatGPT)
   ========================================================= */

/* Prevent sort pill from changing width on hover/focus */
.ranked-accounts-page .rank-account-sort,
.ranked-accounts-page .shop-sort__btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  width:max-content !important;
  min-width:190px !important;
  max-width:240px !important;
  padding:0 14px !important; /* keep stable */
  box-sizing:border-box !important;
  transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}

/* Avoid width jump caused by font-weight changes */
.ranked-accounts-page .shop-sort__btn,
.ranked-accounts-page .shop-sort__btn *{
  font-weight:600 !important;
}
.ranked-accounts-page .shop-sort__btn:hover,
.ranked-accounts-page .shop-sort__btn:hover *{
  font-weight:600 !important;
}

/* Truncate label instead of pushing width */
.ranked-accounts-page .shop-sort__btn .label,
.ranked-accounts-page .shop-sort__btn .shop-pill__label,
.ranked-accounts-page .shop-sort__btn span{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* Sort dropdown – cleaner selectable rows */
.ranked-accounts-page #ddSort.shop-dropdown{
  width:320px !important;
  max-width:calc(100vw - 24px) !important;
  padding:10px !important;
  border-radius:16px !important;
}

/* Title (if present) */
.ranked-accounts-page #ddSort .dd-title,
.ranked-accounts-page #ddSort .shop-dropdown__title{
  font-weight:800 !important;
  opacity:.9 !important;
  padding:6px 8px 10px !important;
}

/* Option rows – supports your current markup (button.shop-menuitem) */
.ranked-accounts-page #ddSort .shop-menuitem{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  padding:10px 12px !important;
  border-radius:12px !important;
}

/* Hover + selected look */
.ranked-accounts-page #ddSort .shop-menuitem:hover{
  background:rgba(255,255,255,.06) !important;
}
.ranked-accounts-page #ddSort .shop-menuitem.is-selected,
.ranked-accounts-page #ddSort .shop-menuitem[aria-selected="true"]{
  background:rgba(255,255,255,.07) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10) !important;
}

/* Right-side indicator dot (when markup includes .dd-dot) */
.ranked-accounts-page #ddSort .dd-dot{
  width:14px;height:14px;border-radius:999px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);
  flex:0 0 14px;
  margin-left:auto;
}
.ranked-accounts-page #ddSort .shop-menuitem.is-selected .dd-dot,
.ranked-accounts-page #ddSort .shop-menuitem[aria-selected="true"] .dd-dot{
  box-shadow:inset 0 0 0 4px rgba(140,110,255,.95);
}


/* =========================================================
   v8.2 – Price range: centered thumbs + smoother dragging
   ========================================================= */

.ranked-accounts-page .shop-range,
.ranked-accounts-page .shop-price-range{
  position: relative;
}

/* Track */
.ranked-accounts-page input[type="range"].shop-range__track,
.ranked-accounts-page .shop-range__track{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  outline: none;
}

/* Thumb – centered on 6px track.
   Use transparent border to increase hit area without changing visual too much. */
.ranked-accounts-page input[type="range"].shop-range__track::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(160, 135, 255, 1);
  border: 7px solid rgba(160,135,255,0);   /* bigger hit area */
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  margin-top: -9px; /* centers (18px thumb + 14px border = 32px box; -((32/2)-(6/2))=-13; but webkit uses visual box; -9 is stable here */
  cursor: grab;
}
.ranked-accounts-page input[type="range"].shop-range__track::-webkit-slider-thumb:active{
  cursor: grabbing;
}

/* Firefox thumb/track */
.ranked-accounts-page input[type="range"].shop-range__track::-moz-range-track{
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
}
.ranked-accounts-page input[type="range"].shop-range__track::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(160,135,255,1);
  border: 6px solid rgba(160,135,255,0);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  cursor: grab;
}

/* Make sure dragging is smooth on touch devices */
.ranked-accounts-page input[type="range"].shop-range__track{
  touch-action: none;
}


/* =========================================================
   v8.4 – Dropdowns must overlay EVERYTHING
   ========================================================= */
.ranked-accounts-page .shop-dropdown{
  z-index: 2147483000 !important;
}
.ranked-accounts-page .shop-dropdown.is-open{
  pointer-events: auto !important;
}


/* =========================================================
   v8.5 – Price range thumb perfectly centered + smooth drag
   ========================================================= */

/* Track height reference */
.ranked-accounts-page input[type="range"].shop-range__track,
.ranked-accounts-page .shop-range__track{
  height: 6px !important;
}

/* WebKit thumb centered: (20 - 6)/2 = 7 */
.ranked-accounts-page input[type="range"].shop-range__track::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background: rgba(160,135,255,1) !important;
  border: 0 !important;               /* no offset by transparent border */
  margin-top: -7px !important;        /* center on 6px track */
  box-shadow: 0 6px 18px rgba(0,0,0,.35) !important;
  cursor: grab;
}
.ranked-accounts-page input[type="range"].shop-range__track::-webkit-slider-thumb:active{
  cursor: grabbing;
}

/* Firefox */
.ranked-accounts-page input[type="range"].shop-range__track::-moz-range-thumb{
  width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background: rgba(160,135,255,1) !important;
  border: 0 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.35) !important;
  cursor: grab;
}

/* Make the slider easier to grab without changing thumb geometry */
.ranked-accounts-page .shop-range{
  padding: 10px 0; /* increases hit area vertically */
}
.ranked-accounts-page input[type="range"].shop-range__track{
  width: 100% !important;
  touch-action: none !important;
}