/* NetNavi v16 — ONE shared design system for netnavi.cloud and the WHMCS portal.
   Master copy: main site /assets/css/netnavi-shared.css. The portal copy must stay byte-identical. */
:root{
--nn-navy:#0d1d31;--nn-navy-deep:#091626;--nn-navy-2:#132a45;--nn-blue:#2583f5;--nn-blue-hover:#1569d6;--nn-sky:#a9d4ff;
--nn-ink:#14263d;--nn-muted:#5b6b7f;--nn-bg:#f4f7fb;--nn-paper:#fff;--nn-line:#e2e8f0;--nn-soft:#eef4fa;--nn-field-border:#c8d3e0;
--nn-on-dark:#fff;--nn-nav-link:#d9e5f3;--nn-dark-muted:#a9bed4;--nn-dark-line:#243c55;--nn-blue-soft:#e8f2fe;--nn-success:#13795b;--nn-success-soft:#e7f6ef;--nn-danger:#b42318;--nn-danger-soft:#fdecea;
--nn-radius:7px;--nn-focus:#8ec3ff;--nn-shadow:0 10px 30px #0d1d3112;--nn-menu-shadow:0 15px 30px #09152355;
--nn-font:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--nn-width:1160px}
html{box-sizing:border-box;font-size:15px!important}*,*:before,*:after{box-sizing:inherit}
html,body{margin:0;min-height:100%;max-width:100%;font-family:var(--nn-font)!important;font-size:15px!important;line-height:1.65!important;color:var(--nn-ink);background:var(--nn-paper)}
body{display:flex;flex-direction:column;min-height:100vh}
a{text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--nn-focus);outline-offset:2px}
.nn-container{width:calc(100% - 40px);max-width:var(--nn-width);margin:0 auto}
.nn-skip{position:absolute;top:-80px;left:12px;background:var(--nn-paper);color:var(--nn-ink);padding:8px 12px;border-radius:var(--nn-radius);z-index:3000}.nn-skip:focus{top:10px}

