:root{--ws-bg:#070b12;--ws-panel:#0d1420;--ws-panel2:#111b2a;--ws-line:#1e2b3e;--ws-text:#0d1726;--ws-muted:#68768b;--ws-white:#f7fbff;--ws-blue:#22a9ff;--ws-blue2:#6f7cff;--ws-green:#35e79a}html{scroll-behavior:smooth}body{font-family:Poppins,sans-serif;color:var(--ws-text);background:#f5f8fc}.topbar{background:#060b12!important;min-height:40px;border-bottom:1px solid #162130;position:relative;z-index:1200}.topbar .nav-link,.topbar .nav-link span{color:#aebbd0!important;font-size:11px!important;letter-spacing:.12em;text-transform:uppercase}.topbar .fas{color:var(--ws-blue)!important}#navbar_top{background:rgba(255,255,255,.97)!important;border-bottom:1px solid #e5ebf2;box-shadow:0 10px 30px rgba(7,18,35,.06);min-height:74px;position:relative;z-index:1190}#navbar_top .logo-img{max-height:54px!important;width:auto}#navbar_top .nav-link{color:#111c2d!important;font-weight:600;font-size:13px;padding:25px 13px!important}#navbar_top .nav-link:hover{color:#148ee8!important}.navbar .dropdown-menu{z-index:3000!important;border:1px solid #dce5ef!important;border-radius:12px!important;box-shadow:0 18px 50px rgba(9,22,40,.16)!important;padding:8px!important;background:#fff!important}.navbar .dropdown-item{border-radius:8px;padding:10px 12px;color:#172235!important}.navbar .dropdown-item:hover{background:#edf7ff;color:#078be6!important}.client-btn{background:linear-gradient(135deg,var(--ws-blue),var(--ws-blue2))!important;border:0!important;border-radius:10px!important;padding:12px 18px!important;box-shadow:0 10px 25px rgba(34,169,255,.22)}.ws-hero{height:650px;position:relative;overflow:hidden;background:var(--ws-bg);color:#fff}.ws-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}.ws-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,9,16,.97) 0%,rgba(4,10,18,.78) 52%,rgba(4,10,18,.42) 100%),linear-gradient(0deg,rgba(4,9,16,.55),transparent 50%)}.ws-hero-inner{position:relative;z-index:2;padding-top:105px}.ws-eyebrow,.ws-section-head>span,.ws-final-box>div>span{font-size:12px;font-weight:700;letter-spacing:.16em;color:#6fd0ff}.ws-eyebrow{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(74,193,255,.35);background:rgba(14,118,175,.12);border-radius:30px;padding:9px 14px}.ws-eyebrow span{width:7px;height:7px;background:var(--ws-green);border-radius:50%;box-shadow:0 0 15px var(--ws-green)}.ws-hero h1{font-size:66px;line-height:1.02;letter-spacing:-.045em;font-weight:700;margin:24px 0 22px;max-width:800px}.ws-hero h1 em{font-style:normal;color:#5bc5ff}.ws-lead{font-size:18px;line-height:1.8;color:#b7c3d4;max-width:720px}.ws-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.ws-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:10px;font-weight:600;text-decoration:none!important}.ws-btn-primary{background:linear-gradient(135deg,var(--ws-blue),var(--ws-blue2));color:#fff!important;box-shadow:0 14px 32px rgba(34,169,255,.2)}.ws-btn-ghost{border:1px solid #405068;color:#fff!important;background:rgba(255,255,255,.04)}.ws-btn-dark{background:#0c1420;color:#fff!important}.ws-metrics{display:flex;margin-top:55px;border-top:1px solid rgba(255,255,255,.12);max-width:760px}.ws-metrics>div{padding:20px 34px 0 0;margin-right:34px}.ws-metrics b{display:block;font-size:19px;color:#fff}.ws-metrics span{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#8290a4}.ws-switcher,.ws-products{padding:95px 0}.ws-section-head{max-width:690px;margin-bottom:38px}.ws-section-head.center{text-align:center;margin:0 auto 45px}.ws-section-head h2{font-size:40px;letter-spacing:-.03em;margin:8px 0 12px;font-weight:600}.ws-section-head h2 strong{color:#139de9}.ws-section-head p{color:var(--ws-muted);font-size:16px;line-height:1.7}.ws-world{display:block;position:relative;overflow:hidden;min-height:360px;background:linear-gradient(145deg,#fff,#f6f9fd);border:1px solid #dfe7f0;border-radius:22px;padding:36px;color:#142033!important;text-decoration:none!important;box-shadow:0 20px 60px rgba(16,37,63,.07);transition:.25s}.ws-world:hover{transform:translateY(-6px);box-shadow:0 28px 70px rgba(16,37,63,.13);border-color:#a7dfff}.ws-world-game{background:linear-gradient(145deg,#0b1420,#111e2f);border-color:#21344c;color:#fff!important}.ws-world-number{position:absolute;right:25px;top:20px;font-size:54px;font-weight:700;opacity:.06}.ws-world-icon{width:58px;height:58px;border-radius:16px;background:#e8f6ff;color:#159de9;display:grid;place-items:center;font-size:23px;margin-bottom:45px}.ws-world-game .ws-world-icon{background:#142a3f}.ws-world h3{font-size:31px;font-weight:700}.ws-world p{max-width:440px;line-height:1.7;color:#6b788b}.ws-world-game p{color:#9eacc0}.ws-tags{display:flex;gap:8px;flex-wrap:wrap;margin:25px 0}.ws-tags span{font-size:10px;font-weight:700;letter-spacing:.08em;border:1px solid #dce5ef;padding:6px 9px;border-radius:6px}.ws-world-game .ws-tags span{border-color:#2a4058}.ws-link{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#159de9}.ws-domain{position:relative;z-index:3}.ws-products{background:#fff}.ws-plan{height:100%;border:1px solid #dfe7f0;border-radius:18px;padding:26px;background:#fff;transition:.25s;box-shadow:0 12px 35px rgba(16,37,63,.05)}.ws-plan:hover{transform:translateY(-5px);border-color:#91d6ff;box-shadow:0 22px 50px rgba(16,37,63,.1)}.ws-plan-top span{font-size:10px;letter-spacing:.12em;color:#169de9;font-weight:700}.ws-plan h3{font-size:22px;margin:7px 0 18px}.ws-price{border-top:1px solid #edf1f5;border-bottom:1px solid #edf1f5;padding:18px 0;margin-bottom:18px}.ws-price b{font-size:34px;letter-spacing:-.04em}.ws-price span{display:block;color:#7a8798;font-size:11px}.ws-plan ul{list-style:none!important;padding:0!important;margin:0 0 25px!important}.ws-plan li{padding:7px 0;color:#59677a;font-size:13px}.ws-plan li i{color:#1bb783;margin-right:9px}.ws-plan-btn{display:flex;justify-content:space-between;align-items:center;border-radius:9px;background:#eff8ff;color:#087fc5!important;padding:12px 14px;font-weight:600;text-decoration:none!important}.ws-protection{padding:105px 0;background:radial-gradient(circle at 15% 50%,#10283b 0,#080e17 35%,#050910 70%);color:#fff;overflow:hidden}.ws-section-head.light p{color:#9fadc0}.ws-shield{position:relative;text-align:center}.ws-shield img{max-width:260px;position:relative;z-index:2;filter:drop-shadow(0 20px 50px rgba(28,161,255,.25))}.pulse{position:absolute;left:50%;top:50%;border:1px solid rgba(44,176,255,.2);border-radius:50%;transform:translate(-50%,-50%)}.p1{width:350px;height:350px}.p2{width:470px;height:470px}.ws-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.ws-feature-grid>div{border:1px solid #1d2b3d;background:rgba(255,255,255,.025);border-radius:14px;padding:20px}.ws-feature-grid i{color:#3bbcff;margin-right:8px}.ws-feature-grid b{display:block;margin:8px 0;color:#fff}.ws-feature-grid span{font-size:12px;line-height:1.6;color:#8d9caf}.ws-final{padding:70px 0;background:#f5f8fc}.ws-final-box{border-radius:22px;padding:42px 48px;background:linear-gradient(135deg,#e9f7ff,#eef0ff);border:1px solid #d5e8f6;display:flex;justify-content:space-between;align-items:center;gap:30px}.ws-final h2{font-size:31px;margin:6px 0}.ws-final p{margin:0;color:#6d798a}#Footer{background:#070b12!important;color:#aab7c9!important;padding:65px 0 35px!important;border-top:1px solid #172232}#Footer h4{color:#fff!important;font-size:13px!important;text-transform:uppercase;letter-spacing:.1em;margin-bottom:18px!important}#Footer ul{padding:0!important;list-style:none!important}#Footer li{margin:8px 0!important}#Footer a{color:#8f9db1!important;font-size:12px!important}#Footer a:hover{color:#45bfff!important}#Footer .logo-img{filter:none;max-height:58px}#Cta{margin:0!important;padding:0!important;background:transparent!important}#Cta .position-absolute{position:static!important;transform:none!important}.dropdown-menu{z-index:9999!important}video{z-index:auto}@media(max-width:991px){.ws-hero{height:auto;min-height:620px}.ws-hero-inner{padding:75px 20px}.ws-hero h1{font-size:48px}.ws-metrics{flex-wrap:wrap}.ws-metrics>div{width:50%;margin:0;padding-right:15px}.ws-feature-grid{grid-template-columns:1fr}.ws-shield{margin-bottom:55px}.ws-final-box{display:block}.ws-final-box .ws-actions{margin-top:25px}#navbar_top .nav-link{padding:12px!important}}@media(max-width:575px){.ws-hero h1{font-size:39px}.ws-lead{font-size:15px}.ws-section-head h2{font-size:32px}.ws-switcher,.ws-products,.ws-protection{padding:65px 0}.ws-final-box{padding:28px 24px}.ws-world{min-height:auto}.ws-metrics{margin-top:35px}.ws-metrics>div{padding-top:14px}}

/* =========================================================
   WebShield Nova - Wave Footer refinement
   Keeps the existing footer content; only improves transition
   and logo visibility.
   ========================================================= */
#Footer{
    position:relative!important;
    margin-top:88px!important;
    padding-top:82px!important;
    overflow:visible!important;
    background:#070b12!important;
    border-top:0!important;
}

