/* =========================================================================
   CodeNest-style dark theme for Alliance Digital (WHMCS "Six" child theme)
   Loaded last so it wins the cascade over main.css / custom.css / overrides.css.
   ========================================================================= */

:root{
  --cn-bg:        #070b0a;
  --cn-bg-raised: #0d1512;
  --cn-bg-card:   rgba(255,255,255,.03);
  --cn-border:    rgba(255,255,255,.1);
  --cn-accent:    #5ed29c;
  --cn-accent-dk: #070b0a;
  --cn-text:      #ffffff;
  --cn-text-mut:  rgba(255,255,255,.7);
  --cn-text-dim:  rgba(255,255,255,.5);
  --cn-radius:    14px;
}

/* ---------- Accessibility ---------------------------------------------- */

.cn-skip-link{
  position:fixed;
  top:-100px; left:12px;
  z-index:9999;
  background:var(--cn-accent);
  color:var(--cn-accent-dk) !important;
  padding:12px 20px;
  border-radius:8px;
  font-weight:700;
  text-decoration:none !important;
  transition:top .15s ease;
}
.cn-skip-link:focus{ top:12px; }

:focus-visible{
  outline:2px solid var(--cn-accent) !important;
  outline-offset:2px;
}
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--cn-accent) !important;
  outline-offset:2px;
}
img{ max-width:100%; height:auto; }

/* ---------- RTL (Arabic / Hebrew) --------------------------------------- */

html[dir="rtl"] .cn-hero__content{ align-items:flex-end; text-align:right; margin-inline-start:auto; }
html[dir="rtl"] .cn-hero__gradient-left{ transform:scaleX(-1); }
html[dir="rtl"] .cn-glass{ margin-inline-start:auto; }
html[dir="rtl"] .navbar-nav{ direction:rtl; }
html[dir="rtl"] .header-nav-algo-coodiv .navbar-brand{ flex-direction:row-reverse; }
html[dir="rtl"] .menu-btn-span-bar.is-open{ right:auto; left:5%; }
html[dir="rtl"] .footer-coodiv-thm{ text-align:right; }
html[dir="rtl"] .panel-sidebar .list-group-item{ text-align:right; }

/* ---------- Base / typography ---------------------------------------- */

body{
  background:var(--cn-bg) !important;
  color:var(--cn-text) !important;
  font-family:'Inter',"Helvetica Neue",Arial,sans-serif !important;
}
body,input,button,select,textarea{
  font-family:'Inter',"Helvetica Neue",Arial,sans-serif;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Inter',"Helvetica Neue",Arial,sans-serif;
  font-weight:800;
  color:var(--cn-text);
}
a{ color:var(--cn-accent); }
a:hover, a:focus{ color:#7fe0b3; text-decoration:none; }

#main-body, #main-body .container, .whmcs-not-index-template ~ * {
  background:var(--cn-bg) !important;
}
#main-body{ padding-top:40px; padding-bottom:60px; min-height:60vh; }

/* The cart/checkout flow loads WHMCS's own separate Order Form template stylesheet
   (templates/orderforms/standard_cart/css/all.min.css), injected inline within the
   page and re-applying WHMCS's default light styling on top of ours. It uses plain
   semantic tags (a classless <header>) rather than this theme's classes, so it needs
   its own !important overrides to stay dark. */
.categories-collapsed{ background:var(--cn-bg-card) !important; }

::selection{ background:var(--cn-accent); color:var(--cn-bg); }

/* ---------- Buttons ---------------------------------------------------- */

