/* ===========================================================================
   XCONN VPN - WHMCS brand skin
   ---------------------------------------------------------------------------
   Drop-in replacement for templates/sixe/css/custom.css.
   The Six template loads this file automatically, after all.min.css, so
   nothing else in WHMCS has to be edited and nothing here is lost on a
   WHMCS update.

   It re-skins the client area, cart, checkout, login and registration to
   match xconnvpn.com: orange (#F2A20D) on dark charcoal (#0D0D0D), the same
   type scale, radii and button shapes as the main site.
   =========================================================================== */


/* Brand typeface, self-hosted so WHMCS matches the website exactly
   and needs no extra third-party request. */
@font-face{
  font-family:"Plus Jakarta Sans";
  font-style:normal;
  font-display:swap;
  font-weight:200 800;
  src:url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  font-style:normal;
  font-display:swap;
  font-weight:200 800;
  src:url("../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --x-orange:#F2A20D;
  --x-orange-600:#D98A06;
  --x-orange-400:#FF9E33;
  --x-orange-tint:rgba(242,162,13,.12);
  --x-orange-line:rgba(242,162,13,.32);
  --x-ink:#0D0D0D;
  --x-ink-900:#121417;
  --x-ink-800:#16181C;
  --x-ink-700:#1E2126;
  --x-bg:#FFFFFF;
  --x-bg-alt:#F7F8FA;
  --x-line:#E5E8EE;
  --x-text:#14171A;
  --x-text-2:#525A67;
  --x-text-3:#7A8391;
  --x-on-dark:#FFFFFF;
  --x-on-dark-2:#A8B0BC;
  --x-success:#1FBF75;
  --x-danger:#E5484D;
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:999px;
  --sh-sm:0 1px 3px rgba(16,20,28,.07);
  --sh-md:0 6px 16px rgba(16,20,28,.08);
  --sh-glow:0 10px 28px -10px rgba(242,162,13,.55);
  --x-font:"Plus Jakarta Sans","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
}

/* --- type ----------------------------------------------------------------- */
body{
  font-family:var(--x-font);
  color:var(--x-text);
  background:var(--x-bg-alt);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,.panel-title,.header-lined h1{
  font-family:var(--x-font);
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--x-text);
}
a{color:var(--x-orange-600)}
a:hover,a:focus{color:var(--x-orange);text-decoration:none}

/* --- top utility bar + logo ---------------------------------------------- */
section#header{
  background:var(--x-ink);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:14px 0 18px;
}
section#header .logo img{max-height:46px;width:auto}
section#header .logo-text{color:#fff;font-weight:800;letter-spacing:-.02em}
section#header .top-nav > li > a{
  color:var(--x-on-dark-2);
  font-size:13px;
  font-weight:600;
  padding:6px 12px;
  border-radius:var(--r-sm);
}
section#header .top-nav > li > a:hover{color:#fff;background:rgba(255,255,255,.07)}
section#header .top-nav .primary-action .btn,
section#header .top-nav > li > a.btn{
  background:var(--x-orange);
  color:#14100A;
  border:0;
  border-radius:var(--r-pill);
  font-weight:700;
  padding:8px 18px;
  box-shadow:var(--sh-glow);
}
section#header .top-nav .primary-action .btn:hover,
section#header .top-nav > li > a.btn:hover{background:var(--x-orange-400);color:#14100A}
section#header .top-nav .btn-logged-in-admin{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}