/* smooth double wave between the light site area and dark footer */
#Footer::before{
    content:"";
    position:absolute;
    z-index:0;
    left:0;
    right:0;
    top:-88px;
    height:90px;
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:100% 100%;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath fill='%23070b12' d='M0,73 C185,17 337,16 516,56 C718,101 841,109 1030,62 C1192,22 1322,31 1440,55 L1440,110 L0,110 Z'/%3E%3C/svg%3E");
    pointer-events:none;
}

#Footer::after{
    content:"";
    position:absolute;
    z-index:0;
    left:0;
    right:0;
    top:-63px;
    height:64px;
    opacity:.7;
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:100% 100%;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%230d1725' d='M0,50 C210,80 370,4 585,39 C790,72 930,73 1115,32 C1242,4 1352,19 1440,38 L1440,80 L0,80 Z'/%3E%3C/svg%3E");
    pointer-events:none;
}

#Footer > .container{
    position:relative;
    z-index:2;
}

/* logo contains dark lettering, so give it its own clean surface */
#Footer .col-lg-4.text-center .logo-img{
    max-height:66px!important;
    width:auto!important;
    padding:10px 16px!important;
    box-sizing:content-box!important;
    background:rgba(255,255,255,.96)!important;
    border:1px solid rgba(255,255,255,.9)!important;
    border-radius:14px!important;
    box-shadow:0 14px 40px rgba(0,0,0,.24), 0 0 0 1px rgba(41,169,255,.08)!important;
}

#Footer .copyright{
    color:#77869a!important;
    font-size:11px!important;
    letter-spacing:.02em;
}

#Footer h4{
    position:relative;
    padding-bottom:10px;
}
#Footer h4::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:28px;
    height:2px;
    border-radius:2px;
    background:linear-gradient(90deg,#22a9ff,#6f7cff);
}

#Footer a{
    transition:color .2s ease,transform .2s ease!important;
    display:inline-block;
}
#Footer a:hover{
    transform:translateX(3px);
}

@media(max-width:991px){
    #Footer{margin-top:62px!important;padding-top:62px!important}
    #Footer::before{top:-62px;height:64px}
    #Footer::after{top:-43px;height:44px}
    #Footer .col-lg-4.text-center{margin-top:35px}
}

/* =========================================================
   WebShield Nova - Solid wave footer + logo glow
   ========================================================= */
#Footer{
    background:#060b13!important;
    background-image:linear-gradient(180deg,#08111f 0%,#060b13 38%,#050910 100%)!important;
    isolation:isolate;
}

/* Both waves are fully opaque (no transparency). */
#Footer::before{
    opacity:1!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath fill='%23060b13' d='M0,73 C185,17 337,16 516,56 C718,101 841,109 1030,62 C1192,22 1322,31 1440,55 L1440,110 L0,110 Z'/%3E%3C/svg%3E")!important;
}
#Footer::after{
    opacity:1!important;
    top:-68px!important;
    height:70px!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%230d1b30' d='M0,51 C198,77 364,7 575,39 C780,70 932,75 1117,31 C1246,1 1355,18 1440,38 L1440,80 L0,80 Z'/%3E%3C/svg%3E")!important;
    filter:drop-shadow(0 -2px 5px rgba(34,169,255,.22));
}

/* Subtle electric-blue rim along the transition. */
#Footer .container::before{
    content:"";
    position:absolute;
    left:3%;
    right:3%;
    top:-73px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(34,169,255,.8),rgba(111,124,255,.75),transparent);
    box-shadow:0 0 14px rgba(34,169,255,.45);
    pointer-events:none;
}

/* Dark solid logo capsule: no white block, readable logo + blue glow. */
#Footer .col-lg-4.text-center .logo-img{
    max-height:70px!important;
    width:auto!important;
    padding:14px 22px!important;
    box-sizing:content-box!important;
    background:#0a1220!important;
    border:1px solid rgba(34,169,255,.72)!important;
    border-radius:15px!important;
    box-shadow:0 0 0 1px rgba(34,169,255,.08),0 0 22px rgba(34,169,255,.34),0 18px 42px rgba(0,0,0,.38)!important;
    /* Original logo has dark lettering: lift it toward white while preserving blue. */
    filter:brightness(0) invert(1) drop-shadow(0 0 10px rgba(34,169,255,.25))!important;
    transition:transform .25s ease,box-shadow .25s ease!important;
}
#Footer .col-lg-4.text-center .logo-img:hover{
    transform:translateY(-2px);
    box-shadow:0 0 0 1px rgba(34,169,255,.18),0 0 30px rgba(34,169,255,.5),0 20px 46px rgba(0,0,0,.42)!important;
}

#Footer .copyright{
    margin-top:18px!important;
    color:#8fa1b9!important;
}

@media(max-width:991px){
    #Footer .container::before{top:-53px}
    #Footer::after{top:-47px!important;height:49px!important}
}

/* =========================================================
   WebShield Nova - Footer v3 / reference-match
   Solid layered wave + blue light rim + integrated logo
   ========================================================= */
#Footer{
    position:relative!important;
    margin-top:105px!important;
    padding:88px 0 54px!important;
    overflow:visible!important;
    border:0!important;
    isolation:isolate!important;
    background:
      radial-gradient(ellipse at 72% 18%,rgba(16,65,119,.18) 0%,rgba(8,20,38,.10) 27%,transparent 55%),
      linear-gradient(180deg,#07111f 0%,#050b14 52%,#040911 100%)!important;
}

