/* =========================================================
   SERVER LIST WIDGET (scoped to .servers-section only)
   All variables and rules are scoped under .servers-section
   so nothing here can affect the rest of the site's design.
   ========================================================= */
.servers-section{
  --sl-pink:#e0245e;
  --sl-pink-dark:#a01840;
  --sl-pink-light:#f4a6bd;
  --sl-ink:#15151a;
  --sl-panel:#1c1c22;
  --sl-panel-soft:#232329;
  --sl-line:rgba(255,255,255,0.08);
  --sl-text-dim:rgba(255,255,255,0.55);

  font-family:'Poppins', Arial, sans-serif;
  padding:18px 12px 20px;
  background:#f5f1f3;
}

.servers-widget{
  max-width:1250px;
  margin:0 auto;
  background:var(--sl-panel);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(20,12,16,0.22);
  display:flex;
  align-items:stretch;
}

/* ============ SIDEBAR ============ */
.servers-sidebar{
  position:relative;
  flex:0 0 300px;
  background:
    linear-gradient(180deg, rgba(15,10,13,0.88) 0%, rgba(12,9,11,0.94) 100%),
    url('https://images.pexels.com/photos/704555/pexels-photo-704555.jpeg?auto=compress&cs=tinysrgb&w=800') center/cover no-repeat;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:18px;
  border-right:1px solid var(--sl-line);
}
.servers-section .sidebar-top{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.servers-section .sidebar-brand{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:20px;
}
.servers-section .sidebar-brand .dot{
  display:none;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--sl-pink);
}
.servers-section .sidebar-brand span{
  color:rgba(255,255,255,0.85);
  font-weight:700;
  font-size:11.5px;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
.servers-section .sidebar-top h3{
  color:#fff;
  font-size:34px;
  font-weight:800;
  line-height:1.2;
  margin:0 0 8px 0;
  letter-spacing:0.1px;
}
.servers-section .sidebar-top p{
  color:var(--sl-text-dim);
  font-size:15px;
  line-height:1.65;
  margin:0;
}
.servers-section .sidebar-stats{
  display:flex;
  flex-direction:column;
  gap:0;
  border-top:1px solid var(--sl-line);
  margin-top:20px;
}
.servers-section .sidebar-stat{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  padding:11px 0;
  border-bottom:1px solid var(--sl-line);
}
.servers-section .sidebar-stat .num{
  color:#fff;
  font-size:15px;
  font-weight:700;
  letter-spacing:0.1px;
}
.servers-section .sidebar-stat .num em{
  color:var(--sl-pink-light);
  font-style:normal;
}
.servers-section .sidebar-stat .label{
  color:var(--sl-text-dim);
  font-size:10.5px;
  letter-spacing:0.4px;
  text-transform:uppercase;
}

/* ============ MAIN CONTENT ============ */
.servers-main{
  flex:1;
  padding:18px 20px;
  min-width:0;
  background:var(--sl-panel);
}

.servers-main-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:18px;
  padding-bottom:16px;
  border-bottom:1px solid var(--sl-line);
}
.servers-main-header h2{
  font-size:38px;
  font-weight:800;
  color:#ffffff;
  margin:0 0 3px 0;
  letter-spacing:0.1px;
}
.servers-main-header .site-heading{
  color:#ffffff !important;
}
.servers-main-header p{
  font-size:12px;
  color:var(--sl-text-dim);
  margin:0;
}
.servers-main-header p .count{
  color:var(--sl-pink-light);
  font-weight:700;
}

.server-search input{
  width:260px;
  max-width:100%;
  padding:14px 18px;
  border-radius:8px;
  border:1px solid var(--sl-line);
  background:rgba(255,255,255,0.04);
  font-family:inherit;
  font-size:12px;
  color:#fff;
  outline:none;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.server-search input::placeholder{ color:rgba(255,255,255,0.35); }
.server-search input:focus{
  border-color:var(--sl-pink);
  background:rgba(255,255,255,0.06);
}

/* ---- Server chip grid ---- */
.server-chip-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.server-chip{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 230px;
  padding:14px 16px;
  border-radius:14px;
  background:var(--sl-panel-soft);
  border:1px solid var(--sl-line);
  cursor:pointer;
  transition:border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  opacity:0;
  transform:translateY(6px);
  animation:slChipIn 0.4s ease forwards;
}
.server-chip:hover{
  border-color:rgba(224,36,94,0.55);
  background:rgba(224,36,94,0.07);
  transform:translateY(-2px);
}
.chip-photo{
  position:relative;
  flex:none;
  width:58px;
  height:58px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(255,255,255,0.12);
  transition:border-color 0.2s ease;
}
.chip-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.server-chip:hover .chip-photo{ border-color:var(--sl-pink); }
.chip-photo .dot{
  display:none;
  position:absolute;
  bottom:0;
  right:0;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--sl-pink);
  border:2px solid var(--sl-panel-soft);
}
.chip-label{
  font-size:20px;
  font-weight:700;
  color:rgba(255,255,255,0.88);
  letter-spacing:0.1px;
  line-height:1.2;
  transition:color 0.2s ease;
}
.server-chip:hover .chip-label{ color:#fff; }
.server-chip.hidden{ display:none; }

@keyframes slChipIn{
  to{ opacity:1; transform:translateY(0); }
}

/* ---- Buy Our Service button (below widget) ---- */
.servers-buy-wrap{
  text-align:center;
  padding:18px 0 6px;
}
.servers-buy-wrap .servers-buy-btn{
  display:inline-block;
  background:linear-gradient(135deg,#ff2f7d,#d1005a);
  color:#fff;
  text-decoration:none;
  padding:16px 42px;
  border-radius:999px;
  font-weight:800;
  font-size:18px;
  box-shadow:0 12px 30px rgba(224,36,94,.35);
  transition:.3s;
}
.servers-buy-wrap .servers-buy-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(224,36,94,.45);
  color:#fff;
}

/* ============ RESPONSIVE ============ */
@media (max-width:700px){
  .servers-widget{ flex-direction:column; }
  .servers-sidebar{
    flex:0 0 auto;
    width:100%;
    padding:18px 20px;
  }
  .servers-section .sidebar-top{ gap:2px; }
  .servers-section .sidebar-brand{ margin-bottom:10px; }
  .servers-section .sidebar-top h3{ font-size:16px; margin-bottom:6px; }
  .servers-section .sidebar-stats{ flex-direction:row; border-top:none; margin-top:14px; gap:22px; }
  .servers-section .sidebar-stat{ flex-direction:column; align-items:flex-start; gap:2px; border-bottom:none; padding:0; }
  .servers-main{ padding:20px 18px 22px 18px; }
}
@media (max-width:560px){
  .server-chip{ flex-basis:100%; }
  .servers-main-header{ flex-direction:column; align-items:stretch; }
  .server-search input{ width:100%; }
  .servers-section .sidebar-top p{ display:none; }
}