/* Card shell */
.uscl-compare-card {
  background: #fff;
  border: 1px solid #e3e8f2;
  border-radius: 22px;
  /* Give space at the top, less on sides */
  padding: 8px 12px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 6px 24px rgba(16, 24, 40, 0.08);
  align-items: stretch; /* ensure children span full width */
}

/* -----------------------
   Header "Search a Club"
   ----------------------- */
.usclSearchHeader {
  position: relative;
  width: 100%;
}

.usclSearchHeader__input {
  width: 100%;
  height: 24px;
  padding: 0 48px 0 14px; /* room for icon */
  border: 2px solid #cfd6e4;
  border-radius: 28px;
  background: #fff;
  font-size: 12px;
  font-weight: 700 !important; 
  color: #22306a !important;   
  outline: none;
  box-shadow: inset 0 0 0 0 rgba(34, 48, 106, 0);
}

.usclSearchHeader__input::placeholder {
  color: #22306a;
  opacity: 1;
}

.usclSearchHeader__input:focus {
  border-color: #22306a;
  box-shadow: 0 0 0 4px rgba(34, 48, 106, 0.12);
}

.usclSearchHeader__btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  background: transparent; /* no oval */
  border: none;            /* remove outline */
  border-radius: 0;         /* reset */
  padding: 0;
  color: #22306a;
  cursor: pointer;
}


/* -----------------------
   Results panel & list
   ----------------------- */
.usclBoxSearch { position: relative; width: 100%; }

.usclBoxPanel {
  position: absolute;
  left: 0;
  top: 4px; /* sits just under the pill */
  width: 100%;
  background: #fff;
  border: 1px solid #e3e8f2;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.12);
  overflow: hidden;
  z-index: 5;
}

.usclBoxPanel[hidden] { display: none; }

.usclBoxList { max-height: 320px; overflow: auto; }

.usclBoxItem {
  gap: 1px;
  padding: 4px 4px;
  cursor: pointer;
}

.usclBoxItem:hover { background: #f5f7fc; }

.usclBoxType {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: #6b7390;
  min-width: 86px;
}

.usclBoxTitle {
  font-weight: 700;
  color: #22306a;
  text-decoration: none;
  font-size: 12px;
}

.usclBoxTitle:hover { text-decoration: underline; }

.usclBoxMeta {
  font-size: 10px;      /* smaller */
  font-weight: 800;     /* more weight */
  color: #c62828;       /* USCL red */
}

.card.uscl-compare-card {
  display: flex !important;          /* override any grid/inline-grid from theme */
  flex-direction: column;
  justify-content: flex-start !important;  /* top-align vertically */
  align-items: stretch !important;         /* full width */
  padding: 4px 4px 4px 4px;             /* 8px from the top as requested */
  gap: 4px;
}

.usclSearchHeader {
  margin: 0 !important;
}

/* Make the search/results container fill the leftover space */
.usclBoxSearch {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;        /* IMPORTANT: allow children to shrink/scroll */
}

/* Make the panel consume the space and scroll vertically */
.usclBoxPanel {
  position: relative;   /* stop floating; it now lives IN the card */
  flex: 1;
  min-height: 0;        /* IMPORTANT for overflow to work in flex */
  overflow-y: auto;     /* the vertical scroll you want */
  /* keep your existing borders/radius/shadow if desired */
}

/* The list just stacks items; no special sizing needed */
.usclBoxList {
  display: block;
}

/* === FIX: single vertical scroller (put at end of file) === */
.card.uscl-compare-card .usclBoxPanel{
  position: absolute !important;   /* float under the pill */
  left: 0; top: 4px; width: 100%;
  max-height: 320px;
  overflow-y: auto !important;     /* only scrollbar lives here */
  overflow-x: hidden !important;
  flex: initial !important;        /* cancel earlier flex scroller */
  min-height: 0 !important;
  z-index: 5;
}

.card.uscl-compare-card .usclBoxList{
  max-height: none !important;     /* kill inner scroller */
  overflow: visible !important;
}

.usclBoxPanel {
  position: relative;
  max-height: none;      /* let list control the height */
  overflow: hidden;      /* not scrollable */
  flex: 1;
  min-height: 0;
}

.usclBoxList {
  max-height: 320px;
  overflow-y: auto;      /* single scrollbar here */
}

/* viewport-safe single scroller on the panel */
.usclBoxPanel{
  overflow-y: auto !important;   /* only scroller */
  overflow-x: hidden !important;
  max-height: 320px;             /* default, JS will clamp to viewport */
  overscroll-behavior: contain;  /* do not chain to body */
}

.usclBoxList{
  max-height: none !important;   /* list does not scroll */
  overflow: visible !important;
}

/* pill row */
.usclBoxItem{
  gap:2px;
  padding:4px 4px;
  margin:4px 6px;
  background:#f7f9ff;
  border:1px solid #e3e8f2;
  border-radius:16px;
  box-shadow:0 2px 6px rgba(16,24,40,.06);
}


/* Selected club bar */
.usclSelectedBar{
  align-items:center;
  justify-content:space-between;
  gap:4px;
  padding:4px 4px;
  margin-bottom:0px;
  background:#fff0f0;
  border:1px solid #f3b5b5;
  border-radius:14px;
}
.usclSelectedName{ font-weight:700; color:#22306a; font-size:13px; line-height:1.2; }
.usclSelectedMeta{ font-weight:800; color:#c62828; font-size:11px; line-height:1.2; }
.usclSelectedClose{
  background:#d22229; color:#fff; border:0; border-radius:10px;
  width:24px; height:24px; cursor:pointer; font-size:14px; line-height:24px;
}

/* Ranking panel fragment */
.usclRankWrap{ padding:2px 2px; }
.usclRankTitle{ font-weight:800; color:#22306a; margin-bottom:2px; font-size: 12px; }
.usclRankRow{ margin:0px 0; }
.usclRankLabel{ font-weight:700; color:#6b7390; margin-right:2px;font-size: 12px;  }
.usclRankVal{ font-weight:800; color:#22306a; font-size: 12px; }
.usclRankNA{ font-weight:800; color:#999; font-size: 12px; }


/* Selected club bar */
.usclSelectedBar{
  display:flex;
  align-items:center;
  justify-content:space-between; /* title/meta on left, X on right */
  gap:4px;
  padding:4px 4px;
  margin-bottom:0px;
  background:#fff0f0;
  border:1px solid #f3b5b5;
  border-radius:14px;
}

.usclSelectedText {
  display:flex;
  flex-direction:column;
  gap:2px;
}

.usclSelectedName{
  font-weight:700;
  color:#22306a;
  font-size:12px;
  line-height:1;
}

.usclSelectedMeta{
  font-weight:800;
  color:#c62828;
  font-size:10px;
  line-height:1;
}

/* Red X on the right */
.usclSelectedClose{
  background:none;
  border:none;
  color:#d22229;      /* USCL red */
  font-size:16px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  padding:0;
  margin-left:auto;   /* push it to the far right */
}

/* keep rank snug under selected bar */
.usclSelectedRank { margin-top: 2px; }

/* make card a column so footer sits at bottom */
.uscl-compare-card { display: flex; flex-direction: column; }

/* let the search area grow, footer sits after */
.usclBoxSearch { flex: 1 1 auto; }

/* footer styling */
.usclBoxFooter {
  margin-top: auto;
  border-top: 1px solid #e6e6e6;
  padding: 4px;
}

.usclFooterLabel { display: block; font-size: 12px; opacity: 0.7; margin-bottom: 4px; }
.usclFooterSelect { width: 100%; padding: 2px 2px; font-size: 12px; }