/* One self-contained opaque wave. This prevents the light page from
   showing through between layers. */
#Footer::before{
    content:""!important;
    position:absolute!important;
    z-index:0!important;
    left:0!important;
    right:0!important;
    top:-105px!important;
    width:100%!important;
    height:108px!important;
    opacity:1!important;
    pointer-events:none!important;
    background-repeat:no-repeat!important;
    background-position:center bottom!important;
    background-size:100% 100%!important;
    filter:drop-shadow(0 -2px 8px rgba(22,157,255,.28))!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath fill='%230b3474' d='M0 63 C170 12 326 11 500 46 C704 88 823 103 1018 54 C1181 13 1319 16 1440 46 L1440 110 L0 110 Z'/%3E%3Cpath fill='%23081427' d='M0 76 C175 35 332 28 506 58 C706 93 835 103 1022 66 C1189 33 1325 35 1440 59 L1440 110 L0 110 Z'/%3E%3Cpath d='M0 63 C170 12 326 11 500 46 C704 88 823 103 1018 54 C1181 13 1319 16 1440 46' fill='none' stroke='%231da9ff' stroke-width='3'/%3E%3Cpath d='M0 65 C170 14 326 13 500 48 C704 90 823 105 1018 56 C1181 15 1319 18 1440 48' fill='none' stroke='%236b79ff' stroke-opacity='.62' stroke-width='2'/%3E%3C/svg%3E")!important;
}

/* Disable the older second pseudo-wave; everything is now in ::before. */
#Footer::after{content:none!important;display:none!important}
#Footer > .container{position:relative!important;z-index:2!important}
#Footer .container::before{content:none!important;display:none!important}

/* Airier layout like the reference. */
#Footer .row{align-items:flex-start!important}
#Footer h4{color:#f8fbff!important;font-weight:700!important;letter-spacing:.08em!important;margin-bottom:22px!important}
#Footer h4::after{width:30px!important;height:3px!important;background:#20b6ff!important;box-shadow:0 0 9px rgba(32,182,255,.5)!important}
#Footer li{margin:10px 0!important}
#Footer a{color:#a9c6ea!important}
#Footer a:hover{color:#38c3ff!important;text-shadow:0 0 10px rgba(34,169,255,.28)!important}

/* The source logo has a white background baked into the image.
   Invert + hue-rotate turns that white canvas dark, black lettering white,
   while keeping the blue family blue. */
#Footer .col-lg-4.text-center{
    padding-top:2px!important;
}
#Footer .col-lg-4.text-center .logo-img{
    display:block!important;
    margin:0 auto!important;
    max-height:74px!important;
    width:auto!important;
    padding:13px 20px!important;
    box-sizing:content-box!important;
    background:#07101d!important;
    border:1px solid #168fff!important;
    border-radius:14px!important;
    filter:invert(1) hue-rotate(180deg) saturate(1.18) contrast(1.06)!important;
    box-shadow:
      0 0 0 1px rgba(24,153,255,.12),
      0 0 18px rgba(23,153,255,.40),
      0 0 42px rgba(17,112,255,.18),
      0 18px 42px rgba(0,0,0,.32)!important;
    transition:transform .22s ease,box-shadow .22s ease!important;
}
#Footer .col-lg-4.text-center .logo-img:hover{
    transform:translateY(-2px)!important;
    box-shadow:
      0 0 0 1px rgba(31,178,255,.22),
      0 0 24px rgba(30,177,255,.55),
      0 0 54px rgba(26,115,255,.25),
      0 20px 46px rgba(0,0,0,.36)!important;
}
#Footer .copyright{
    margin-top:22px!important;
    color:#8ea9c9!important;
    font-size:11px!important;
}

@media(max-width:991px){
    #Footer{margin-top:78px!important;padding-top:70px!important}
    #Footer::before{top:-78px!important;height:81px!important}
    #Footer .col-lg-4.text-center{margin-top:36px!important}
}


/* =========================================================
   WebShield Nova - Footer v4 FIX
   - solid wave (no seam / page bleed-through)
   - readable original logo on light capsule + blue glow
   ========================================================= */
#Footer{
    margin-top:104px!important;
    padding-top:82px!important;
    background:#050b14!important;
    background-image:linear-gradient(180deg,#071321 0%,#050b14 42%,#040910 100%)!important;
}

/* Oversize the opaque wave by a few pixels so no 1px horizontal seam
   from the section above can appear due to browser sub-pixel rendering. */
#Footer::before{
    top:-108px!important;
    height:112px!important;
    bottom:auto!important;
    z-index:1!important;
    background-size:100% 112px!important;
    background-position:center bottom!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 112' preserveAspectRatio='none'%3E%3Cpath fill='%230a3471' d='M0 62 C174 12 329 11 505 46 C706 87 831 102 1022 54 C1184 14 1321 17 1440 45 L1440 112 L0 112 Z'/%3E%3Cpath fill='%23071322' d='M0 76 C177 35 334 28 509 58 C709 93 838 103 1025 66 C1191 33 1327 35 1440 58 L1440 112 L0 112 Z'/%3E%3Cpath fill='%23050b14' d='M0 91 C192 60 347 50 520 72 C716 98 844 105 1031 81 C1196 60 1329 57 1440 72 L1440 112 L0 112 Z'/%3E%3Cpath d='M0 62 C174 12 329 11 505 46 C706 87 831 102 1022 54 C1184 14 1321 17 1440 45' fill='none' stroke='%2319b8ff' stroke-width='3'/%3E%3Cpath d='M0 65 C174 15 329 14 505 49 C706 90 831 105 1022 57 C1184 17 1321 20 1440 48' fill='none' stroke='%235c78ff' stroke-opacity='.65' stroke-width='2'/%3E%3C/svg%3E")!important;
    filter:drop-shadow(0 -2px 8px rgba(24,174,255,.28))!important;
}
#Footer::after{display:none!important;content:none!important}
#Footer > .container{position:relative!important;z-index:3!important}

/* Keep the original WebShield artwork untouched. The image itself has
   dark lettering, so it needs a light solid capsule for proper contrast. */
#Footer .col-lg-4.text-center .logo-img{
    display:block!important;
    width:auto!important;
    max-width:330px!important;
    max-height:78px!important;
    height:auto!important;
    margin:0 auto!important;
    padding:14px 22px!important;
    box-sizing:content-box!important;
    background:#f8fbff!important;
    border:1px solid rgba(45,174,255,.95)!important;
    border-radius:14px!important;
    filter:none!important;
    opacity:1!important;
    box-shadow:
      0 0 0 1px rgba(34,169,255,.12),
      0 0 18px rgba(28,174,255,.50),
      0 0 42px rgba(34,113,255,.26),
      0 18px 42px rgba(0,0,0,.38)!important;
}
#Footer .col-lg-4.text-center .logo-img:hover{
    transform:translateY(-2px)!important;
    box-shadow:
      0 0 0 1px rgba(50,191,255,.24),
      0 0 25px rgba(35,187,255,.65),
      0 0 56px rgba(34,113,255,.32),
      0 20px 46px rgba(0,0,0,.40)!important;
}

@media(max-width:991px){
    #Footer{margin-top:80px!important;padding-top:68px!important}
    #Footer::before{top:-84px!important;height:88px!important;background-size:100% 88px!important}
    #Footer .col-lg-4.text-center .logo-img{max-width:min(330px,80vw)!important}
}

/* =========================================================
   WebShield Nova - Header polish v1
   Keep main navigation WHITE, improve contrast + dropdowns
   ========================================================= */