.btn{
  border-radius:999px !important;
  font-weight:700;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.03em;
  border:0;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-primary,
.btn-default,
.btn-success,
.btn-info,
input[type="submit"].btn,
button.btn:not(.btn-link){
  background:var(--cn-accent) !important;
  border-color:var(--cn-accent) !important;
  color:var(--cn-accent-dk) !important;
}
.btn-primary:hover,.btn-default:hover,.btn-success:hover,.btn-info:hover{
  background:#7fe0b3 !important;
  border-color:#7fe0b3 !important;
  color:var(--cn-accent-dk) !important;
  transform:translateY(-1px);
}
.btn-danger{ background:#e5484d !important; border-color:#e5484d !important; color:#fff !important; }
.btn-link{ color:var(--cn-accent) !important; text-transform:none; }
.btn-outline, .btn-default.btn-outline{
  background:transparent !important;
  border:1px solid var(--cn-border) !important;
  color:var(--cn-text) !important;
}

/* ---------- Forms -------------------------------------------------------- */

.form-control, select, textarea, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], input[type="tel"]{
  background:var(--cn-bg-raised) !important;
  border:1px solid var(--cn-border) !important;
  color:var(--cn-text) !important;
  border-radius:10px !important;
  box-shadow:none !important;
}
.form-control:focus{
  border-color:var(--cn-accent) !important;
  box-shadow:0 0 0 3px rgba(94,210,156,.2) !important;
}
.form-control::placeholder{ color:var(--cn-text-dim); }
label{ color:var(--cn-text-mut); font-weight:600; }

/* ---------- Panels / cards ------------------------------------------------ */

.panel{
  background:var(--cn-bg-card) !important;
  border:1px solid var(--cn-border) !important;
  border-radius:var(--cn-radius) !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.05) !important;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.panel-heading{
  background:transparent !important;
  border-bottom:1px solid var(--cn-border) !important;
  border-radius:var(--cn-radius) var(--cn-radius) 0 0 !important;
}
.panel-title, .panel-title strong{ color:var(--cn-text) !important; }
.panel-body{ color:var(--cn-text-mut); }
.panel-footer{
  background:transparent !important;
  border-top:1px solid var(--cn-border) !important;
}
.card{
  background:var(--cn-bg-card) !important;
  border:1px solid var(--cn-border) !important;
  color:var(--cn-text);
}

/* ---------- Tables --------------------------------------------------------- */

.table{ color:var(--cn-text-mut); }
.table > thead > tr > th{
  color:var(--cn-text);
  border-bottom:1px solid var(--cn-border) !important;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.04em;
}
.table > tbody > tr > td, .table > tbody > tr > th{
  border-top:1px solid var(--cn-border) !important;
}
.table-hover > tbody > tr:hover{
  background:rgba(255,255,255,.03) !important;
  color:var(--cn-text);
}
.table-striped > tbody > tr:nth-of-type(odd){
  background:rgba(255,255,255,.015);
}

/* ---------- Alerts --------------------------------------------------------- */

.alert{
  background:var(--cn-bg-card) !important;
  border:1px solid var(--cn-border) !important;
  border-left:3px solid var(--cn-accent) !important;
  color:var(--cn-text-mut) !important;
  border-radius:10px !important;
}
.alert-danger{ border-left-color:#e5484d !important; }
.alert-warning{ border-left-color:#f5a524 !important; }
.alert-info{ border-left-color:#4ea8de !important; }

/* ---------- Breadcrumb / pagination ---------------------------------------- */

.breadcrumb{
  background:var(--cn-bg-card) !important;
  border:1px solid var(--cn-border);
  border-radius:999px !important;
  display:inline-flex;
  padding:8px 18px;
}
.breadcrumb > li + li::before{ color:var(--cn-text-dim); }
.breadcrumb a{ color:var(--cn-text-mut); }
.breadcrumb .active{ color:var(--cn-accent); }

.pagination > li > a, .pagination > li > span{
  background:var(--cn-bg-card);
  border:1px solid var(--cn-border);
  color:var(--cn-text-mut);
}
.pagination > .active > a{
  background:var(--cn-accent) !important;
  border-color:var(--cn-accent) !important;
  color:var(--cn-accent-dk) !important;
}

/* ---------- Sidebar / list groups -------------------------------------------- */

.panel-sidebar .list-group-item{
  background:transparent !important;
  border-color:var(--cn-border) !important;
  color:var(--cn-text-mut) !important;
}
.panel-sidebar .list-group-item:hover{
  background:rgba(94,210,156,.08) !important;
  color:var(--cn-text) !important;
}
.panel-sidebar .list-group-item.active{
  background:rgba(94,210,156,.12) !important;
  border-color:var(--cn-accent) !important;
  color:var(--cn-accent) !important;
}

.header-lined h1{ color:var(--cn-text); font-weight:800; }
.header-lined small{ color:var(--cn-text-dim); }

/* ---------- Modals ------------------------------------------------------------ */

.modal-content{
  background:var(--cn-bg-raised) !important;
  border:1px solid var(--cn-border) !important;
  color:var(--cn-text);
}
.modal-header, .modal-footer{ border-color:var(--cn-border) !important; }

/* ---------- Footer -------------------------------------------------------------- */

.footer-coodiv-thm{
  background:var(--cn-bg) !important;
  border-top:1px solid var(--cn-border);
  padding:70px 0 30px;
}
.footer-title-simple{
  font-family:'Plus Jakarta Sans',sans-serif;
  color:var(--cn-text);
  font-weight:700;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.main-menu-footer-mn a, .footer-contact-a-hm{
  color:var(--cn-text-mut) !important;
}
.main-menu-footer-mn a:hover{ color:var(--cn-accent) !important; }
.footer-social-links a{
  background:var(--cn-bg-card);
  border:1px solid var(--cn-border);
  color:var(--cn-text) !important;
}
.footer-social-links a:hover{ background:var(--cn-accent); color:var(--cn-accent-dk) !important; }
.form-contain-home-subscribe input{
  background:var(--cn-bg-raised) !important;
  border:1px solid var(--cn-border) !important;
  color:var(--cn-text) !important;
}
.form-contain-home-subscribe button{
  background:var(--cn-accent) !important;
  color:var(--cn-accent-dk) !important;
}
.copyright-footer-p{ color:var(--cn-text-dim) !important; }
#footer{ background:var(--cn-bg) !important; border-top:1px solid var(--cn-border); }
#footer p{ color:var(--cn-text-dim) !important; }
.back-to-top{ background:var(--cn-accent) !important; color:var(--cn-accent-dk) !important; }

/* =========================================================================
   Global navigation (all pages)
   ========================================================================= */

#header{ background:transparent; position:relative; z-index:30; }
.whmcs-not-index-template{
  background:var(--cn-bg);
  border-bottom:1px solid var(--cn-border);
}
/* On the homepage, float the header over the fullscreen hero instead of pushing it down */
#header:not(.whmcs-not-index-template){
  position:absolute;
  top:0; left:0; right:0;
  z-index:20;
  background:transparent;
}
.search-header-block,
.header-animation{
  display:none !important;
}
.search-headr{ display:none !important; }

/* Slim utility bar (contact / language / login / register / cart) */
.header-top-menu{
  background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--cn-border);
  padding:0;
}
.header-top-menu ul{ display:flex; flex-wrap:wrap; align-items:center; gap:0; margin:0; }
.header-top-menu ul li{ list-style:none; }
.header-top-menu a{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--cn-text-mut) !important;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:9px 14px;
}
.header-top-menu a:hover{ color:var(--cn-accent) !important; }
.header-top-menu li.primary-action a{ color:var(--cn-accent) !important; }
#languageChooserContent, #accountNotificationsContent{
  background:var(--cn-bg-raised);
  border:1px solid var(--cn-border);
  color:var(--cn-text);
}

.top-header-nav-home{
  background:rgba(7,11,10,.35);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:12px 0;
}
/* Sticky-on-scroll state toggled by nuhost-scripts.js (was a white bar; keep it dark + translucent) */
.top-header-fixed{
  background:rgba(7,11,10,.55) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.35) !important;
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
}
.top-header-fixed .header-nav-algo-coodiv{ padding:12px 0 !important; }
.top-header-fixed .accouting-h,
#header .top-header-fixed .navbar .accouting-h{ background:transparent !important; }
#header .top-header-fixed .navbar .nav-link,
#header .top-header-fixed .navbar-nav > li > a{ color:var(--cn-text) !important; }
#header .top-header-fixed .navbar .nav-link:hover{ color:var(--cn-accent) !important; }
.whmcs-not-index-template .top-header-nav-home{
  position:sticky; top:0;
  background:rgba(7,11,10,.55);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  z-index:40;
}
.header-nav-algo-coodiv .navbar-brand{
  display:flex; align-items:center; gap:10px;
}
.cn-logo{
  height:44px !important;
  width:auto !important;
  max-width:100% !important;
  max-height:none !important;
  margin-top:0 !important;
}

