/*
 * dedicated-servers.css
 * Page-specific styles for /dedicated-servers. Loaded after cloud-servers.css,
 * whose vps_* layout (picker, cards, tiles, table, FAQ) this page reuses.
 */

/* GPU row leads the spec list on GPU plans */
.vps_specs li.ded_spec_gpu {
    font-weight: 600;
    color: #2f4655;
}
.vps_specs li.ded_spec_gpu .fa {
    color: #2f4655;
}

/* Managed support tiers */
.ded_tier h3 {
    margin-bottom: 4px;
}
.ded_tier .ded_tier_price {
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e3e8ec;
    font: normal normal 600 28px/34px Montserrat;
    color: #8fb12a;
}
.ded_tier .ded_tier_price span {
    display: block;
    font: normal normal normal 14px/20px Montserrat;
    color: #5b6f7c;
}
.vps_tile.ded_tier_featured {
    border: 2px solid #add13a;
}
.ded_tier .ded_tier_desc {
    margin: -6px 0 14px;
    font: normal normal 600 15px/22px Montserrat;
    color: #2f4655;
}

/* Server model line under each plan name (Dell PowerEdge model as a selling point) */
.vps_cards .ded_model {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 6px;
    font: normal normal 600 15px/22px Montserrat;
    color: #314f63;
}
.vps_cards .ded_model .fa {
    color: #8fb12a;
}

/* Hero: black and green variant of the shared navy .vps_hero band (cloud-servers.css) */
.vps_hero.ded_hero {
    background-color: #0b1215;
    background-image:
        radial-gradient(ellipse at 88% 0%, rgba(143, 177, 42, 0.34) 0, rgba(143, 177, 42, 0) 46%),
        radial-gradient(ellipse at 0% 100%, rgba(173, 209, 58, 0.10) 0, rgba(173, 209, 58, 0) 42%),
        linear-gradient(160deg, #1b262c 0%, #0f171b 50%, #070b0d 100%);
    border-bottom-color: #8fb12a;
}
/* Server rack: 1U lines with green status lights, fading in from the right */
.vps_hero.ded_hero::after {
    width: 50%;
    background-image:
        radial-gradient(circle, rgba(173, 209, 58, 0.75) 0, rgba(173, 209, 58, 0.75) 1.6px, transparent 2.4px),
        repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.07) 1px, transparent 1px, transparent 26px);
    background-size: 84px 26px, 100% 26px;
    background-position: 30px 13px, 0 0;
}
.vps_hero.ded_hero .larger_paragraph {
    color: #c9d4d9;
}
.vps_hero.ded_hero .vps_hero_actions .gray_button {
    border-color: rgba(173, 209, 58, 0.8);
}
.vps_hero.ded_hero .vps_hero_actions .gray_button:hover {
    background: rgba(173, 209, 58, 0.12);
}
@media only screen and (max-width: 700px) {
    /* keep the rack lights clear of the text on phones */
    .vps_hero.ded_hero::after {
        width: 32%;
        opacity: 0.6;
    }
}

/* ---- Black and green instead of navy (this page only; the rest of the site stays navy) ---- */
.vps_cards .blue_button {
    background: linear-gradient(180deg, #22313a 0%, #0b1215 100%);
    border: 1px solid #8fb12a;
    color: #fff;
}
.vps_cards .blue_button:hover {
    background: #add13a;
    border-color: #add13a;
    color: #0b1215;
}
.vps_picker_buttons .vps_app_card[aria-pressed="true"] {
    background: #0f171b;
    border-color: #8fb12a;
}
.vps_tile_icon {
    background: #0f171b;
    color: #add13a;
}
.vps_compare thead th {
    background: #0f171b;
}
.vps_compare thead th.vps_compare_us {
    background: #8fb12a;
    color: #0b1215;
}

/* Show GPU / dedicated servers toggle: black and green */
button.vps_more_toggle {
    background: linear-gradient(180deg, #22313a 0%, #0b1215 100%);
    border-color: #8fb12a;
    box-shadow: 0 6px 18px rgba(11, 18, 21, 0.3);
}