#navbar_top{
    background:#ffffff!important;
    border-bottom:1px solid #dce6f1!important;
    box-shadow:0 8px 28px rgba(8,24,43,.10)!important;
    min-height:82px!important;
    position:relative!important;
    z-index:5000!important;
}
#navbar_top .container,
#navbar_top .navbar,
#navbar_top .navbar-collapse{
    overflow:visible!important;
}
#navbar_top .logo-img{
    max-height:58px!important;
    width:auto!important;
    filter:none!important;
}
#navbar_top .navbar-nav{
    align-items:center!important;
}
#navbar_top .nav-item{
    position:relative!important;
}
#navbar_top .nav-link{
    position:relative!important;
    color:#111827!important;
    font-weight:650!important;
    font-size:13px!important;
    line-height:1.2!important;
    padding:29px 12px!important;
    opacity:1!important;
    text-shadow:none!important;
    transition:color .18s ease!important;
}
#navbar_top .nav-link:hover,
#navbar_top .nav-item.show > .nav-link,
#navbar_top .nav-item.active > .nav-link{
    color:#128fdc!important;
}
#navbar_top .nav-link::after{
    transition:transform .18s ease,border-color .18s ease!important;
}
#navbar_top .nav-item:not(.dropdown) > .nav-link::before{
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    bottom:18px;
    height:2px;
    border-radius:10px;
    background:linear-gradient(90deg,#22a9ff,#6f7cff);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .2s ease;
}
#navbar_top .nav-item:not(.dropdown) > .nav-link:hover::before,
#navbar_top .nav-item.active:not(.dropdown) > .nav-link::before{
    transform:scaleX(1);
}

/* Dropdown must stay above hero and always have readable dark text. */
#navbar_top .dropdown-menu{
    z-index:10000!important;
    min-width:210px!important;
    margin-top:-2px!important;
    padding:9px!important;
    overflow:hidden!important;
    background:#ffffff!important;
    border:1px solid #dce6f1!important;
    border-radius:13px!important;
    box-shadow:0 20px 55px rgba(5,19,38,.20)!important;
}
#navbar_top .dropdown-menu::before{
    content:"";
    position:absolute;
    top:0;
    left:14px;
    right:14px;
    height:2px;
    background:linear-gradient(90deg,#22a9ff,#6f7cff);
}
#navbar_top .dropdown-item,
#navbar_top .dropdown-menu a,
#navbar_top .dropdown-menu .nav-link{
    display:block!important;
    color:#172235!important;
    background:transparent!important;
    opacity:1!important;
    font-size:13px!important;
    font-weight:600!important;
    line-height:1.35!important;
    text-shadow:none!important;
    border-radius:8px!important;
    padding:11px 13px!important;
    margin:1px 0!important;
}
#navbar_top .dropdown-item:hover,
#navbar_top .dropdown-menu a:hover,
#navbar_top .dropdown-item:focus,
#navbar_top .dropdown-menu a:focus{
    color:#087fc5!important;
    background:#edf8ff!important;
}
#navbar_top .dropdown-item.active,
#navbar_top .dropdown-item:active{
    color:#087fc5!important;
    background:#e7f5ff!important;
}

/* Top utility bar: same dark family as the site, less flat. */
.topbar{
    min-height:42px!important;
    background:linear-gradient(90deg,#050a11 0%,#08111d 48%,#050a11 100%)!important;
    border-top:1px solid rgba(111,124,255,.18)!important;
    border-bottom:1px solid #172436!important;
    box-shadow:inset 0 -1px 0 rgba(34,169,255,.06)!important;
    position:relative!important;
    z-index:5100!important;
}
.topbar .nav-link,
.topbar .nav-link span,
.topbar a{
    color:#b9c7db!important;
    opacity:1!important;
}
.topbar .nav-link:hover,
.topbar a:hover{
    color:#62c9ff!important;
}
.topbar .fas,
.topbar .far,
.topbar .fa,
.topbar i{
    color:#2eb5ff!important;
}

/* Ensure hero can never cover an open menu. */
.ws-hero,
.ws-hero-video,
.ws-hero-shade,
.ws-hero-inner{
    z-index:auto;
}
.ws-hero-inner{z-index:2!important}

@media(max-width:991px){
    #navbar_top{min-height:70px!important}
    #navbar_top .navbar-collapse{
        background:#fff!important;
        border-top:1px solid #e4ebf3!important;
        box-shadow:0 18px 35px rgba(7,22,41,.12)!important;
        padding:8px 12px 14px!important;
    }
    #navbar_top .nav-link{padding:12px 10px!important}
    #navbar_top .nav-item:not(.dropdown) > .nav-link::before{bottom:5px;left:10px;right:auto;width:34px}
    #navbar_top .dropdown-menu{margin:2px 0 6px!important;box-shadow:none!important;border-radius:10px!important}
}


/* =========================================================
   WebShield Nova - Header compact v2
   White navbar, tighter navigation, compact dropdowns
   ========================================================= */
#navbar_top{
    min-height:72px!important;
    background:#fff!important;
    border-bottom:1px solid #e6edf5!important;
    box-shadow:0 6px 22px rgba(7,22,41,.075)!important;
}
#navbar_top .logo-img{
    max-height:53px!important;
}
#navbar_top .navbar-nav{
    gap:3px!important;
}
#navbar_top .nav-link{
    padding:24px 10px!important;
    font-size:12.5px!important;
    font-weight:600!important;
    letter-spacing:-.01em!important;
    border-radius:8px!important;
}
#navbar_top .nav-link:hover,
#navbar_top .nav-item.show > .nav-link{
    color:#0b86d1!important;
    background:#f3f9fe!important;
}
/* Remove the long underline treatment; keep only a small active accent. */
#navbar_top .nav-item:not(.dropdown) > .nav-link::before{
    left:50%!important;
    right:auto!important;
    bottom:13px!important;
    width:20px!important;
    height:2px!important;
    transform:translateX(-50%) scaleX(0)!important;
}
#navbar_top .nav-item:not(.dropdown) > .nav-link:hover::before,
#navbar_top .nav-item.active:not(.dropdown) > .nav-link::before{
    transform:translateX(-50%) scaleX(1)!important;
}
#navbar_top .dropdown-menu{
    min-width:178px!important;
    width:auto!important;
    margin-top:-8px!important;
    padding:6px!important;
    border:1px solid #e1e9f2!important;
    border-radius:11px!important;
    box-shadow:0 14px 34px rgba(8,24,43,.14)!important;
}
#navbar_top .dropdown-menu::before{
    left:10px!important;
    right:10px!important;
    height:2px!important;
}
#navbar_top .dropdown-item,
#navbar_top .dropdown-menu a,
#navbar_top .dropdown-menu .nav-link{
    padding:9px 11px!important;
    min-height:0!important;
    font-size:12.5px!important;
    font-weight:600!important;
    border-radius:7px!important;
    white-space:nowrap!important;
}
#navbar_top .dropdown-item + .dropdown-item,
#navbar_top .dropdown-menu li + li a{
    margin-top:2px!important;
}
#navbar_top .client-btn{
    padding:10px 16px!important;
    border-radius:9px!important;
    font-size:12px!important;
    box-shadow:0 8px 20px rgba(34,169,255,.18)!important;
}
.topbar{
    min-height:38px!important;
}
.topbar .nav-link,
.topbar .nav-link span,
.topbar a{
    font-size:10.5px!important;
    letter-spacing:.11em!important;
}
@media(max-width:1199px) and (min-width:992px){
    #navbar_top .nav-link{padding-left:7px!important;padding-right:7px!important;font-size:11.5px!important}
    #navbar_top .logo-img{max-height:48px!important}
    #navbar_top .client-btn{padding:9px 12px!important}
}

/* =========================================================
   WebShield Nova - Header layout v3
   Rebalanced white navigation + compact floating dropdown
   ========================================================= */