/* Footer logo: only `height` was ever set (no `width`), so browsers that don't infer
   aspect-ratio from the img's width/height attributes render it squished/oversized. */
.footer-brand img{
  height:44px !important;
  width:auto !important;
  max-width:100% !important;
}
@media(max-width:767px){
  .footer-brand img{ height:38px !important; }
}

.navbar-nav > li > a{
  color:var(--cn-text) !important;
  font-family:'Inter',sans-serif;
  font-size:16px !important;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.02em;
  padding:10px 16px !important;
}
.navbar-nav > li > a:hover, .navbar-nav > li > a:focus{
  color:var(--cn-accent) !important;
  background:transparent !important;
}
.navbar-nav .dropdown-menu{
  background:var(--cn-bg-raised);
  border:1px solid var(--cn-border);
}
.navbar-nav .dropdown-menu > li > a{ color:var(--cn-text-mut) !important; }
.navbar-nav .dropdown-menu > li > a:hover{ color:var(--cn-accent) !important; background:rgba(255,255,255,.04) !important; }

.account-place-header-nav .accouting-h img{ filter:brightness(0) invert(1); opacity:.85; }
#header .navbar .accouting-h{
  background:rgba(255,255,255,.1) !important;
  border:1px solid var(--cn-border);
}
.login-drop-down-header{
  background:var(--cn-bg-raised) !important;
  border:1px solid var(--cn-border) !important;
  color:var(--cn-text);
}
.login-drop-down-header .form-control{ background:var(--cn-bg) !important; }
.user-menu-dro li a{ color:var(--cn-text-mut) !important; }
.user-menu-dro li a:hover{ color:var(--cn-accent) !important; }

