/* Servers hub v2: navy/cobalt infrastructure theme and filter behavior. */
.location-card {
    display: flex !important;
}

body[data-filter="north-america"] .location-card:not([data-region="north-america"]),
body[data-filter="europe"] .location-card:not([data-region="europe"]),
body[data-filter="asia"] .location-card:not([data-region="asia"]),
body[data-filter="caribbean"] .location-card:not([data-region="caribbean"]) {
    display: none !important;
}

body[data-filter="all"] .location-card {
    display: flex !important;
}

body.theme-underhost-navy {
    --color-primary: #0077ff;
    --color-primary-light: #2ea8ff;
    --color-primary-dark: #0057c2;
    --color-primary-darker: #06162e;
    --color-secondary: #18d5ff;
    --color-secondary-light: #73d8ff;
    --color-secondary-dark: #0094c8;
    --color-accent: #17c7a9;
    --color-primary-rgb: 0, 119, 255;
    --color-primary-light-rgb: 46, 168, 255;
    --color-primary-dark-rgb: 0, 87, 194;
    --color-primary-darker-rgb: 6, 22, 46;
    --color-secondary-rgb: 24, 213, 255;
    --color-secondary-light-rgb: 115, 216, 255;
    --color-secondary-dark-rgb: 0, 148, 200;
    --border-primary: rgba(46, 168, 255, 0.2);
    --border-secondary: rgba(24, 213, 255, 0.14);
    --gradient-horizontal: linear-gradient(90deg, #0077ff, #2ea8ff, #18d5ff);
    --gradient-primary: linear-gradient(135deg, #06162e 0%, #0b3270 46%, #0077ff 100%);
    --gradient-card-header: linear-gradient(145deg, #06162e 0%, #082a58 50%, #006dd6 100%);
    --gradient-cta: linear-gradient(135deg, #0077ff 0%, #18d5ff 100%);
    --shadow-md: 0 14px 28px rgba(0, 86, 194, 0.18);
    --shadow-lg: 0 20px 44px rgba(0, 86, 194, 0.22);
    --shadow-xl: 0 30px 70px rgba(6, 22, 46, 0.18);
    --shadow-glow: 0 0 32px rgba(24, 213, 255, 0.34);
}

body.theme-underhost-navy .page-header {
    background:
        radial-gradient(circle at 82% 18%, rgba(24, 213, 255, 0.22), transparent 28%),
        linear-gradient(135deg, rgba(2, 10, 22, 0.97), rgba(8, 42, 88, 0.94) 46%, rgba(0, 109, 214, 0.76)),
        #020a16;
}

body.theme-underhost-navy .page-header::before {
    opacity: 0.2;
    animation: none;
    background:
        linear-gradient(rgba(115, 216, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(115, 216, 255, 0.1) 1px, transparent 1px),
        url("https://cdn.underhost.com/images/city/world.webp") center/cover;
    background-size: 72px 72px, 72px 72px, cover;
}

body.theme-underhost-navy .page-header h1 {
    text-shadow: 0 18px 48px rgba(0, 0, 0, 0.38), 0 0 34px rgba(24, 213, 255, 0.26);
}

body.theme-underhost-navy .page-header p {
    color: rgba(236, 249, 255, 0.92);
}

body.theme-underhost-navy .stats-bar {
    background: rgba(5, 19, 42, 0.58);
    border-color: rgba(115, 216, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 28px 80px rgba(0, 0, 0, 0.2);
}

body.theme-underhost-navy .stat-number {
    color: #ffffff;
    text-shadow: 0 0 24px rgba(24, 213, 255, 0.4);
}

body.theme-underhost-navy .stat-label {
    color: rgba(229, 246, 255, 0.78);
}

body.theme-underhost-navy .section-badge,
body.theme-underhost-navy .speed-badge,
body.theme-underhost-navy .why-badge,
body.theme-underhost-navy .features-badge,
body.theme-underhost-navy .faq-badge,
body.theme-underhost-navy .migration-badge {
    background: rgba(46, 168, 255, 0.12) !important;
    border: 1px solid rgba(46, 168, 255, 0.34) !important;
    color: #0077ff !important;
    box-shadow: 0 12px 32px rgba(0, 119, 255, 0.08);
}

body.theme-underhost-navy .page-header .section-badge,
body.theme-underhost-navy .bluebg3 .section-badge,
body.theme-underhost-navy .features-badge[style*="255,255,255"] {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

body.theme-underhost-navy .why-choose-us-short,
body.theme-underhost-navy .locations-section {
    background:
        linear-gradient(180deg, rgba(247, 251, 255, 0.98), rgba(238, 247, 255, 0.86)),
        #f7fbff;
}

body.theme-underhost-navy .filter-btn {
    border-color: rgba(46, 168, 255, 0.22);
    box-shadow: 0 10px 28px rgba(6, 22, 46, 0.06);
}

body.theme-underhost-navy .filter-btn:hover,
body.theme-underhost-navy .filter-btn.active {
    background: var(--gradient-cta);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(0, 119, 255, 0.2);
}

body.theme-underhost-navy .location-card {
    border-color: rgba(46, 168, 255, 0.16);
    box-shadow: 0 22px 50px rgba(6, 22, 46, 0.1);
}

body.theme-underhost-navy .location-card:hover {
    border-color: rgba(24, 213, 255, 0.48);
    box-shadow: 0 34px 70px rgba(0, 119, 255, 0.18);
}

body.theme-underhost-navy .location-card::before,
body.theme-underhost-navy .speed-gradient-bg,
body.theme-underhost-navy .card-header,
body.theme-underhost-navy .migration-free-badge,
body.theme-underhost-navy .migration-btn,
body.theme-underhost-navy .features-btn,
body.theme-underhost-navy .btn-speed {
    background: var(--gradient-cta) !important;
}

body.theme-underhost-navy .location-type {
    background: rgba(0, 119, 255, 0.92);
    box-shadow: 0 8px 18px rgba(0, 119, 255, 0.18);
}

body.theme-underhost-navy .feature-chip {
    background: rgba(46, 168, 255, 0.08);
    border-color: rgba(46, 168, 255, 0.18);
}

body.theme-underhost-navy .btn-location {
    border-color: rgba(46, 168, 255, 0.22);
    color: #0077ff !important;
}

body.theme-underhost-navy .btn-location:hover {
    background: var(--gradient-cta);
    color: #ffffff !important;
}

body.theme-underhost-navy .bluebg3 {
    background:
        radial-gradient(circle at 12% 20%, rgba(24, 213, 255, 0.18), transparent 28%),
        linear-gradient(135deg, #06162e 0%, #0b3270 52%, #006dd6 100%) !important;
}

body.theme-underhost-navy .bluebg3 .btn-speed {
    background: #ffffff !important;
    color: #0057c2 !important;
}

body.theme-underhost-navy .option-card {
    border: 1px solid rgba(46, 168, 255, 0.14);
    box-shadow: 0 18px 45px rgba(6, 22, 46, 0.08);
}

body.theme-underhost-navy .migration-section {
    background:
        linear-gradient(180deg, #ffffff, #f1f7ff);
}

body.theme-underhost-navy .migration-feature-icon {
    background: rgba(46, 168, 255, 0.1);
    color: #0077ff;
}

@media (max-width: 768px) {
    body.theme-underhost-navy .page-header::before {
        background-size: 48px 48px, 48px 48px, cover;
    }
}