#navbar_top{
    min-height:76px!important;
    background:#fff!important;
    border-bottom:1px solid #e7edf5!important;
    box-shadow:0 8px 30px rgba(6,22,42,.08)!important;
}
#navbar_top .container{
    max-width:1320px!important;
}
#navbar_top .navbar{
    min-height:76px!important;
    padding-top:0!important;
    padding-bottom:0!important;
}
#navbar_top .logo-img{
    max-height:52px!important;
    margin-right:34px!important;
}
#navbar_top .navbar-collapse{
    align-items:center!important;
}
#navbar_top .navbar-nav{
    gap:6px!important;
    align-items:center!important;
}
#navbar_top .nav-item{
    display:flex!important;
    align-items:center!important;
}
#navbar_top .nav-link{
    padding:11px 13px!important;
    margin:0!important;
    color:#172235!important;
    font-size:12.5px!important;
    font-weight:600!important;
    line-height:1!important;
    border-radius:9px!important;
    background:transparent!important;
    transition:background .18s ease,color .18s ease,box-shadow .18s ease!important;
}
#navbar_top .nav-link:hover,
#navbar_top .nav-item.show > .nav-link,
#navbar_top .nav-item.active > .nav-link{
    color:#087fc5!important;
    background:#eef8ff!important;
    box-shadow:inset 0 0 0 1px #d8efff!important;
}
/* remove all old underline treatments */
#navbar_top .nav-link::before,
#navbar_top .dropdown-menu::before{
    content:none!important;
    display:none!important;
}

/* Dropdown becomes a small floating menu rather than a large white panel. */
#navbar_top .dropdown-menu{
    top:calc(100% + 8px)!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    min-width:190px!important;
    width:190px!important;
    margin:0!important;
    padding:7px!important;
    background:#fff!important;
    border:1px solid #dfe8f2!important;
    border-radius:12px!important;
    box-shadow:0 16px 40px rgba(7,25,48,.16)!important;
    overflow:visible!important;
}
#navbar_top .dropdown-menu::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    top:-6px!important;
    left:50%!important;
    width:12px!important;
    height:12px!important;
    background:#fff!important;
    border-left:1px solid #dfe8f2!important;
    border-top:1px solid #dfe8f2!important;
    transform:translateX(-50%) rotate(45deg)!important;
    z-index:-1!important;
}
#navbar_top .dropdown-menu li{
    margin:0!important;
}
#navbar_top .dropdown-item,
#navbar_top .dropdown-menu a,
#navbar_top .dropdown-menu .nav-link{
    display:flex!important;
    align-items:center!important;
    min-height:38px!important;
    padding:9px 11px!important;
    margin:0!important;
    border-radius:8px!important;
    color:#1c293b!important;
    background:transparent!important;
    font-size:12.5px!important;
    font-weight:600!important;
    box-shadow:none!important;
}
#navbar_top .dropdown-item:hover,
#navbar_top .dropdown-menu a:hover,
#navbar_top .dropdown-item:focus,
#navbar_top .dropdown-menu a:focus{
    color:#087fc5!important;
    background:#eef8ff!important;
    transform:none!important;
}
#navbar_top .client-btn{
    margin-left:22px!important;
    padding:11px 17px!important;
    border-radius:10px!important;
    font-size:12px!important;
    box-shadow:0 9px 22px rgba(34,169,255,.20)!important;
}

/* Utility bar stays dark, but aligns with the new header. */
.topbar{
    min-height:38px!important;
    background:#07101c!important;
    border-top:0!important;
    border-bottom:1px solid #17283b!important;
    box-shadow:none!important;
}

@media(max-width:1199px) and (min-width:992px){
    #navbar_top .container{max-width:1140px!important}
    #navbar_top .logo-img{max-height:47px!important;margin-right:18px!important}
    #navbar_top .navbar-nav{gap:2px!important}
    #navbar_top .nav-link{padding:10px 8px!important;font-size:11.5px!important}
    #navbar_top .client-btn{margin-left:10px!important;padding:10px 12px!important}
}
@media(max-width:991px){
    #navbar_top .navbar{min-height:68px!important}
    #navbar_top .logo-img{max-height:46px!important;margin-right:0!important}
    #navbar_top .navbar-collapse{padding:10px 0 14px!important}
    #navbar_top .navbar-nav{align-items:stretch!important;gap:3px!important}
    #navbar_top .nav-item{display:block!important}
    #navbar_top .nav-link{padding:11px 12px!important}
    #navbar_top .dropdown-menu{
        position:static!important;
        transform:none!important;
        width:100%!important;
        min-width:0!important;
        margin:4px 0 7px!important;
        box-shadow:none!important;
        background:#f7fbff!important;
    }
    #navbar_top .dropdown-menu::after{display:none!important}
    #navbar_top .client-btn{margin:8px 0 0!important;display:inline-flex!important}
}

/* =========================================================
   WEBSHIELD NAV - CLEAN HOVER FIX
   ========================================================= */

/* Link principal */
.navbar-nav > li > a {
    position: relative !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transform: none !important;

    transition:
        color .2s ease,
        text-shadow .2s ease !important;
}

/* Hover */
.navbar-nav > li:hover > a,
.navbar-nav > li > a:hover,
.navbar-nav > li.open > a,
.navbar-nav > li.show > a {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;

    color: #168cff !important;

    text-shadow:
        0 0 8px rgba(22, 140, 255, .25) !important;
}


/* =========================================================
   LINIA ANIMATA
   ========================================================= */

.navbar-nav > li > a::after {
    content: "" !important;

    position: absolute !important;
    left: 50% !important;
    bottom: -7px !important;

    width: 0 !important;
    height: 2px !important;

    transform: translateX(-50%) !important;

    background: linear-gradient(
        90deg,
        #19bfff,
        #4777ff
    ) !important;

    border-radius: 10px !important;

    box-shadow:
        0 0 8px rgba(25, 191, 255, .55) !important;

    opacity: 0 !important;

    transition:
        width .22s ease,
        opacity .22s ease !important;
}

.navbar-nav > li:hover > a::after,
.navbar-nav > li.open > a::after,
.navbar-nav > li.show > a::after {
    width: 70% !important;
    opacity: 1 !important;
}


/* =========================================================
   DROPDOWN
   ========================================================= */

.navbar-nav .dropdown-menu {
    padding: 10px !important;

    background: #ffffff !important;

    border: 1px solid #dce5ef !important;
    border-radius: 12px !important;

    box-shadow:
        0 14px 35px rgba(4, 15, 30, .14),
        0 3px 10px rgba(4, 15, 30, .06) !important;
}


/* Element dropdown */
.navbar-nav .dropdown-menu > li > a,
.navbar-nav .dropdown-menu a {
    display: block !important;

    margin: 3px 0 !important;
    padding: 13px 16px !important;

    color: #172337 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 8px !important;

    box-shadow: none !important;

    transform: none !important;

    text-shadow: none !important;

    transition:
        background .18s ease,
        color .18s ease,
        padding-left .18s ease !important;
}


/* Hover în dropdown */
.navbar-nav .dropdown-menu > li > a:hover,
.navbar-nav .dropdown-menu a:hover {
    color: #168cff !important;

    background: linear-gradient(
        90deg,
        rgba(22, 140, 255, .11),
        rgba(22, 140, 255, .035)
    ) !important;

    padding-left: 20px !important;

    box-shadow:
        inset 3px 0 0 #168cff !important;
}


/* NU aplicăm linia meniului principal în dropdown */
.navbar-nav .dropdown-menu a::after {
    display: none !important;
}


/* =========================================================
   SAGEATA
   ========================================================= */

.navbar-nav > li.dropdown > a .caret,
.navbar-nav > li.dropdown > a i,
.navbar-nav > li.dropdown > a svg {
    transition:
        color .2s ease,
        transform .2s ease !important;
}