/* Mobile hamburger -> full-screen dark overlay (uses existing offcanvas plugin) */

.menu-btn-span-bar{
  position:relative;
  z-index:2001;
  background:transparent !important;
  border:0 !important;
}
.menu-btn-span-bar span{
  display:block;
  width:24px; height:2px;
  margin:5px 0;
  background:#fff;
  transition:transform .25s ease, opacity .25s ease;
}
.menu-btn-span-bar.is-open{ position:fixed; top:26px; right:5%; }
.menu-btn-span-bar.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-btn-span-bar.is-open span:nth-child(2){ opacity:0; }
.menu-btn-span-bar.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.navbar-offcanvas#offcanvas-menu-home{
  position:fixed !important;
  top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
  width:100% !important; max-width:100% !important; height:100vh !important;
  background:var(--cn-bg) !important;
  z-index:2000 !important;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transform:translateY(-100%) !important;
  opacity:1 !important;
  transition:transform .35s ease !important;
  padding:0 !important;
}
.navbar-offcanvas#offcanvas-menu-home.in{
  transform:translateY(0) !important;
}
.navbar-offcanvas#offcanvas-menu-home .navbar-nav{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:26px;
  float:none !important;
  margin:0 !important;
}
.navbar-offcanvas#offcanvas-menu-home .navbar-nav > li > a{
  font-size:30px !important;
  font-weight:700;
}
.navbar-offcanvas#offcanvas-menu-home .dropdown-menu{
  position:static !important;
  display:block !important;
  background:transparent !important;
  border:0 !important;
  text-align:center;
  box-shadow:none !important;
}

/* ---------- WHMCS stock product/pricing cards (cart.php product selection) ------ */
/* These come from WHMCS's own core all.min.css (.product/.products), untouched by
   the earlier dark-theme pass since that page uses WHMCS's built-in product-listing
   markup rather than this theme's custom templates. */

.product{
  background-color:var(--cn-bg-card) !important;
  border:1px solid var(--cn-border) !important;
  border-radius:var(--cn-radius);
  overflow:hidden;
}
.product .header, .product > header, .product header{
  background-color:rgba(94,210,156,.1) !important;
  color:var(--cn-text) !important;
  border-bottom:1px solid var(--cn-border);
}
.product .header *, .product header *{ color:var(--cn-text) !important; }
.product .footer, .product > footer, .product footer{
  background:transparent !important;
  border:1px solid var(--cn-border) !important;
  border-top:0 !important;
  color:var(--cn-text-mut);
}
.product .btn, .product .btn:hover{
  background-color:var(--cn-accent) !important;
  color:var(--cn-accent-dk) !important;
}
.product .recommended{
  background-color:var(--cn-accent) !important;
  color:var(--cn-accent-dk) !important;
}
.product, .product p, .product li, .product td, .product th{
  color:var(--cn-text-mut);
}
.product h1, .product h2, .product h3, .product h4, .product h5{
  color:var(--cn-text) !important;
}