/* --- primary navigation --------------------------------------------------- */
section#main-menu .navbar-main,
section#main-menu .navbar-default{
  background:var(--x-ink-900);
  border:0;
  border-bottom:1px solid rgba(255,255,255,.07);
  border-radius:0;
  margin-bottom:0;
}
.navbar-main .navbar-nav > li > a{
  color:var(--x-on-dark-2);
  font-weight:600;
  font-size:14.5px;
  padding:16px 16px;
  border:0;
}
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus{color:#fff;background:rgba(255,255,255,.06)}
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .open > a{
  color:#fff;
  background:rgba(242,162,13,.14);
  box-shadow:inset 0 -2px 0 var(--x-orange);
}
.navbar-main .dropdown-menu{
  background:var(--x-ink-800);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-md);
  padding:6px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.8);
}
.navbar-main .dropdown-menu > li > a{color:var(--x-on-dark-2);border-radius:var(--r-sm);padding:9px 12px}
.navbar-main .dropdown-menu > li > a:hover{background:rgba(255,255,255,.07);color:#fff}
.navbar-main .navbar-toggle{border-color:rgba(255,255,255,.25)}
.navbar-main .navbar-toggle .icon-bar{background:#fff}

/* --- home banner + shortcuts --------------------------------------------- */
section#home-banner{
  background:var(--x-ink);
  background-image:radial-gradient(60% 120% at 70% 0%,rgba(242,162,13,.26),transparent 62%);
  padding:56px 0;
  border:0;
}
section#home-banner h2{color:#fff;font-weight:800;font-size:30px;letter-spacing:-.02em}
section#home-banner .form-control{border-radius:var(--r-sm) 0 0 var(--r-sm);border:0;height:52px}
section#home-banner .btn{background:var(--x-orange);color:#14100A;border:0;font-weight:700}
section#home-banner .btn:hover{background:var(--x-orange-400)}

.home-shortcuts{background:var(--x-ink-900);border-top:1px solid rgba(255,255,255,.07)}
.home-shortcuts .lead{color:var(--x-on-dark-2)}
.home-shortcuts li a{color:var(--x-on-dark-2)}
.home-shortcuts li a:hover{color:var(--x-orange-400)}
.home-shortcuts li i{color:var(--x-orange)}

/* --- page body ------------------------------------------------------------ */
section#main-body{background:var(--x-bg-alt);padding:40px 0 56px}
.header-lined{margin-bottom:26px}
div.header-lined h1{
  font-size:26px;
  font-weight:800;
  color:var(--x-text);
  border-bottom:1px solid var(--x-line);
  padding-bottom:12px;
  margin-bottom:12px;
}
div.header-lined small{color:var(--x-text-3);font-weight:500}
div.header-lined .breadcrumb{background:none;padding:0;font-size:13px;margin-top:0}
div.header-lined .breadcrumb li a{color:var(--x-text-3)}
div.header-lined .breadcrumb li a:hover{color:var(--x-orange-600)}
div.header-lined .breadcrumb > .active{color:var(--x-text-2)}

/* --- panels / cards ------------------------------------------------------- */
.panel{
  border:1px solid var(--x-line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
  background:#fff;
  overflow:hidden;
}
.panel > .panel-heading{
  background:#fff;
  border-bottom:1px solid var(--x-line);
  padding:16px 20px;
  font-weight:700;
  color:var(--x-text);
}
.panel-primary > .panel-heading,
.panel-default > .panel-heading{background:#fff;color:var(--x-text);border-color:var(--x-line)}
.panel-primary{border-color:var(--x-line)}
.panel > .panel-body{padding:20px}
.panel > .panel-footer{background:var(--x-bg-alt);border-top:1px solid var(--x-line)}
.panel-sidebar .panel-heading{background:var(--x-ink);color:#fff;border-bottom:0}
.panel-sidebar .panel-title{color:#fff;font-weight:700}
.panel-sidebar .list-group-item{border-color:var(--x-line);font-size:14px}
.panel-sidebar .list-group-item:hover{background:var(--x-orange-tint);color:var(--x-orange-600)}
.panel-sidebar a.list-group-item.active,
a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus,
.list-group-item.active{
  background-color:var(--x-orange-tint);
  border-color:var(--x-orange-line);
  color:var(--x-orange-600);
  font-weight:700;
}
.list-group-item{border-color:var(--x-line)}

/* --- buttons -------------------------------------------------------------- */
.btn{
  border-radius:var(--r-pill);
  font-weight:700;
  font-size:14px;
  padding:9px 20px;
  border-width:1.5px;
  transition:background .16s ease,border-color .16s ease,transform .16s ease,color .16s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary,.btn-info{
  background:var(--x-orange);
  border-color:var(--x-orange);
  color:#14100A;
  box-shadow:var(--sh-glow);
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,
.btn-primary.active,.open > .dropdown-toggle.btn-primary,
.btn-info:hover,.btn-info:focus{
  background:var(--x-orange-400);
  border-color:var(--x-orange-400);
  color:#14100A;
}
.btn-default{background:#fff;border-color:var(--x-line);color:var(--x-text)}
.btn-default:hover{border-color:var(--x-orange);color:var(--x-orange-600);background:var(--x-orange-tint)}
.btn-success{background:var(--x-success);border-color:var(--x-success);color:#fff}
.btn-danger{background:var(--x-danger);border-color:var(--x-danger)}
.btn-link{color:var(--x-orange-600)}
.btn-lg{padding:13px 28px;font-size:16px}
.btn-block{display:block;width:100%}

/* --- forms ---------------------------------------------------------------- */
.form-control{
  border:1px solid var(--x-line);
  border-radius:var(--r-sm);
  box-shadow:none;
  height:44px;
  padding:10px 14px;
  font-size:14.5px;
  color:var(--x-text);
}
textarea.form-control{height:auto}
.form-control:focus{
  border-color:var(--x-orange);
  box-shadow:0 0 0 3px var(--x-orange-tint);
}
label,.control-label{font-weight:600;color:var(--x-text-2);font-size:13.5px}
.input-group-addon{background:var(--x-bg-alt);border-color:var(--x-line);border-radius:var(--r-sm)}
.checkbox label,.radio label{font-weight:500}

/* --- login + registration ------------------------------------------------- */
section#main-body .logincontainer,
.login-box{
  max-width:460px;
  margin:0 auto;
  background:#fff;
  border:1px solid var(--x-line);
  border-radius:var(--r-lg);
  padding:34px 30px;
  box-shadow:var(--sh-md);
}
#registration .sub-heading span{background:var(--x-bg-alt);color:var(--x-text-3);font-weight:700;letter-spacing:.06em}
#registration .form-control{border-radius:var(--r-sm)}
#registration .prepend-icon .field-icon i{color:var(--x-text-3)}
#registration .form-control:focus{border-color:var(--x-orange);box-shadow:0 0 0 3px var(--x-orange-tint)}
.btn-social,.btn-facebook,.btn-twitter,.btn-social.btn-google{border-radius:var(--r-pill)}

/* --- order form: standard cart ------------------------------------------- */
#order-standard_cart .products .product,
#order-standard_cart .product{
  border:1px solid var(--x-line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
  overflow:hidden;
  background:#fff;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
#order-standard_cart .product:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--x-orange-line)}
#order-standard_cart .product header,
#order-standard_cart .product .product-header{
  background:var(--x-ink);
  color:#fff;
  border:0;
  padding:16px 18px;
}
#order-standard_cart .product header h3,
#order-standard_cart .product .product-header h3{
  color:#fff;
  font-weight:700;
  font-size:16px;
  margin:0;
  line-height:1.35;
}
#order-standard_cart .product .product-body,
#order-standard_cart .product .panel-body{padding:18px}
#order-standard_cart .product ul{padding-left:18px;margin:0}
#order-standard_cart .product footer{padding:16px 18px}
#order-standard_cart .product .product-desc{color:var(--x-text-2)}
#order-standard_cart .product .price,
#order-standard_cart .product footer{background:var(--x-bg-alt);border-top:1px solid var(--x-line)}
#order-standard_cart .product .price{color:var(--x-text);font-weight:800}
#order-standard_cart .cat-list li a,
#order-standard_cart .product-group-nav li a{border-radius:var(--r-sm)}
#order-standard_cart .cat-list li.active a,
#order-standard_cart .product-group-nav li.active a{
  background:var(--x-orange-tint);
  color:var(--x-orange-600);
  font-weight:700;
}
#order-standard_cart .view-cart-items,
#order-standard_cart .summary-container{border-radius:var(--r-lg);border-color:var(--x-line)}
#order-standard_cart .order-summary,
.order-summary{background:#fff;border:1px solid var(--x-line);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
#order-standard_cart .cycle-selector .btn,
.cycle-selector .btn{border-radius:var(--r-pill)}

/* generic cart / checkout containers used across the order form templates */
.cart-body,.checkout-container,#frmCheckout .panel{border-radius:var(--r-lg)}
#frmCheckout .panel-heading{background:#fff}
.summary-container .btn-checkout,
#btnCompleteOrder{width:100%}

/* --- tables --------------------------------------------------------------- */
.table > thead > tr > th{
  border-bottom:1px solid var(--x-line);
  background:var(--x-bg-alt);
  font-weight:700;
  font-size:13px;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--x-text-3);
}
.table > tbody > tr > td{border-color:var(--x-line);vertical-align:middle}
.table-hover > tbody > tr:hover{background:var(--x-orange-tint)}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--x-orange)!important;
  border-color:var(--x-orange)!important;
  color:#14100A!important;
  border-radius:var(--r-sm);
}

/* --- labels, badges, alerts ---------------------------------------------- */
.label,.badge{border-radius:var(--r-pill);font-weight:700;letter-spacing:.02em;padding:4px 10px}
.label-success{background:var(--x-success)}
.label-info{background:var(--x-orange);color:#14100A}
.label-danger{background:var(--x-danger)}
.label-warning{background:var(--x-orange-400);color:#14100A}
.alert{border-radius:var(--r-md);border-width:1px;font-size:14.5px}
.alert-info{background:var(--x-orange-tint);border-color:var(--x-orange-line);color:var(--x-text)}
.alert-success{background:rgba(31,191,117,.1);border-color:rgba(31,191,117,.3);color:#0F6B43}
.alert-danger{background:rgba(229,72,77,.08);border-color:rgba(229,72,77,.3);color:#9B1D21}
.well{background:#fff;border:1px solid var(--x-line);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.progress-bar{background-color:var(--x-orange)}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover{border-color:var(--x-line);border-bottom-color:transparent;color:var(--x-orange-600);font-weight:700}
.nav-tabs > li > a:hover{border-color:transparent;background:var(--x-orange-tint)}

/* --- footer --------------------------------------------------------------- */
section#footer{
  background:var(--x-ink-900);
  border-top:1px solid rgba(255,255,255,.07);
  padding:26px 0;
  color:var(--x-on-dark-2);
}
section#footer p{color:var(--x-on-dark-2);font-size:13.5px;margin:0}
section#footer a{color:var(--x-orange-400)}
section#footer .back-to-top{background:var(--x-orange);border-radius:var(--r-sm) var(--r-sm) 0 0}
section#footer .back-to-top i{color:#14100A}

/* --- the "back to xconnvpn.com" strip added in header.tpl ---------------- */
.xconn-sitebar{background:#000;color:var(--x-on-dark-2);font-size:12.5px}
.xconn-sitebar .container{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:36px;flex-wrap:wrap;
}
.xconn-sitebar a{color:var(--x-orange-400);font-weight:700}
.xconn-sitebar a:hover{color:var(--x-orange)}
.xconn-sitebar .xconn-sitebar__links{display:flex;gap:18px;flex-wrap:wrap}

/* --- responsive ----------------------------------------------------------- */
@media (max-width:767px){
  section#header{padding:12px 0 14px;text-align:center}
  section#header .logo{display:block;margin-top:10px}
  section#header .logo img{max-height:38px;margin:0 auto}
  section#header .top-nav{float:none;text-align:center;margin:0;padding:0}
  section#header .top-nav > li{float:none;display:inline-block}
  section#home-banner{padding:38px 0}
  section#home-banner h2{font-size:22px}
  section#main-body{padding:26px 0 40px}
  .panel > .panel-body{padding:16px}
  .header-lined h1{font-size:21px}
  .btn{padding:10px 18px}
  .table-responsive{border:0}
  .xconn-sitebar .container{justify-content:center;text-align:center}
}
@media (max-width:480px){
  body{font-size:14.5px}
  #order-standard_cart .product{margin-bottom:16px}
}

/* Keep wide content inside the viewport on a phone.
   NOTE: overflow-x:hidden must NOT go on html/body here - the Six theme sets
   html,body{height:100%}, and hiding one axis turns the other into a scroll
   container, which clips the page. Constrain the content instead. */
img{max-width:100%;height:auto}
.table-responsive{-webkit-overflow-scrolling:touch}
pre,code{white-space:pre-wrap;word-break:break-word}
.panel-body,.list-group-item,.alert{overflow-wrap:anywhere}

/* ===========================================================================
   Client-area homepage blocks (homepage.tpl)
   =========================================================================== */
.xconn-billing-hero{
  background:var(--x-ink);
  background-image:radial-gradient(58% 130% at 78% 0%,rgba(242,162,13,.26),transparent 62%);
  color:#fff;
  border-radius:var(--r-lg);
  padding:38px 34px;
  margin-bottom:26px;
}
.xconn-billing-hero h2{color:#fff;font-size:28px;font-weight:800;margin:0 0 10px;letter-spacing:-.02em}
.xconn-billing-hero p{color:var(--x-on-dark-2);font-size:15.5px;max-width:62ch;margin:0 0 22px}
.xconn-billing-hero__actions{display:flex;flex-wrap:wrap;gap:12px}
.xconn-billing-hero__actions .btn-default{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.22);
  color:#fff;
}
.xconn-billing-hero__actions .btn-default:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:#fff}

.xconn-billing-tiles{margin-bottom:8px}
.xconn-billing-tiles > div{margin-bottom:18px}
.xconn-tile{
  display:block;height:100%;
  background:#fff;border:1px solid var(--x-line);border-radius:var(--r-lg);
  padding:22px 20px;box-shadow:var(--sh-sm);color:var(--x-text);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.xconn-tile:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--x-orange-line);color:var(--x-text)}
.xconn-tile i{
  display:grid;place-items:center;width:44px;height:44px;border-radius:13px;margin-bottom:14px;
  background:var(--x-orange-tint);color:var(--x-orange-600);font-size:18px;
  border:1px solid var(--x-orange-line);
}
.xconn-tile strong{display:block;font-size:15.5px;font-weight:700;margin-bottom:3px}
.xconn-tile span{display:block;font-size:13px;color:var(--x-text-3);line-height:1.45}

.xconn-billing-news{font-size:20px;font-weight:800;margin:30px 0 16px}
.announcement-single{
  background:#fff;border:1px solid var(--x-line);border-radius:var(--r-lg);
  padding:20px 22px;margin-bottom:16px;box-shadow:var(--sh-sm);
}
.announcement-single h3{font-size:16.5px;margin:0 0 10px}
.announcement-single blockquote{border-left:3px solid var(--x-orange);padding:2px 0 2px 16px;margin:0;font-size:14.5px;color:var(--x-text-2)}

@media (max-width:767px){
  .xconn-billing-hero{padding:26px 20px}
  .xconn-billing-hero h2{font-size:22px}
  .xconn-billing-hero__actions .btn{width:100%}
}