.navbar-nav > li.dropdown:hover > a .caret,
.navbar-nav > li.dropdown:hover > a i,
.navbar-nav > li.dropdown:hover > a svg,
.navbar-nav > li.open > a .caret,
.navbar-nav > li.show > a .caret {
    color: #168cff !important;
}


/* Dacă meniul este deschis, întoarcem săgeata */
.navbar-nav > li.open > a .caret,
.navbar-nav > li.show > a .caret {
    transform: rotate(180deg) !important;
}
/* WebShield mixed Gaming + Web package cards */
.ws-plan-game{background:linear-gradient(145deg,#09131f 0%,#0d1a2a 100%)!important;border-color:#203750!important;color:#fff!important;box-shadow:0 14px 40px rgba(5,18,33,.12)}
.ws-plan-game:hover{border-color:#31b7ff!important;box-shadow:0 22px 55px rgba(16,135,214,.18),0 0 0 1px rgba(49,183,255,.08)}
.ws-plan-game .ws-plan-top span{color:#55c7ff!important}
.ws-plan-game .ws-plan-top h3{color:#fff!important}
.ws-plan-game .ws-price{border-color:rgba(255,255,255,.09)!important}
.ws-plan-game .ws-game-label b{font-size:20px!important;letter-spacing:.04em;color:#64ccff!important}
.ws-plan-game .ws-game-label span{color:#8297ae!important;margin-top:4px}
.ws-plan-game li{color:#a9b7c8!important}
.ws-plan-game li i{color:#35e79a!important}
.ws-plan-game .ws-plan-btn{background:linear-gradient(135deg,rgba(34,169,255,.18),rgba(111,124,255,.14))!important;color:#6bd0ff!important;border:1px solid rgba(72,190,255,.18)}
.ws-plan-game .ws-plan-btn:hover{background:linear-gradient(135deg,#22a9ff,#6f7cff)!important;color:#fff!important}

/* Game plan pricing */
.ws-plan-game .ws-game-price b {
    color: #55c8ff;
    font-size: 2.15rem;
    line-height: 1;
    letter-spacing: -0.03em;
}
.ws-plan-game .ws-game-price span {
    color: #91a9c8;
    margin-top: 8px;
}
.ws-plan-game ul {
    margin-bottom: 24px;
}
.ws-plan-game ul li {
    line-height: 1.35;
}

/* =========================================================
   PACKAGE CARDS - equal height + aligned buttons
   ========================================================= */
.ws-products .row {
    align-items: stretch;
}

.ws-products .row > [class*="col-"] {
    display: flex;
}

.ws-products .ws-plan {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.ws-products .ws-plan ul {
    flex: 1 1 auto;
}

.ws-products .ws-plan .ws-plan-btn {
    margin-top: auto;
    flex: 0 0 auto;
}

/* White hosting/reseller cards: blue-purple Configure hover */
.ws-products .ws-plan:not(.ws-plan-game) .ws-plan-btn {
    transition: background .22s ease, color .22s ease,
                box-shadow .22s ease, transform .22s ease,
                border-color .22s ease;
}

.ws-products .ws-plan:not(.ws-plan-game) .ws-plan-btn:hover,
.ws-products .ws-plan:not(.ws-plan-game) .ws-plan-btn:focus {
    background: linear-gradient(110deg, #2daeff 0%, #4b92fa 48%, #6f7cff 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 10px 25px rgba(45, 145, 255, .24),
                0 0 18px rgba(111, 124, 255, .13) !important;
    transform: translateY(-2px);
}

.ws-products .ws-plan:not(.ws-plan-game) .ws-plan-btn:hover i,
.ws-products .ws-plan:not(.ws-plan-game) .ws-plan-btn:focus i,
.ws-products .ws-plan:not(.ws-plan-game) .ws-plan-btn:hover svg,
.ws-products .ws-plan:not(.ws-plan-game) .ws-plan-btn:focus svg,
.ws-products .ws-plan:not(.ws-plan-game) .ws-plan-btn:hover span,
.ws-products .ws-plan:not(.ws-plan-game) .ws-plan-btn:focus span {
    color: #fff !important;
    fill: currentColor;
}

/* Keep game buttons aligned too */
.ws-products .ws-plan-game .ws-plan-btn {
    margin-top: auto;
}

@media (max-width: 991px) {
    .ws-products .row > [class*="col-"] {
        margin-bottom: 22px;
    }
}

/* ==========================================================
   WEBSHIELD NOVA — MY INVOICES v2
   Modern / clean / compatible with WHMCS DataTables
   ========================================================== */

/* =========================
   MAIN INVOICE PANEL
   ========================= */

.dataTables_wrapper {
    position: relative;
    width: 100%;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #dbe7f2;
    border-radius: 16px;
    box-shadow: 0 12px 35px rgba(8, 43, 69, 0.08);
}


/* =========================
   TOP CONTROLS
   ========================= */

.dataTables_wrapper .dataTables_info {
    padding: 8px 0 18px !important;
    color: #71869c !important;
    font-size: 12px !important;
    line-height: 1.4;
}


/* SEARCH */

.dataTables_wrapper .dataTables_filter {
    margin: 0 0 18px !important;
}

.dataTables_wrapper .dataTables_filter label {
    margin: 0 !important;
    font-size: 0;
}

.dataTables_wrapper .dataTables_filter input {
    width: 210px !important;
    height: 38px !important;

    margin: 0 !important;
    padding: 0 14px !important;

    background: #f6faff !important;

    border: 1px solid #d5e3f0 !important;
    border-radius: 9px !important;

    color: #10283f !important;
    font-size: 13px !important;

    outline: none !important;
    box-shadow: none !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.dataTables_wrapper .dataTables_filter input:focus {
    background: #ffffff !important;
    border-color: #159cff !important;
    box-shadow: 0 0 0 3px rgba(21,156,255,.10) !important;
}


/* =========================
   TABLE
   ========================= */

.dataTables_wrapper table.dataTable,
.dataTables_wrapper .table-list {
    width: 100% !important;

    margin: 0 !important;

    border: 1px solid #dbe7f2 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;

    border-radius: 12px !important;
    overflow: hidden !important;

    background: #ffffff !important;
}


/* =========================
   TABLE HEADER
   ========================= */

.dataTables_wrapper table.dataTable thead tr,
.dataTables_wrapper .table-list thead tr {
    background: #082b45 !important;
}

.dataTables_wrapper table.dataTable thead th,
.dataTables_wrapper .table-list thead th {
    height: 48px !important;

    padding: 0 16px !important;

    background: #082b45 !important;
    background-image: none !important;

    border: 0 !important;
    border-right: 1px solid rgba(255,255,255,.07) !important;
    border-bottom: 0 !important;

    color: #ffffff !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 48px !important;

    text-align: left !important;
    text-transform: uppercase !important;
    letter-spacing: .45px !important;

    vertical-align: middle !important;

    box-shadow: none !important;
}

.dataTables_wrapper table.dataTable thead th:last-child,
.dataTables_wrapper .table-list thead th:last-child {
    border-right: 0 !important;
}


/* remove old blue header cells */

.dataTables_wrapper table.dataTable thead th.sorting,
.dataTables_wrapper table.dataTable thead th.sorting_asc,
.dataTables_wrapper table.dataTable thead th.sorting_desc,
.dataTables_wrapper table.dataTable thead th.sorting_disabled {
    background-color: #082b45 !important;
    background-image: none !important;
    color: #ffffff !important;
}


/* Active sorted column */

.dataTables_wrapper table.dataTable thead th.sorting_asc,
.dataTables_wrapper table.dataTable thead th.sorting_desc {
    position: relative;
    background: #0b3554 !important;
}

.dataTables_wrapper table.dataTable thead th.sorting_asc::after,
.dataTables_wrapper table.dataTable thead th.sorting_desc::after {
    position: absolute;
    right: 12px;
    top: 50%;

    transform: translateY(-50%);

    color: #24baff;
    font-size: 10px;
}

.dataTables_wrapper table.dataTable thead th.sorting_asc::after {
    content: "↑";
}

.dataTables_wrapper table.dataTable thead th.sorting_desc::after {
    content: "↓";
}


/* =========================
   TABLE BODY
   ========================= */

.dataTables_wrapper table.dataTable tbody tr,
.dataTables_wrapper .table-list tbody tr {
    background: #ffffff !important;
}

.dataTables_wrapper table.dataTable tbody tr:nth-child(even),
.dataTables_wrapper .table-list tbody tr:nth-child(even) {
    background: #f8fbfe !important;
}

.dataTables_wrapper table.dataTable tbody tr:hover,
.dataTables_wrapper .table-list tbody tr:hover {
    background: #eef8ff !important;
}

.dataTables_wrapper table.dataTable tbody td,
.dataTables_wrapper .table-list tbody td {
    padding: 16px !important;

    background: transparent !important;

    border: 0 !important;
    border-bottom: 1px solid #e7eef5 !important;

    color: #3d5369 !important;

    font-size: 12px !important;
    line-height: 1.5 !important;

    vertical-align: middle !important;
}

.dataTables_wrapper table.dataTable tbody tr:last-child td,
.dataTables_wrapper .table-list tbody tr:last-child td {
    border-bottom: 0 !important;
}


/* INVOICE NUMBER */

.dataTables_wrapper table.dataTable tbody td:first-child a,
.dataTables_wrapper .table-list tbody td:first-child a {
    color: #078bf5 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.dataTables_wrapper table.dataTable tbody td:first-child a:hover,
.dataTables_wrapper .table-list tbody td:first-child a:hover {
    color: #20b7ff !important;
}


/* =========================
   STATUS
   ========================= */

.dataTables_wrapper .label,
.dataTables_wrapper .badge {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-width: 54px !important;
    height: 25px !important;

    padding: 0 11px !important;

    border: 0 !important;
    border-radius: 50px !important;

    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 25px !important;

    box-shadow: none !important;
}


/* PAID */

.dataTables_wrapper .label-success,
.dataTables_wrapper .badge-success,
.dataTables_wrapper .status-paid {
    background: #e3f8eb !important;
    color: #0aa34c !important;
}


/* UNPAID */

.dataTables_wrapper .label-danger,
.dataTables_wrapper .badge-danger,
.dataTables_wrapper .status-unpaid {
    background: #ffe8ed !important;
    color: #ed4760 !important;
}


/* CANCELLED */

.dataTables_wrapper .label-default,
.dataTables_wrapper .badge-secondary,
.dataTables_wrapper .status-cancelled {
    background: #edf2f6 !important;
    color: #697b8d !important;
}


/* REFUNDED */

.dataTables_wrapper .label-warning,
.dataTables_wrapper .badge-warning,
.dataTables_wrapper .status-refunded {
    background: #fff2d9 !important;
    color: #b97a00 !important;
}


/* =========================
   BOTTOM CONTROLS
   ========================= */

.dataTables_wrapper .dataTables_length {
    padding-top: 18px !important;

    color: #75899d !important;

    font-size: 11px !important;
}

.dataTables_wrapper .dataTables_length label {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;

    margin: 0 !important;
}

.dataTables_wrapper .dataTables_length select {
    width: 58px !important;
    height: 36px !important;

    margin: 0 !important;
    padding: 0 8px !important;

    background: #f6faff !important;

    border: 1px solid #d6e3ef !important;
    border-radius: 8px !important;

    color: #1c344c !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    box-shadow: none !important;
    outline: none !important;
}


/* =========================
   PAGINATION
   IMPORTANT:
   reset WHMCS / Bootstrap wrappers
   ========================= */

.dataTables_wrapper .dataTables_paginate {
    padding-top: 18px !important;
    margin: 0 !important;
}

.dataTables_wrapper .dataTables_paginate ul.pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 6px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}


/* REMOVE DOUBLE BOXES */

.dataTables_wrapper .pagination > li,
.dataTables_wrapper .pagination > .page-item {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
}


/* REAL PAGINATION BUTTON */

.dataTables_wrapper .pagination > li > a,
.dataTables_wrapper .pagination > li > span,
.dataTables_wrapper .pagination .page-link {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-width: 36px !important;
    height: 36px !important;

    margin: 0 !important;
    padding: 0 11px !important;

    background: #ffffff !important;

    border: 1px solid #d8e4ef !important;
    border-radius: 8px !important;

    color: #536b81 !important;

    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    box-shadow: none !important;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease;
}


/* HOVER */

.dataTables_wrapper .pagination > li > a:hover,
.dataTables_wrapper .pagination .page-link:hover {
    background: #eef8ff !important;
    border-color: #20aaff !important;
    color: #078bf5 !important;
}


/* ACTIVE */

.dataTables_wrapper .pagination > li.active > a,
.dataTables_wrapper .pagination > li.active > span,
.dataTables_wrapper .pagination > .active > a,
.dataTables_wrapper .pagination > .active > span,
.dataTables_wrapper .pagination .page-item.active .page-link {
    background: linear-gradient(135deg,#078bf5,#20b7ff) !important;

    border-color: transparent !important;

    color: #ffffff !important;

    box-shadow: 0 5px 14px rgba(9,143,241,.20) !important;
}


/* DISABLED */

.dataTables_wrapper .pagination > li.disabled > a,
.dataTables_wrapper .pagination > li.disabled > span,
.dataTables_wrapper .pagination .page-item.disabled .page-link {
    background: #f7f9fb !important;

    border-color: #e2e9ef !important;

    color: #a4b0bc !important;

    opacity: 1 !important;

    box-shadow: none !important;
}


/* =========================
   SIDEBAR — PAY ALL
   ========================= */

.sidebar .btn-success {
    width: 100% !important;
    min-height: 42px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 0 18px !important;

    background: linear-gradient(135deg,#08ad69,#08c77a) !important;

    border: 0 !important;
    border-radius: 8px !important;

    color: #ffffff !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    box-shadow: 0 7px 18px rgba(8,173,105,.17) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease !important;
}

.sidebar .btn-success:hover {
    transform: translateY(-1px);

    box-shadow: 0 9px 22px rgba(8,173,105,.25) !important;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 767px) {

    .dataTables_wrapper {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    .dataTables_wrapper .dataTables_filter {
        float: none !important;
        width: 100% !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
    }

    .dataTables_wrapper .dataTables_info {
        float: none !important;
    }

    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        width: 100% !important;
        overflow-x: auto;
    }

    .dataTables_wrapper .dataTables_paginate ul.pagination {
        justify-content: flex-start !important;
    }
}

/* =========================================================
   WEBSHIELD NOVA - MY INVOICES FINAL REFINEMENT
   Added safely at the end of the existing stylesheet.
   ========================================================= */

/* Invoice table: integrated WebShield navy/cyan header */
#tableInvoicesList_wrapper {
    background:#fff !important;
    border:1px solid #d9e8f5 !important;
    border-radius:16px !important;
    padding:18px !important;
    box-shadow:0 12px 35px rgba(8,37,61,.08) !important;
}

#tableInvoicesList thead tr {
    background:linear-gradient(90deg,#082b46 0%,#0b3a5b 55%,#0d5275 100%) !important;
}

#tableInvoicesList thead th,
#tableInvoicesList thead th.sorting,
#tableInvoicesList thead th.sorting_asc,
#tableInvoicesList thead th.sorting_desc,
#tableInvoicesList thead th.sorting_disabled {
    background:transparent !important;
    background-image:none !important;
    color:#fff !important;
    border:0 !important;
    border-right:1px solid rgba(255,255,255,.06) !important;
    padding:0 16px !important;
    height:50px !important;
    line-height:50px !important;
    font-size:11px !important;
    font-weight:700 !important;
    text-transform:uppercase !important;
    letter-spacing:.45px !important;
    vertical-align:middle !important;
}

#tableInvoicesList thead th:first-child {
    border-radius:10px 0 0 10px !important;
}

#tableInvoicesList thead th:last-child {
    border-radius:0 10px 10px 0 !important;
    border-right:0 !important;
}

#tableInvoicesList thead th.sorting_asc,
#tableInvoicesList thead th.sorting_desc {
    background:rgba(255,255,255,.045) !important;
}

#tableInvoicesList thead th.sorting_asc::after,
#tableInvoicesList thead th.sorting_desc::after {
    color:#25c2ff !important;
}

/* Invoice rows */
#tableInvoicesList {
    border-collapse:separate !important;
    border-spacing:0 9px !important;
    border:0 !important;
    overflow:visible !important;
}

#tableInvoicesList tbody tr {
    background:#f8fbfe !important;
    box-shadow:0 0 0 1px #dce9f4 !important;
    transition:background .18s ease,box-shadow .18s ease,transform .18s ease !important;
}

#tableInvoicesList tbody tr:nth-child(even) {
    background:#f8fbfe !important;
}

#tableInvoicesList tbody tr:hover {
    background:#fff !important;
    transform:translateY(-1px);
    box-shadow:0 7px 20px rgba(8,43,70,.08) !important;
}

#tableInvoicesList tbody td {
    background:transparent !important;
    border:0 !important;
    padding:15px 16px !important;
    color:#425b72 !important;
    font-size:13px !important;
    vertical-align:middle !important;
}

#tableInvoicesList tbody td:first-child {
    border-left:4px solid #16adf5 !important;
    border-radius:9px 0 0 9px !important;
    color:#078ef0 !important;
    font-weight:700 !important;
}

#tableInvoicesList tbody td:last-child {
    border-radius:0 9px 9px 0 !important;
}

/* Status badges */
#tableInvoicesList .status {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:26px !important;
    padding:5px 12px !important;
    border:0 !important;
    border-radius:20px !important;
    font-size:11px !important;
    font-weight:700 !important;
    line-height:1 !important;
}

#tableInvoicesList .status-paid {
    background:#e2f8ed !important;
    color:#0ca45b !important;
}

#tableInvoicesList .status-unpaid {
    background:#fff0f3 !important;
    color:#f04f6a !important;
}

#tableInvoicesList .status-cancelled {
    background:#edf2f7 !important;
    color:#65788a !important;
}

