.rentserver-page,
.rentserver-page-futuristic {
    max-width: 1100px;
    margin: 2.5rem auto;
    background: linear-gradient(120deg, #181820 90%, #221209 100%);
    border-radius: 22px;
    padding: 2.5rem 2rem 2.2rem 2rem;
    box-shadow: 0 10px 40px 0 #00000044, 0 0 0 2px #ff5e0033;
    border: 1.5px solid #222;
    position: relative;
    backdrop-filter: blur(7px);
}

.rentserver-page h1 {
    color: var(--primary, #ff5e00);
    font-size: 2.2rem;
    margin-bottom: 1.4rem;
    letter-spacing: 0.5px;
}

.flag-bar {
    display: flex;
    justify-content: flex-end;
    gap: 1.2em;
    margin-bottom: 1.6em;
}
.country-flag {
    width: 34px;
    height: 26px;
    object-fit: cover;
    border-radius: 7px;
    border: 2px solid #31303a;
    box-shadow: 0 1px 5px #0002;
    opacity: 0.64;
    transition: 0.18s;
    cursor: pointer;
}
.country-flag.active, .country-flag:hover {
    opacity: 1;
    border-color: var(--primary, #ff5e00);
}

.game-chooser {
    display: flex;
    gap: 1.4em;
    margin-bottom: 2.1em;
    justify-content: center;
}
.game-pill {
    background: linear-gradient(90deg, #181f2d 30%, #23293c 80%);
    color: #fff;
    border-radius: 19px;
    padding: 0.67em 1.4em 0.67em 1em;
    display: flex;
    align-items: center;
    gap: 0.65em;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 1px 8px #ff5e0035;
    border: 2px solid transparent;
    transition: 0.17s;
}
.game-pill.active, .game-pill:hover {
    border: 2px solid var(--primary,#ff5e00);
    background: linear-gradient(95deg, #231912 40%, #2d231d 100%);
    color: #fff;
}
.game-pill img {
    height: 32px;
    width: 32px;
    object-fit: cover;
    margin-right: 0.3em;
    border-radius: 8px;
}

.filters-bar {
    display: flex;
    align-items: center;
    gap: 1.5em;
    font-size: 1.09rem;
    margin-bottom: 2.3em;
    flex-wrap: wrap;
}
#ramFilter, #nodeSelect {
    background: #232332;
    color: #fff;
    border-radius: 7px;
    border: 1.5px solid #ff5e002c;
    padding: 0.45em 1.15em;
    margin-left: 0.4em;
    font-size: 1.04rem;
}

.plans-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2.1em;
    justify-content: center;
}
.plan-card {
    background: linear-gradient(120deg, #212439 65%, #1e1e2d 100%);
    border-radius: 15px;
    box-shadow: 0 2px 16px #ff5e0012, 0 1.5px 7px #15161613;
    padding: 1.45em 1.45em 1.2em 1.45em;
    min-width: 220px;
    max-width: 260px;
    flex: 1 1 200px;
    margin-bottom: 1.4em;
    position: relative;
    transition: box-shadow .16s, border-color .15s;
    border: 2px solid #181822;
    text-align: left;
}
.plan-card:hover {
    box-shadow: 0 6px 32px #ff6f0037, 0 2px 20px #ff5e0033;
    border: 2px solid var(--primary, #ff5e00);
}
.plan-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6em;
}
.plan-title {
    font-size: 1.17rem;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.1px;
}
.plan-price {
    font-size: 1.38rem;
    color: var(--primary,#ff5e00);
    font-weight: 800;
    background: #1c1515;
    border-radius: 7px;
    padding: 0.14em 0.7em 0.14em 0.7em;
    margin-left: 0.5em;
}
.plan-price span {
    font-size: 0.98rem;
    color: #ffad61;
    font-weight: 400;
}
.plan-specs {
    display: flex;
    flex-direction: column;
    gap: 0.14em;
    margin: 0.56em 0 0.48em 0;
    font-size: 1.03rem;
    color: #d1d3e6;
}
.plan-specs span {
    display: flex;
    align-items: center;
    gap: 0.48em;
}
.plan-desc {
    color: #bbb;
    font-size: 0.97rem;
    margin-bottom: 0.9em;
    min-height: 22px;
    margin-top: 0.28em;
}
.order-btn {
    background: linear-gradient(90deg, #ff5e00, #ff2600);
    color: #fff;
    border: none;
    border-radius: 7px;
    width: 100%;
    padding: 0.57em 0;
    font-weight: 700;
    font-size: 1.08rem;
    transition: 0.14s;
    cursor: pointer;
    margin-top: 0.09em;
    box-shadow: 0 2px 18px #ff5e0044;
}
.order-btn:hover {
    filter: brightness(1.14);
    background: #fff;
    color: #ff5e00;
}

@media (max-width: 900px) {
    .rentserver-page, .rentserver-page-futuristic {
        padding: 1.2rem 0.5rem;
    }
    .plans-list {
        flex-direction: column;
        gap: 1.1rem;
    }
    .plan-card {
        min-width: 0;
        width: 96%;
        max-width: 420px;
        margin: 0 auto 1.2em auto;
    }
    .game-chooser, .filters-bar {
        flex-direction: column;
        gap: 0.9em;
    }
    .flag-bar { margin-bottom: 1.1em; }
}

::-webkit-scrollbar-thumb { background: #1a191f; border-radius: 10px;}
::-webkit-scrollbar { width: 9px; background: #121214;}

.rentserver-page-futuristic {
  max-width: 1050px;
  margin: 2.5rem auto;
  background: #131313; /* pure black */
  border-radius: 20px;
  padding: 2.2rem 1.8rem 2rem 1.8rem;
  box-shadow: 0 2px 24px #1a182033, 0 1px 5px #ff26001c;
}

/* Center the filters bar */
.filters-bar {
  display: flex;
  align-items: center;
  justify-content: center; /* <--- center horizontally */
  gap: 1.7em;
  font-size: 1.09rem;
  margin-bottom: 2.2em;
}

/* Make selects look even more "black" */
#ramFilter, #nodeSelect {
  background: #181818;
  color: #fff;
  border-radius: 7px;
  border: 1.5px solid #ff5e002c;
  padding: 0.4em 1.1em;
  margin-left: 0.5em;
  font-size: 1.05rem;
}

/* Remove blue tints from card backgrounds if you see any: */
.plan-card-futuristic {
  background: linear-gradient(120deg,#181818 65%,#1a1a1a 100%);
  border-radius: 13px;
  box-shadow: 0 2px 12px #ff5e0021,0 1.5px 7px #15161613;
  padding: 1.3em 1.3em 1.2em 1.3em;
  min-width: 220px;
  max-width: 265px;
  flex: 1 1 200px;
  margin-bottom: 1em;
  position: relative;
  transition: box-shadow .15s;
  border: 2px solid #181822;
}