/* ---------- Cross-device showcase (deliberate light "spotlight" card on the dark page) --------------- */

.cn-showcase{ padding:90px 0 100px; background:var(--cn-bg); }
.cn-showcase__frame{
  max-width:1040px; margin:48px auto 0;
  border-radius:20px; padding:28px;
  background:linear-gradient(180deg, rgba(94,210,156,.10), rgba(94,210,156,0) 60%), #eef0f2;
  border:1px solid var(--cn-border);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55);
}
.cn-showcase__frame img{ display:block; width:100%; border-radius:10px; }

/* ---------- Homepage feature sections restyle (non-hero content) --------------- */

.panel-features-home{
  background:var(--cn-bg) !important;
  border-top:1px solid var(--cn-border) !important;
}
.panel-features-home h3{ color:var(--cn-text) !important; font-size:26px !important; }
.panel-features-home p, .panel-features-home li{
  color:var(--cn-text-mut) !important;
  font-size:17px !important;
  line-height:1.8 !important;
}
.panel-features-home li strong{ color:var(--cn-text) !important; }
.panel-features-home .card{ background:var(--cn-bg-card) !important; }
.panel-features-home .fa-check{ color:var(--cn-accent) !important; }

.second-items-home, .our-sevices-section, .server-place-section,
.blog-home-section, .our-pertners{
  background:var(--cn-bg) !important;
}
.tittle-simple-one h5{ color:var(--cn-text); }
.tree-steps-hosting-plans{
  background:var(--cn-bg-card) !important;
  border:1px solid var(--cn-border) !important;
}
.tree-steps-hosting-plans-header{ border-bottom-color:var(--cn-border) !important; }
.tree-steps-hosting-plans-title,
.tree-steps-hosting-plans-price{ color:var(--cn-text) !important; }
.tree-steps-hosting-plans-title small,
.tree-steps-hosting-plans-price small{ color:var(--cn-text-dim) !important; }
.tree-steps-hosting-plans-list li{ color:var(--cn-text-mut) !important; }
.tree-steps-hosting-plans-icon{ color:var(--cn-accent) !important; }
.tree-steps-hosting-plans-best{ background:var(--cn-accent) !important; color:var(--cn-accent-dk) !important; }
.tree-steps-hosting-plans-footer-btn{ background:var(--cn-accent) !important; color:var(--cn-accent-dk) !important; }
.tree-steps-hosting-plans-payment-title,
.tree-steps-hosting-plans-payment-title small{ color:var(--cn-text-mut) !important; }

/* Services tabs section: swap dark-on-white copy for light-on-dark */
.text-tab-content-algo .text-absoo h5{ color:var(--cn-text) !important; }
.text-tab-content-algo .text-absoo p{
  color:var(--cn-text-mut) !important;
  font-size:16px !important;
  line-height:1.8 !important;
}
.text-tab-content-algo .text-absoo h5{ font-size:28px !important; }
.text-tab-content-algo .text-absoo a{
  background:var(--cn-accent) !important;
  color:var(--cn-accent-dk) !important;
}
#oursevices li a:hover .title-tabs-of,
#oursevices li a.active .title-tabs-of{ background:var(--cn-accent) !important; color:var(--cn-accent-dk) !important; }

/* Services tab carousel & content panel were left on their original white/yellow scheme */
.carousel-nav-services .carousel-cell{
  background:var(--cn-bg-card) !important;
  border:1px solid var(--cn-border);
}
.carousel-nav-services .carousel-cell.is-nav-selected{
  background:rgba(94,210,156,.12) !important;
  border-color:var(--cn-accent);
}
.carousel-nav-services .nav-link{ background:transparent !important; }
.carousel-nav-services .nav-link i{ color:var(--cn-accent) !important; }
#oursevices li a i:before{ color:var(--cn-accent) !important; }
#oursevices li a i:after{ background:rgba(94,210,156,.12) !important; }
.carousel-main-services{
  background:var(--cn-bg) !important;
}