#tableInvoicesList .status-refunded {
    background:#eef1ff !important;
    color:#5666d8 !important;
}

/* Invoice search */
#tableInvoicesList_wrapper .dataTables_filter input {
    height:38px !important;
    background:#f7fbff !important;
    border:1px solid #cfe1ef !important;
    border-radius:9px !important;
    padding:0 13px !important;
    color:#18354d !important;
    outline:none !important;
    box-shadow:none !important;
}

#tableInvoicesList_wrapper .dataTables_filter input:focus {
    background:#fff !important;
    border-color:#149ff0 !important;
    box-shadow:0 0 0 3px rgba(20,159,240,.10) !important;
}

/* Invoice pagination - remove nested/odd-looking boxes */
#tableInvoicesList_wrapper .dataTables_paginate {
    margin-top:12px !important;
    padding-top:0 !important;
}

#tableInvoicesList_wrapper .dataTables_paginate .pagination {
    display:flex !important;
    gap:6px !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

#tableInvoicesList_wrapper .dataTables_paginate .pagination > li,
#tableInvoicesList_wrapper .dataTables_paginate .paginate_button {
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

#tableInvoicesList_wrapper .dataTables_paginate .pagination > li > a,
#tableInvoicesList_wrapper .dataTables_paginate .pagination > li > span,
#tableInvoicesList_wrapper .paginate_button > a,
#tableInvoicesList_wrapper .paginate_button > span {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:36px !important;
    height:36px !important;
    padding:0 11px !important;
    margin:0 !important;
    background:#fff !important;
    border:1px solid #d5e4f0 !important;
    border-radius:8px !important;
    color:#496176 !important;
    box-shadow:none !important;
}

