/* ==========================================================================
   DataStream VPN — WHMCS client-area theme override (datastreamvpn template)
   Mirrors the main-site design system: Inter, #1679EB brand blue, dark footer.
   ========================================================================== */

html {
    font-size: 14px;
}

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Brand blue (DataStream VPN) */
    --primary: #1679EB;
    --primary-lifted: #0E5CBE;
    --primary-accented: #0A3D7D;

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

/* ==========================================================================
   Typography — Inter (matches main site)
   ========================================================================== */
body, button, input, select, textarea, optgroup {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    letter-spacing: -0.01em;
}

/* ==========================================================================
   Brand buttons + links (blue #1679EB)
   ========================================================================== */
.btn-primary {
    background-color: #1679EB !important;
    border-color: #1679EB !important;
    color: #ffffff !important;
}
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: #0E5CBE !important;
    border-color: #0E5CBE !important;
}
a { color: #1679EB; }
a:hover { color: #0E5CBE; }
.text-primary { color: #1679EB !important; }
.bg-primary { background-color: #1679EB !important; }
.badge-primary { background-color: #1679EB !important; }
.list-group-item.active { background-color: #1679EB !important; border-color: #1679EB !important; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: #1679EB !important; }
.page-item.active .page-link { background-color: #1679EB !important; border-color: #1679EB !important; }
.btn-outline-primary { color: #1679EB !important; border-color: #1679EB !important; }
.btn-outline-primary:hover { background-color: #1679EB !important; color: #fff !important; }

/* ==========================================================================
   Main-site header (sticky, Inter, #1679EB)
   ========================================================================== */
#site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid #E5E7EB;
    box-shadow: none;
}
#site-header .container, #site-footer .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}
/* Header + footer: full page width; nav centered on desktop */
#site-header .container.header-inner {
    max-width: none;
}
#site-header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 86px;
    position: relative;
}
#site-header .brand { display: flex; align-items: center; }
#site-header .brand img { height: 66px; width: auto; display: block; }
#site-header .dsvpn-nav { display: flex; align-items: center; gap: 4px; }
#site-header .dsvpn-nav > a {
    color: #000000;
    font-weight: 600;
    font-size: 1.32rem;
    padding: 9px 15px;
    border-radius: 8px;
    text-decoration: none;
    transition: color .12s ease, background .12s ease;
}
#site-header .dsvpn-nav > a:hover { color: #000000; background: #F3F4F6; text-decoration: none; }
#site-header .dsvpn-nav > a.active { color: #000000; background: #F3F4F6; font-weight: 700; }
#site-header .nav-cta { margin-left: 12px; display: inline-flex; align-items: center; }
#site-header .btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1679EB;
    color: #fff;
    font-weight: 600;
    font-size: .92rem;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s ease;
}
#site-header .btn--primary:hover { background: #0E5CBE; color: #fff; text-decoration: none; }

@media (min-width: 901px) {
    #site-header .dsvpn-nav {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: max-content;
        white-space: nowrap;
    }
}

/* mobile nav (pure CSS checkbox) */
#site-header .nav-toggle { display: none; }
#site-header .nav-toggle-label {
    display: none;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    border-radius: 8px;
    cursor: pointer;
}
#site-header .nav-toggle-label:hover { background: #EEF2F7; }
#site-header .hamburger, #site-header .hamburger::before, #site-header .hamburger::after {
    content: ''; display: block; width: 22px; height: 2px;
    background: #111827; border-radius: 2px;
    position: relative; transition: all .2s ease;
}
#site-header .hamburger::before { position: absolute; top: -7px; }
#site-header .hamburger::after { position: absolute; top: 7px; }

@media (max-width: 900px) {
    #site-header .nav-toggle-label { display: flex; }
    #site-header .dsvpn-nav {
        position: absolute;
        top: 86px; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        background: #fff;
        border-bottom: 1px solid #E5E7EB;
        padding: 12px 24px 20px;
        gap: 2px;
        display: none;
        box-shadow: 0 8px 24px rgba(16,24,40,.10);
    }
    #site-header .dsvpn-nav > a { padding: 14px 12px; font-size: 1.32rem; }
    #site-header .nav-cta { margin: 12px 0 0; }
    #site-header .btn--primary { width: 100%; }
    #site-header .nav-toggle:checked ~ .dsvpn-nav { display: flex; }
    #site-header .nav-toggle:checked ~ .nav-toggle-label .hamburger { background: transparent; }
    #site-header .nav-toggle:checked ~ .nav-toggle-label .hamburger::before { top: 0; transform: rotate(45deg); }
    #site-header .nav-toggle:checked ~ .nav-toggle-label .hamburger::after { top: 0; transform: rotate(-45deg); }
}

/* Hide WHMCS breadcrumb bar (main site has none) */
nav.master-breadcrumb { display: none !important; }

/* ==========================================================================
   Main-site footer (dark #0B1220, 4 columns)
   ========================================================================== */
#site-footer {
    background: #0B1220;
    color: #9CA3AF;
    padding: 64px 0 32px;
    border: 0;
    box-shadow: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
#site-footer .container { max-width: none; }
#site-footer .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 48px;
}
#site-footer .brand img { height: 64px; margin-bottom: 16px; display: block; }
#site-footer .brand p { font-size: .92rem; max-width: 300px; margin: 0; }
#site-footer h4 {
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
#site-footer ul { list-style: none; padding: 0; margin: 0; }
#site-footer ul li { margin-bottom: 10px; }
#site-footer ul a { color: #9CA3AF; font-size: .94rem; }
#site-footer ul a:hover { color: #fff; text-decoration: none; }
#site-footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: .88rem;
}
#site-footer .footer-bottom a { color: #9CA3AF; }
#site-footer .footer-bottom a:hover { color: #fff; text-decoration: none; }

@media (max-width: 900px) {
    #site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    #site-footer .footer-grid { grid-template-columns: 1fr; }
}