/* "Manage like a Pro!" parallax CTA card — was left on its original bright blue/yellow scheme */
.video-section-text-place{
  background:var(--cn-bg-card) !important;
  border:1px solid var(--cn-border) !important;
  color:var(--cn-text) !important;
}
.video-section-text-place h5{ color:var(--cn-text) !important; }
.video-section-text-place p{ color:var(--cn-text-mut) !important; }
.video-section-text-place .post-category{
  background:var(--cn-accent) !important;
  color:var(--cn-accent-dk) !important;
}
.video-section-text-place .post-date{ color:var(--cn-text-dim) !important; }
.video-section-text-place a{
  background:var(--cn-accent) !important;
  color:var(--cn-accent-dk) !important;
}
.video-section-text-place a:hover{ background:#7fe0b3 !important; }
.video-section-text-place .over-ole-grandient-orl{ background:rgba(94,210,156,.1) !important; }
.perlex-efect-section .perlex-hidden-iverlow{ background:var(--cn-bg) !important; opacity:.75 !important; }

/* Partner/"Tested on" logos: many are dark-colored marks meant for a white background
   and are nearly invisible directly on the dark theme. A light card behind each one
   keeps them legible regardless of the individual logo's own colors. */
.our-pertners .item{
  display:flex !important;
  align-items:center;
  justify-content:center;
  height:100px;
  padding:0 6px;
}
.our-pertners .item a{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  background:transparent;
  border-radius:10px;
  padding:14px 20px;
  height:72px;
  box-sizing:border-box;
}
.our-pertners img{
  opacity:1 !important;
  max-height:44px;
  width:auto !important;
  max-width:130px;
  /* Make dark logos a readable shiny grey/brown on dark theme */
  filter: brightness(0) invert(60%) sepia(40%) hue-rotate(345deg) saturate(120%) drop-shadow(0 1px 1px rgba(255,255,255,0.1));
  transition: all 0.3s ease;
}
.our-pertners img:hover {
  filter: brightness(0) invert(75%) sepia(30%) hue-rotate(345deg) saturate(150%) drop-shadow(0 2px 3px rgba(255,255,255,0.2));
}

/* Platform Statistics icon backdrop: large light-gray decorative circles behind the
   title icon were designed for the original light theme. */
.counter-section .counter-middle-icon .icon-counter-sid{
  background:var(--cn-accent) !important;
  color:var(--cn-accent-dk);
}
.counter-section .counter-middle-icon .icon-counter-sid:before,
.counter-section .counter-middle-icon .icon-counter-sid:after{
  background:rgba(94,210,156,.08) !important;
}

/* Server map section: a decorative white "hill" shape behind the map was designed
   for the original light theme and left a large white block on the dark redesign. */
.server-place-section:after{
  background:var(--cn-bg) !important;
  box-shadow:none !important;
}
.map-gene-server-place img{ opacity:.9; }

/* WHMCS core injects a Facebook/Google social-login block on register/login pages
   directly (not via any editable theme template) using OAuth app credentials tied to
   the retired .tv domain — they can't work post-migration and misleadingly look
   clickable, so hide them until the apps are reconfigured for the new domain. */
.social-signin-btns{ display:none !important; }

/* WHMCS's own "sub-heading" section dividers (Personal Info / Billing Address on
   register.php, etc.) use a plain white pill background. */
.sub-heading{ border-color:var(--cn-border) !important; }
.sub-heading span{
  background:var(--cn-bg) !important;
  color:var(--cn-accent) !important;
}

/* Homepage news/announcements block: Bootstrap's default .label-warning (orange) and
   .label-announcement-single (pink) clash with the theme's palette. */
.announcement-single .title-announcement-single{ color:var(--cn-text) !important; }
.announcement-single .label-announcement-single{
  background:var(--cn-bg-card) !important;
  border:1px solid var(--cn-border) !important;
  color:var(--cn-text-mut) !important;
}
.announcement-single blockquote{
  border-left-color:var(--cn-accent) !important;
  color:var(--cn-text-mut) !important;
}
.announcement-single .label-warning{
  background:var(--cn-accent) !important;
  color:var(--cn-accent-dk) !important;
}

/* Server map / contact section copy */
.server-place-section h5, .server-place-section p{ color:var(--cn-text-mut) !important; }
.server-place-section h5{ color:var(--cn-text) !important; }
.server-place-section p span{ color:var(--cn-text) !important; }

/* =========================================================================
   Hero (homepage only)
   ========================================================================= */

.cn-hero{
  position:relative;
  width:100%;
  min-height:100vh;
  overflow:hidden;
  background:var(--cn-bg);
  margin-top:-1px;
}

.cn-hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.6;
  z-index:0;
}