/* ===== Shared header (identical markup on both sites) ===== */
.site-header.nn-unified-header,body.netnavi-ui #header.site-header.nn-unified-header{display:block!important;position:relative!important;flex:0 0 auto!important;width:100%!important;height:120px!important;min-height:120px!important;max-height:120px!important;margin:0!important;padding:0!important;background:var(--nn-navy)!important;border:0!important;border-bottom:1px solid var(--nn-dark-line)!important;box-shadow:none!important;z-index:100!important}
.nn-utility{height:36px!important;background:var(--nn-navy-deep)!important;border-bottom:1px solid var(--nn-dark-line)!important}
.nn-utility-inner{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:26px!important;width:calc(100% - 40px)!important;max-width:var(--nn-width)!important;height:35px!important;margin:0 auto!important;padding:0!important}
.nn-utility-note{font:500 12px/1.5 var(--nn-font)!important;color:var(--nn-dark-muted)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nn-utility-links{display:flex!important;gap:24px!important}
.nn-utility-links a{font:600 12px/1.5 var(--nn-font)!important;color:var(--nn-dark-muted)!important;margin:0!important;padding:0!important}
.nn-utility-links a:hover{color:var(--nn-on-dark)!important}
.nn-unified-header>.nn-unified-inner,body.netnavi-ui #header>.nn-unified-inner{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:24px!important;width:calc(100% - 40px)!important;max-width:var(--nn-width)!important;height:83px!important;margin:0 auto!important;padding:0!important;float:none!important}
.nn-brand,.nn-unified-header .nn-brand,.nn-site-footer .nn-brand{display:inline-flex!important;align-items:center!important;gap:11px!important;flex-shrink:0!important;margin:0!important;padding:0!important;color:var(--nn-on-dark)!important;font:600 20px/1.2 var(--nn-font)!important;letter-spacing:0!important;white-space:nowrap!important}
.nn-brand strong{font-weight:800!important;color:var(--nn-on-dark)!important}
.nn-brand .nn-brand-mark{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:39px!important;height:39px!important;min-width:39px!important;padding-right:4px!important;border-radius:11px!important;background:var(--nn-blue)!important;color:var(--nn-on-dark)!important;font:800 23px/1 var(--nn-font)!important;letter-spacing:0!important}
.nn-brand-mark span{color:var(--nn-sky)!important}
.nn-unified-header .nn-unified-nav{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:16px!important;flex-direction:row!important;position:static!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.nn-unified-header .nn-unified-nav>a{display:inline-flex!important;align-items:center!important;justify-content:center!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;color:var(--nn-nav-link)!important;font:700 14px/1.65 var(--nn-font)!important;white-space:nowrap!important}
.nn-unified-header .nn-unified-nav>a:hover{color:var(--nn-on-dark)!important}
.nn-unified-header .nn-unified-nav>a.nn-unified-login{height:44px!important;min-height:44px!important;padding:0 18px!important;border:1px solid var(--nn-blue)!important;border-radius:var(--nn-radius)!important;background:var(--nn-blue)!important;color:var(--nn-on-dark)!important}
.nn-unified-header .nn-unified-nav>a.nn-unified-login:hover{background:var(--nn-blue-hover)!important;border-color:var(--nn-blue-hover)!important}
.nn-unified-header .nn-mobile-toggle span{font:inherit!important;color:inherit!important}
.nn-unified-header .nn-mobile-toggle{display:none!important;align-items:center!important;gap:8px!important;margin-left:auto!important;padding:9px 12px!important;border:1px solid #58738f!important;border-radius:var(--nn-radius)!important;color:var(--nn-on-dark)!important;background:transparent!important;font:700 13px/1.4 var(--nn-font)!important;cursor:pointer!important}

/* ===== Shared footer ===== */
.nn-site-footer,body.netnavi-ui #footer.nn-site-footer{display:block!important;flex:0 0 auto!important;width:100%!important;max-width:none!important;margin:0!important;padding:64px 0 0!important;border:0!important;background:var(--nn-navy)!important;color:var(--nn-on-dark)!important;text-align:left!important;font-family:var(--nn-font)!important}
.nn-site-footer .nn-footer-container{width:calc(100% - 40px)!important;max-width:var(--nn-width)!important;margin:0 auto!important;padding-left:0!important;padding-right:0!important}
.nn-site-footer .nn-footer-grid{display:grid!important;grid-template-columns:2fr repeat(3,minmax(0,1fr))!important;gap:50px!important;padding:0 0 56px!important;margin:0 auto!important}
.nn-site-footer .nn-footer-grid>div{min-width:0!important}
.nn-site-footer .nn-footer-grid h3{color:var(--nn-on-dark)!important;font:700 14px/1.4 var(--nn-font)!important;letter-spacing:0!important;margin:0 0 19px!important}
.nn-site-footer .nn-footer-grid p{color:var(--nn-dark-muted)!important;font:400 13px/1.65 var(--nn-font)!important;max-width:310px!important;margin:19px 0 0!important}
.nn-site-footer .nn-footer-grid>div>a:not(.nn-brand){display:block!important;color:var(--nn-dark-muted)!important;font:400 13px/1.65 var(--nn-font)!important;margin:0 0 12px!important;padding:0!important}
.nn-site-footer .nn-footer-grid>div>a:not(.nn-brand):hover{color:var(--nn-on-dark)!important}
.nn-site-footer .nn-footer-bottom{border-top:1px solid var(--nn-dark-line)!important;padding:20px 0!important;color:var(--nn-dark-muted)!important;font:400 12px/1.65 var(--nn-font)!important}

/* ===== Shared page components (used on both sites) ===== */
.nn-eyebrow{display:block;font:800 12px/1.4 var(--nn-font);letter-spacing:1.2px;text-transform:uppercase;color:var(--nn-blue);margin:0 0 14px}
.nn-page-hero{position:relative;background:linear-gradient(115deg,var(--nn-navy) 0%,var(--nn-navy-2) 100%);color:var(--nn-on-dark);padding:64px 0;border-bottom:1px solid var(--nn-dark-line)}
.nn-page-hero .nn-eyebrow{color:var(--nn-sky)}
.nn-page-hero h1{font:800 44px/1.15 var(--nn-font)!important;letter-spacing:0;color:var(--nn-on-dark)!important;margin:0 0 16px!important}
.nn-page-hero p{color:var(--nn-dark-muted);font-size:18px;max-width:650px;margin:0}
.nn-page-hero--compact{padding:38px 0 34px}
.nn-page-hero--compact h1{font-size:32px!important;margin:0!important}
.nn-page-hero .breadcrumb{display:flex;flex-wrap:wrap;gap:6px;background:transparent!important;padding:0!important;margin:12px 0 0!important;font-size:13px;list-style:none}
.nn-page-hero .breadcrumb-item,.nn-page-hero .breadcrumb-item a,.nn-page-hero .breadcrumb-item.active{color:var(--nn-dark-muted)!important}
.nn-page-hero .breadcrumb-item a:hover{color:var(--nn-on-dark)!important}
.nn-page-hero .breadcrumb-item+.breadcrumb-item:before{color:var(--nn-dark-line)!important;padding-right:6px}
.nn-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:12px 22px;border:1px solid transparent;border-radius:var(--nn-radius);font:700 14px/1.2 var(--nn-font);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.nn-btn-primary{background:var(--nn-blue);border-color:var(--nn-blue);color:var(--nn-on-dark)}.nn-btn-primary:hover{background:var(--nn-blue-hover);border-color:var(--nn-blue-hover);color:var(--nn-on-dark)}
.nn-btn-ghost{border-color:#52749b;color:var(--nn-on-dark);background:transparent}.nn-btn-ghost:hover{border-color:var(--nn-on-dark);color:var(--nn-on-dark)}
.nn-btn-light{background:var(--nn-paper);border-color:var(--nn-field-border);color:var(--nn-ink)}.nn-btn-light:hover{border-color:var(--nn-blue);color:var(--nn-blue)}
.nn-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px}
.nn-card{background:var(--nn-paper);border:1px solid var(--nn-line);border-radius:var(--nn-radius);box-shadow:var(--nn-shadow)}
.nn-alert{padding:14px 18px;border-radius:var(--nn-radius);border:1px solid;font-size:14px;margin:0 0 22px}
.nn-alert-success{background:var(--nn-success-soft);border-color:#a6dcc4;color:var(--nn-success)}
.nn-alert-error{background:var(--nn-danger-soft);border-color:#f4b9b2;color:var(--nn-danger)}

/* ===== WHMCS shell boundary: same widths, backgrounds and typography as the public site ===== */
main#content{flex:1 0 auto;min-width:0;width:100%;background:var(--nn-paper)}
body.netnavi-ui #main-body{flex:1 0 auto;width:100%!important;max-width:none!important;min-width:0;margin:0!important;padding:0!important;background:var(--nn-bg)!important;color:var(--nn-ink)}
body.netnavi-ui #main-body>.container,body.netnavi-ui .nn-account-tools-inner{width:calc(100% - 40px)!important;max-width:var(--nn-width)!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important}
body.netnavi-ui #main-body>.container{padding-top:48px!important;padding-bottom:72px!important;min-height:420px}
body.netnavi-ui #main-body>.container>.row{margin-left:-12px!important;margin-right:-12px!important}
body.netnavi-ui #main-body .primary-content{min-width:0}
body.netnavi-ui #main-body h1,body.netnavi-ui #main-body h2,body.netnavi-ui #main-body h3,body.netnavi-ui #main-body h4,body.netnavi-ui #main-body h5,body.netnavi-ui #main-body h6{font-family:var(--nn-font)!important;color:var(--nn-ink);letter-spacing:0}
body.netnavi-ui #main-body p,body.netnavi-ui #main-body label,body.netnavi-ui #main-body input,body.netnavi-ui #main-body select,body.netnavi-ui #main-body textarea,body.netnavi-ui #main-body button,body.netnavi-ui #main-body .btn{font-family:var(--nn-font)!important}
body.netnavi-ui #main-body a:not(.btn):not(.list-group-item):not(.nn-btn){color:var(--nn-blue)}
body.netnavi-ui #main-body .btn{min-height:42px;font-size:14px;font-weight:700;border-radius:var(--nn-radius)}
body.netnavi-ui #main-body .btn-primary,body.netnavi-ui #main-body .btn-success,body.netnavi-ui #main-body .btn-order-now,body.netnavi-ui #main-body .btn-checkout{background:var(--nn-blue)!important;border-color:var(--nn-blue)!important;color:var(--nn-on-dark)!important}
body.netnavi-ui #main-body .btn-primary:hover,body.netnavi-ui #main-body .btn-success:hover,body.netnavi-ui #main-body .btn-order-now:hover,body.netnavi-ui #main-body .btn-checkout:hover{background:var(--nn-blue-hover)!important;border-color:var(--nn-blue-hover)!important}
body.netnavi-ui #main-body .btn-default,body.netnavi-ui #main-body .btn-secondary,body.netnavi-ui #main-body .btn-outline-primary{background:var(--nn-paper)!important;color:var(--nn-ink)!important;border:1px solid var(--nn-field-border)!important}
body.netnavi-ui #main-body .btn-default:hover,body.netnavi-ui #main-body .btn-secondary:hover,body.netnavi-ui #main-body .btn-outline-primary:hover{border-color:var(--nn-blue)!important;color:var(--nn-blue)!important}
body.netnavi-ui .nn-account-tools{background:var(--nn-navy-2);border-bottom:1px solid var(--nn-dark-line)}
body.netnavi-ui .nn-account-tools-inner{display:flex;gap:24px;flex-wrap:wrap;align-items:center;padding:11px 0}
body.netnavi-ui .nn-account-tools a{font:600 13px/1.5 var(--nn-font);color:var(--nn-nav-link)}
body.netnavi-ui .nn-account-tools a:hover{color:var(--nn-on-dark)}

/* ===== Responsive ===== */
@media(max-width:1199px){
.site-header.nn-unified-header,body.netnavi-ui #header.site-header.nn-unified-header{height:108px!important;min-height:108px!important;max-height:108px!important}
.nn-unified-header>.nn-unified-inner,body.netnavi-ui #header>.nn-unified-inner{height:71px!important}
.nn-utility-note{display:none}.nn-utility-inner{justify-content:flex-end!important}
.nn-unified-header .nn-mobile-toggle{display:inline-flex!important}
.nn-unified-header .nn-unified-nav{display:none!important;position:absolute!important;top:107px!important;left:0!important;right:0!important;z-index:2000!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;background:var(--nn-navy)!important;padding:18px 20px 25px!important;border-top:1px solid var(--nn-dark-line)!important;box-shadow:var(--nn-menu-shadow)!important}
.nn-unified-header .nn-unified-nav.open{display:flex!important}
.nn-unified-header .nn-unified-nav>a{justify-content:flex-start!important;padding:12px 8px!important;font-size:15px!important}
.nn-unified-header .nn-unified-nav>a.nn-unified-login{justify-content:center!important;margin-top:10px!important}
.nn-site-footer .nn-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:35px!important}
.nn-page-hero h1{font-size:38px!important}
}
@media(max-width:575px){
.nn-utility-links{gap:16px!important}
.nn-site-footer .nn-footer-grid{grid-template-columns:1fr!important;gap:28px!important;padding-bottom:40px!important}
.nn-page-hero{padding:46px 0}.nn-page-hero h1{font-size:32px!important;overflow-wrap:anywhere}.nn-page-hero p{font-size:16px}
.nn-page-hero--compact{padding:30px 0 26px}.nn-page-hero--compact h1{font-size:26px!important}
body.netnavi-ui #main-body>.container{padding-top:32px!important;padding-bottom:52px!important}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* ===== v17 cookie notice (shared by both sites) ===== */
.nn-cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:4000;max-width:760px;margin:0 auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 20px;border:1px solid var(--nn-dark-line);border-radius:var(--nn-radius);background:var(--nn-navy);color:var(--nn-on-dark);box-shadow:var(--nn-menu-shadow);font:400 14px/1.55 var(--nn-font)}
.nn-cookie[hidden]{display:none}
.nn-cookie p{flex:1 1 320px;margin:0;color:var(--nn-nav-link)}.nn-cookie p strong{display:block;color:var(--nn-on-dark);font-size:15px;margin-bottom:2px}
.nn-cookie p a{color:var(--nn-sky)!important;text-decoration:underline}
.nn-cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.nn-cookie .nn-btn{min-height:40px;padding:9px 18px}
@media (max-width:520px){.nn-cookie{left:10px;right:10px;bottom:10px}.nn-cookie-actions,.nn-cookie .nn-btn{width:100%}}

/* v22: grouped service navigation shared by the PHP site and WHMCS. */
.nn-unified-header .nn-unified-nav{gap:30px!important}
.nn-nav-group{position:relative;margin:0;padding:0}
.nn-nav-group>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;color:var(--nn-nav-link);font:700 14px/1.65 var(--nn-font);padding:18px 0}
.nn-nav-group>summary::-webkit-details-marker{display:none}
.nn-nav-group>summary:focus-visible{outline:3px solid var(--nn-focus);outline-offset:5px}
.nn-nav-group[open]>summary{color:var(--nn-on-dark)}
.nn-nav-panel{position:absolute;top:100%;right:0;width:640px;max-width:calc(100vw - 40px);display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--nn-paper);border:1px solid var(--nn-line);border-top:3px solid var(--nn-blue);box-shadow:var(--nn-menu-shadow);padding:14px;z-index:2200}
.nn-nav-panel-small{width:400px;grid-template-columns:1fr}
.nn-nav-panel>a{display:block;padding:16px;color:var(--nn-ink);white-space:normal;border-radius:var(--nn-radius);font-family:var(--nn-font)}
.nn-nav-panel>a:hover{background:var(--nn-blue-soft)}
.nn-nav-panel strong{display:block;color:var(--nn-ink);font-size:15px;margin-bottom:5px}
.nn-nav-panel span{display:block;color:var(--nn-muted);font-size:13px;font-weight:400;line-height:1.6}
.nn-page-hero{background:var(--nn-navy)}
.nn-page-hero .nn-eyebrow a{color:var(--nn-sky)}
@media(min-width:900px){.nn-unified-header .nn-mobile-toggle{display:none!important}.nn-unified-header .nn-unified-nav{display:flex!important;position:static!important;flex-direction:row!important;align-items:center!important;padding:0!important;gap:30px!important;box-shadow:none!important}.nn-unified-header .nn-unified-nav>a{padding:0!important;font-size:14px!important}.nn-unified-header .nn-unified-nav>a.nn-unified-login{margin:0!important;padding:0 18px!important}}
@media(max-width:899px){.nn-unified-header .nn-unified-nav{gap:0!important;max-height:calc(100dvh - 108px);overflow:auto}.nn-nav-group>summary{padding:14px 8px;font-size:15px}.nn-nav-panel,.nn-nav-panel-small{position:static;width:100%;max-width:none;grid-template-columns:1fr;box-shadow:none;padding:6px}.nn-nav-panel>a{padding:12px}.nn-nav-panel span{font-size:12px}}

/* v25 logo: network-route N */html body .nn-brand .nn-brand-mark,html body .nn-brand-mark{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' role='img' aria-label='NetNavi Cloud'%3E%3Crect width='64' height='64' rx='14' fill='%230d1d31'/%3E%3Cpath d='M18 48V21L42 46V28' fill='none' stroke='%232583f5' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='43' cy='16' r='9' fill='%232583f5' opacity='.35'/%3E%3Ccircle cx='43' cy='16' r='5.5' fill='%23e8f3ff'/%3E%3C/svg%3E") center/cover no-repeat!important;font-size:0!important;color:transparent!important;padding:0!important;box-shadow:0 0 0 1px rgba(169,212,255,.22)!important}html body .nn-brand-mark span{display:none!important}
.nn-footer-bottom{display:flex!important;flex-direction:column!important;gap:6px!important}.nn-company-line{font-size:13px!important;opacity:.75}