#tableInvoicesList_wrapper .dataTables_paginate .active > a,
#tableInvoicesList_wrapper .dataTables_paginate .active > span,
#tableInvoicesList_wrapper .paginate_button.current > a,
#tableInvoicesList_wrapper .paginate_button.current > span {
    background:linear-gradient(135deg,#087ff0,#20baf5) !important;
    border-color:transparent !important;
    color:#fff !important;
    box-shadow:0 5px 14px rgba(8,143,235,.22) !important;
}

/* =========================================================
   INVOICES DUE SIDEBAR CARD
   Scope to the invoice page sidebar, without changing structure.
   ========================================================= */

#main-body .sidebar .panel:first-child,
#main-body .sidebar .card:first-child {
    overflow:hidden !important;
    border:1px solid #d8e7f3 !important;
    border-radius:14px !important;
    background:#fff !important;
    box-shadow:0 10px 28px rgba(8,37,61,.12) !important;
}

#main-body .sidebar .panel:first-child .panel-heading,
#main-body .sidebar .card:first-child .card-header {
    position:relative !important;
    background:linear-gradient(105deg,#082b46 0%,#0b3b5d 100%) !important;
    border:0 !important;
    border-bottom:0 !important;
    color:#fff !important;
    padding:16px 18px !important;
}

#main-body .sidebar .panel:first-child .panel-heading::after,
#main-body .sidebar .card:first-child .card-header::after {
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:3px !important;
    background:linear-gradient(90deg,#159eff,#42caff,#6f7cff) !important;
}

#main-body .sidebar .panel:first-child .panel-heading *,
#main-body .sidebar .card:first-child .card-header * {
    color:#fff !important;
}

#main-body .sidebar .panel:first-child .panel-body,
#main-body .sidebar .card:first-child .card-body {
    background:#fff !important;
    color:#243b53 !important;
}

#main-body .sidebar .panel:first-child .panel-footer,
#main-body .sidebar .card:first-child .card-footer {
    background:#f5faff !important;
    border-top:1px solid #dceaf5 !important;
    padding:16px !important;
}

/* Pay All: WebShield blue/cyan instead of unrelated green */
#main-body .sidebar .panel:first-child .btn-success,
#main-body .sidebar .card:first-child .btn-success {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    width:100% !important;
    min-height:42px !important;
    padding:0 18px !important;
    background:linear-gradient(110deg,#168fff 0%,#22b8ff 55%,#657cff 100%) !important;
    border:0 !important;
    border-radius:9px !important;
    color:#fff !important;
    font-size:13px !important;
    font-weight:700 !important;
    line-height:42px !important;
    box-shadow:0 8px 20px rgba(22,143,255,.24) !important;
    transition:transform .18s ease,box-shadow .18s ease,filter .18s ease !important;
}

#main-body .sidebar .panel:first-child .btn-success:hover,
#main-body .sidebar .card:first-child .btn-success:hover {
    color:#fff !important;
    transform:translateY(-1px) !important;
    filter:brightness(1.04) !important;
    box-shadow:0 11px 26px rgba(22,143,255,.32) !important;
}

#main-body .sidebar .panel:first-child .btn-success *,
#main-body .sidebar .card:first-child .btn-success * {
    color:#fff !important;
}

/* Responsive */
@media(max-width:767px) {
    #tableInvoicesList_wrapper {
        padding:10px !important;
        border-radius:12px !important;
    }

    #tableInvoicesList tbody td {
        padding:12px 10px !important;
    }
}