.cn-hero__gradient-left{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,#070b0a 0%,rgba(7,11,10,.6) 35%,transparent 70%);
}
.cn-hero__gradient-bottom{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg,#070b0a 0%,rgba(7,11,10,.2) 40%,transparent 75%);
}

.cn-hero__grid{
  position:absolute; inset:0; z-index:1;
  display:none;
  pointer-events:none;
}
@media(min-width:1024px){ .cn-hero__grid{ display:block; } }
.cn-hero__grid span{
  position:absolute; top:0; bottom:0; width:1px;
  background:rgba(255,255,255,.1);
}
.cn-hero__grid span:nth-child(1){ left:25%; }
.cn-hero__grid span:nth-child(2){ left:50%; }
.cn-hero__grid span:nth-child(3){ left:75%; }

.cn-hero__glow{
  position:absolute; top:-10%; left:50%;
  transform:translateX(-50%);
  width:1100px; max-width:160%; height:520px;
  z-index:1;
  pointer-events:none;
}

.cn-hero__content{
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  justify-content:flex-end;
  min-height:100vh;
  padding:210px 5% 100px;
  max-width:900px;
}

.cn-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(94,210,156,.12);
  border:1px solid rgba(94,210,156,.35);
  color:var(--cn-accent);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700; font-size:11px; line-height:1; letter-spacing:.08em; text-transform:uppercase;
  padding:7px 14px;
  border-radius:999px;
  margin:0 0 14px;
  width:fit-content;
}
.cn-badge span{ display:inline-flex; align-items:center; line-height:1; }
.cn-badge i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1em;
  height:1em;
  font-size:12px;
  line-height:1;
  flex-shrink:0;
}

.cn-eyebrow{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cn-accent); margin:0 0 64px;
}

.cn-glass{
  position:relative;
  width:200px; height:200px;
  transform:translateY(-50px);
  background:rgba(255,255,255,.01);
  background-blend-mode:luminosity;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.1);
  border-radius:18px;
  padding:18px;
  display:flex; flex-direction:column; justify-content:center; gap:10px;
  margin-bottom:-50px;
}
.cn-glass::before{
  content:"";
  position:absolute; inset:0;
  padding:1.4px;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.cn-glass__tag{ font-size:14px; color:rgba(255,255,255,.6); margin:0; font-weight:500; }
.cn-glass__headline{ font-size:18px; line-height:1.3; margin:0; font-weight:600; color:#fff; }
.cn-glass__headline em{
  font-family:'Instrument Serif',serif; font-style:italic; color:var(--cn-accent); font-weight:400;
}
.cn-glass__desc{ font-size:11px; color:rgba(255,255,255,.55); margin:0; line-height:1.5; }

.cn-headline{
  font-family:'Inter',sans-serif !important;
  font-weight:800 !important; text-transform:uppercase; letter-spacing:-0.02em;
  font-size:clamp(40px,7vw,72px) !important;
  line-height:1.02 !important;
  margin:0 0 22px !important;
  color:#fff;
}
.cn-headline .dot{ color:var(--cn-accent); }

.cn-desc{
  font-size:14px; color:rgba(255,255,255,.7); max-width:512px; line-height:1.7; margin:0 0 32px;
}

.cn-cta{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--cn-accent) !important; color:var(--cn-bg) !important;
  text-decoration:none; text-transform:uppercase; font-weight:700; font-size:13px;
  letter-spacing:.04em;
  padding:16px 28px; border-radius:999px; width:fit-content;
  transition:transform .2s ease, box-shadow .2s ease;
}
.cn-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(94,210,156,.25); color:var(--cn-bg) !important; }
.cn-cta svg{ width:16px; height:16px; }

@media(max-width:640px){
  .cn-hero__content{ padding-top:190px; }
}

/* ---------- What is OSCam / about section -------------------------------- */

.cn-about{
  background:var(--cn-bg) !important;
  padding:80px 0 40px;
}
.cn-about__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin-top:40px;
}
.cn-about__item{
  background:var(--cn-bg-card);
  border:1px solid var(--cn-border);
  border-radius:var(--cn-radius);
  padding:32px 28px;
}
.cn-about__item i{
  color:var(--cn-accent);
  font-size:26px;
  margin-bottom:16px;
  display:block;
}
.cn-about__icon-img{
  height:32px;
  width:auto;
  margin-bottom:16px;
  display:block;
}
.cn-about__item h3{
  font-size:17px;
  color:var(--cn-text);
  margin:0 0 12px;
}
.cn-about__item p{
  font-size:14px;
  color:var(--cn-text-mut);
  line-height:1.75;
  margin:0;
}
.cn-about__item p a{
  color:var(--cn-accent);
  text-decoration:underline;
  text-underline-offset:2px;
}
.cn-about__item p a:hover{ color:#7fe0b3; }
.cn-about__item p strong{ color:var(--cn-text); }
@media(max-width:900px){
  .cn-about__grid{ grid-template-columns:1fr; }
}

/* ---------- Technical specifications grid ------------------------------- */

.cn-specs{
  background:var(--cn-bg) !important;
  padding:80px 0;
  border-top:1px solid var(--cn-border);
}
.cn-specs__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--cn-border);
  border:1px solid var(--cn-border);
  border-radius:var(--cn-radius);
  overflow:hidden;
  margin-top:40px;
}
.cn-specs__item{
  background:var(--cn-bg-card);
  padding:28px 24px;
}
.cn-specs__item i{
  color:var(--cn-accent);
  font-size:22px;
  margin-bottom:14px;
  display:block;
}
.cn-specs__item h3{
  font-size:14px;
  color:var(--cn-text);
  margin:0 0 6px;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.cn-specs__item p{
  font-size:13px;
  color:var(--cn-text-mut);
  margin:0;
  line-height:1.6;
}
@media(max-width:900px){
  .cn-specs__grid{ grid-template-columns:repeat(2, 1fr); }
}
@media(max-width:520px){
  .cn-specs__grid{ grid-template-columns:1fr; }
}

/* Fix for button click overlay/glitch */
.btn:focus, .btn:active, button:focus, button:active, a:focus, a:active {
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* WHMCS Markdown Editor fixes for dark theme */
.md-editor {
    background: #ffffff !important;
    border: 1px solid var(--cn-border) !important;
    border-radius: 10px !important;
    overflow: hidden;
}
.md-editor > .md-header {
    background: #f8f9fa !important;
    border-bottom: 1px solid var(--cn-border) !important;
    padding: 5px !important;
}
.md-editor .md-input, .md-editor .md-preview, textarea.markdown-editor {
    background: #ffffff !important;
    color: #000000 !important;
    border: none !important;
}
.md-editor .btn-default {
    background: transparent !important;
    color: #333 !important;
    border: none !important;
    box-shadow: none !important;
}
.md-editor .btn-default:hover, .md-editor .btn-default:focus, .md-editor .btn-default.active {
    background: var(--cn-bg-raised) !important;
    color: var(--cn-accent) !important;
}

/* Force white background and black text on all inputs in ticket submission to ensure readability */
form[action*="submitticket.php"] input[type="text"],
form[action*="submitticket.php"] input[type="email"],
form[action*="submitticket.php"] select,
form[action*="submitticket.php"] textarea,
#inputMessage,
.markdown-editor,
.md-editor .md-input {
    background-color: #ffffff !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* Explicitly target all form fields on the submit ticket page to guarantee black text on white background */
#inputName,
#inputEmail,
#inputSubject,
#inputDepartment,
#inputRelatedService,
#inputPriority {
    background-color: #ffffff !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}