/* /templates/kenny/css/kenny.css
   Kenny Interactive Hosting • WHMCS 9.0.1 • Twenty-One child theme
*/

/* =========================
   Variables
   ========================= */
:root{
  --ki-bg0:#070a14;
  --ki-bg1:#0b1020;
  --ki-bg2:#0f1834;

  --ki-card:#0f1730;
  --ki-card2:#121c3a;

  --ki-border:rgb(255 255 255 / 10%);
  --ki-border2:rgb(255 255 255 / 14%);

  --ki-text:#e9ecff;
  --ki-muted:rgb(233 236 255 / 68%);
  --ki-dim:rgb(233 236 255 / 50%);

  --ki-blue:#1e73ff;
  --ki-blue2:#4c93ff;
  --ki-blueGlow:rgb(30 115 255 / 25%);

  --ki-warn:#ffcc00;
  --ki-bad:#ff4d4f;

  --ki-radius:16px;
  --ki-radius-sm:12px;

  --ki-shadow:0 18px 45px rgb(0 0 0 / 45%);
  --ki-shadow2:0 10px 26px rgb(0 0 0 / 35%);
}

html{color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%;height:auto}

/* =========================
   Base
   ========================= */
body.ki-body,
body.primary-bg-color{
  background:
    radial-gradient(900px 600px at 20% -10%, rgb(30 115 255 / 18%), transparent 55%),
    radial-gradient(900px 600px at 90% 20%, rgb(30 115 255 / 10%), transparent 55%),
    linear-gradient(180deg, var(--ki-bg1), var(--ki-bg0)) !important;
  color:var(--ki-text) !important;
}

a{color:inherit;}
a:hover{color:var(--ki-blue2);text-decoration:none}
.text-muted,.ki-muted{color:var(--ki-muted)!important}
h1,h2,h3,h4,h5{color:var(--ki-text)}
hr{border-color:var(--ki-border)}

/* =========================
   Header / Nav (Twenty-One)
   ========================= */
.header{background:transparent}

.bg-white {
  background-color:transparent !important;
}

.home-domain-search .input-group-wrapper {
  margin:15px 0;
  padding:6px;
  background-color:transparent;
  border:1px solid transparent;
  border-radius:.25rem
}

.domain-checker-container .input-group-box {
  margin:0 auto;
  padding:10px;
  width:100%;
  background-color:transparent !important;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  -o-border-radius:10px;
  border-radius:10px
}

table.table-list thead th {
  padding:8px;
  background-color:transparent !important;
  border-bottom:1px solid var(--ki-border)!important;
  color:#fff;
  text-align:center
}

.table-list>tbody>tr>td {
  background-color:transparent !important;
  border-bottom:1px solid var(--ki-border)!important;
}

.table-list>tbody>tr:hover>td {
  background-color:transparent !important;
  border-bottom:1px solid var(--ki-border)!important;
}

.dataTables_wrapper table.table-list {
  margin:10px 0!important;
  width:100%!important;
  border-radius:4px;
  border:1px solid var(--ki-border)!important;
}

.nav-tabs {
  border-bottom:1px solid var(--ki-border)!important;
}

div.product-details-tab-container {
  margin:0;
  padding:20px;
  border:1px solid var(--ki-border)!important;
  border-top:0;
  background-color:#fff
}

div.product-details div.product-icon {
  margin:0;
  background-color:var(--ki-card2)!important;
  border-radius:10px;
  padding:30px;
  line-height:1em;
  font-size:60px
}


.input-group>.input-group-append>.btn,
.input-group>.input-group-append>.input-group-text,
.input-group>.input-group-prepend:first-child>.btn:not(:first-child),
.input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child),
.input-group>.input-group-prepend:not(:first-child)>.btn,
.input-group>.input-group-prepend:not(:first-child)>.input-group-text {
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  color:var(--ki-text) !important;
  background-color: var(--ki-border) !important;
  border-color: var(--ki-border) !important;
  border-radius:12px!important;
}

.announcements .announcement article {
  margin-bottom:1rem;
  padding:1rem;
  background-color:transparent !important;;
  border-left:4px solid #ccc
}

.btn-o {
  max-width:100%;
  background:linear-gradient(180deg,var(--ki-card),var(--ki-card2))!important;
}

/* ✅ 4 tiles per row WITHOUT breaking Bootstrap */
.tiles .row{
  --tile-gap:20px;
  margin-left:calc(var(--tile-gap) / -2);
  margin-right:calc(var(--tile-gap) / -2);
}

.tiles .row > div{
  padding:calc(var(--tile-gap) / 2);
  flex:0 0 25%;
  max-width:25%;
}

/* 2 per row on smaller screens */
@media (max-width:1199.98px){
  .tiles .row > div{
    flex:0 0 50%;
    max-width:50%;
  }
}

/* 1 per row on phones */
@media (max-width:575.98px){
  .tiles .row > div{
    flex:0 0 100%;
    max-width:100%;
  }
}

.modal {
  top:200px !important;
  z-index: 1041 !important
}

/* Tile styling (separated) */
.tiles .tile{
  display:block;
  position:relative;
  padding:20px;
  background-color:var(--ki-bg1) !important;
  text-decoration:none;
  transition:all .3s ease;
  border-radius:10px;
  border:0; /* remove connecting borders */
}

.md-editor {
  border: 1px solid transparent !important
}

.md-editor>.btn-toolbar {
  background-color: transparent !important
}

.md-editor>.md-preview,
.md-editor>textarea.markdown-editor {
  padding:15px!important;
  border-top:1px solid var(--ki-border)!important;
  border-bottom:1px solid var(--ki-border)!important;
  background-color: #0f1834 !important;
}

.md-editor .md-footer,
.md-editor>.md-header {
  background: var(--ki-bg1) !important;
  border-top:1px solid var(--ki-border)!important;
  border-bottom:1px solid var(--ki-border)!important
}

.input-group>.custom-file:not(:last-child) .custom-file-label,
.input-group>.custom-file:not(:last-child) .custom-file-label::after {
  background-color: #0f1834 !important;
  border:1px solid var(--ki-border)!important;
}

.text-truncate {
  background-color: #0f1834 !important;
  border: 1px solid var(--ki-border) !important
}

#order-standard_cart .panel-addon .panel-price {
  background-color: var(--ki-bg1) !important;
}
#order-standard_cart .panel-addon .panel-body label {
  color:var(--ki-text)!important;
}
#order-standard_cart .view-cart-items .item {
  background-color:var(--ki-card2) !important
}
#order-standard_cart .view-cart-items-header {
  background-color: var(--ki-blueGlow) !important
}
#order-standard_cart .view-cart-items {
  border-bottom:2px solid var(--ki-blueGlow) !important;
}
#order-standard_cart .order-summary {
  background-color: var(--ki-blueGlow) !important;
  border-bottom:3px solid var(--ki-blueGlow) !important
}

#order-standard_cart .summary-container {
  background-color: var(--ki-card2) !important
}
#order-standard_cart .order-summary .btn-continue-shopping {
  color: var(--ki-text) !important
}
#order-standard_cart .empty-cart .btn {
  background-color: var(--ki-blueGlow) !important
}
#order-standard_cart label,
#order-standard_cart p.domain-renewal-desc,
.service-renewals .div-renewal-period-label {
  color: var(--ki-text) !important
}
#order-standard_cart .cc-input-container {
  background-color: var(--ki-card2) !important;
  border:1px solid var(--ki-border) !important
}

#frmCheckout.paypal_ppcpv-payment-form #creditCardInputFields ul,
#frmPayment.paypal_ppcpv-payment-form .paymethod-info:not([data-paymethod-id]) {
  border:1px solid var(--ki-border) !important;
  background-color: var(--ki-card) !important
}

.modal .modal-header {
  background-color: var(--ki-blueGlow) !important
}

@media (min-width:768px) {
  .btn-return-to-admin {
    background-color:var(--ki-blueGlow) !important;
    color:var(--ki-text) !important
  }
  .btn-return-to-admin:hover {
    background-color: var(--ki-blue) !important;
    color:#000!important
  }
}
.btn-return-to-admin .floating {
  position:fixed!important;
  top:425px;
  right:0;
  padding:5px 15px!important;
  background-color:#d7d7d7!important;
  color:#777!important;
  font-size:.9rem!important;
  border-radius:0 0 3px 3px!important;
  text-decoration:none;
  transform:rotate(90deg);
  transform-origin:top right;
  z-index:500
}
.btn-return-to-admin .floating:hover {
  background-color:#cdcdcd!important;
  color:#444!important;
  text-decoration:none
}
/* Topbar */
#header .topbar{
  background:#0b1020 !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px);
}
header.header .navbar a {
  color:#fff !important;
}

#header .topbar .btn,
#header .topbar .btn:focus,
#header .topbar .btn:hover{color:var(--ki-text)!important}
#header .topbar .input-group-text{
  background:rgb(255 255 255 / 6%)!important;
  border:1px solid var(--ki-border)!important;
  color:var(--ki-muted)!important;
}
#header .topbar .btn-active-client{
  background:rgb(255 255 255 / 6%)!important;
  border:1px solid var(--ki-border)!important;
  color:var(--ki-text)!important;
}
#main-body > .container { background:#fff }

#header .topbar .btn-active-client:hover{
  border-color:rgb(30 115 255 / 45%)!important;
  box-shadow:0 0 0 3px var(--ki-blueGlow)!important;
}
#header .topbar .btn-return-to-admin{
  background:rgb(255 255 255 / 6%)!important;
  border:1px solid rgb(255 255 255 / 20%)!important;
  color:var(--ki-text)!important;
}

/* Main navbar */
#header .navbar.navbar-light{
  background:#0f1834 !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px);
}
#header .navbar-brand,
#header .navbar-brand *{color:var(--ki-text)!important}
.logo-img{filter: drop-shadow(0 8px 18px rgb(0 0 0 / 35%))}

/* Secondary nav wrapper */
#header .main-navbar-wrapper{
  background:#0b1020 !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(10px);
}

/* Navbar links */
#header #nav .nav-link,
#header .navbar-nav .nav-link{
  color:var(--ki-text)!important;
  opacity:.92;
  border-radius:10px;
  padding:.55rem .7rem;
}
#header #nav .nav-link:hover,
#header .navbar-nav .nav-link:hover{
  background:rgb(30 115 255 / 10%)!important;
  box-shadow:0 0 0 3px var(--ki-blueGlow)!important;
}

/* Ensure header creates top stacking layer */
#header {
  position: relative;
  z-index: 100000;
}

/* Dropdown menus */
#header .dropdown-menu{
  position: absolute !important;
  z-index: 100001 !important;

  background: rgb(10 14 28 / 96%) !important;
  border: 1px solid var(--ki-border2) !important;
  box-shadow: var(--ki-shadow2) !important;
  border-radius: 14px !important;
}

/* Prevent clipping */
#header,
#header * {
  overflow: visible !important;
  border-color: transparent !important;
}

#header .dropdown-item{
  color: var(--ki-text) !important;
}

#header .dropdown-item:hover{
  background: rgb(30 115 255 / 12%) !important;
  color: var(--ki-text) !important;
}

/* Search in header */
#header .form-control{
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  color:var(--ki-text)!important;
}
#header .form-control::placeholder{color:rgba(233,236,255,.60)!important}

/* Cart badge */
.badge-info{background:var(--ki-blue)!important;color:#fff!important}

/* =========================
   Breadcrumb
   ========================= */
.master-breadcrumb{background:transparent}
.master-breadcrumb .breadcrumb{
  background:rgb(255 255 255 / 2%)!important;
  border:1px solid var(--ki-border)!important;
  border-radius:14px;
  padding:.6rem .9rem;
}
.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item a{color:var(--ki-muted)!important}
.master-breadcrumb .breadcrumb-item.active{color:var(--ki-text)!important}

/* =========================
   Cards / Panels
   ========================= */
.card{
  background:linear-gradient(180deg,var(--ki-card),var(--ki-card2))!important;
  border:1px solid var(--ki-border)!important;
  border-radius:var(--ki-radius)!important;
  box-shadow:var(--ki-shadow2)!important;
}
.card-header{
  background:rgb(255 255 255 / 3%)!important;
  border-bottom:1px solid var(--ki-border)!important;
  color:var(--ki-text)!important;
  border-top-left-radius:var(--ki-radius)!important;
  border-top-right-radius:var(--ki-radius)!important;
}
.card-footer{
  background:rgb(255 255 255 / 2%)!important;
  border-top:1px solid var(--ki-border)!important;
  border-bottom-left-radius:var(--ki-radius)!important;
  border-bottom-right-radius:var(--ki-radius)!important;
}
.list-group-item{
  background:rgb(255 255 255 / 2%)!important;
  border-color:var(--ki-border)!important;
  color:var(--ki-text)!important;
}
.panel,.panel-default,.well{
  background:linear-gradient(180deg,var(--ki-card),var(--ki-card2))!important;
  border:1px solid var(--ki-border)!important;
  border-radius:var(--ki-radius)!important;
  color:var(--ki-text)!important;
  box-shadow:var(--ki-shadow2)!important;
}

/* =========================
   Buttons
   ========================= */
.btn{border-radius:12px}
.btn-primary{
  background:linear-gradient(180deg,var(--ki-blue2),var(--ki-blue))!important;
  border:1px solid rgb(30 115 255 / 50%)!important;
  box-shadow:0 10px 24px rgb(30 115 255 / 18%)!important;
  color:#fff!important;
}
.btn-primary:hover{
  filter:brightness(1.04);
  box-shadow:0 12px 30px rgb(30 115 255 / 26%)!important;
}
.btn-outline-primary{
  border-color:rgb(30 115 255 / 55%)!important;
  color:var(--ki-blue)!important;
  background:transparent!important;
}
.btn-outline-primary:hover{
  background:rgb(30 115 255 / 12%)!important;
  color:var(--ki-blue2)!important;
  box-shadow:0 0 0 3px var(--ki-blueGlow)!important;
}
.btn-default,.btn-secondary{
  background:rgb(255 255 255 / 6%)!important;
  border:1px solid var(--ki-border)!important;
  color:var(--ki-text)!important;
}
.btn-default:hover,.btn-secondary:hover{
  background:rgb(255 255 255 / 8%)!important;
  border-color:rgb(30 115 255 / 35%)!important;
}

/* =========================
   Forms (make match header tone)
   ========================= */
.form-control,
.custom-select,
select.form-control,
textarea.form-control,
input.form-control{
  background:#0f1834 !important;
  border:1px solid rgba(255,255,255,.15) !important;
  color:var(--ki-text) !important;
  border-radius:12px!important;
}
.form-control::placeholder{color:rgba(233,236,255,.60)!important}
.form-control:focus,
.custom-select:focus{
  background:#0f1834 !important;
  border-color:var(--ki-blue)!important;
  box-shadow:0 0 0 3px var(--ki-blueGlow)!important;
  color:var(--ki-text)!important;
}
.form-control:disabled,
.form-control[readonly]{background:#0b1020 !important; opacity:.85}
.input-group .btn.btn-default{
  background:rgb(255 255 255 / 6%)!important;
  border:1px solid var(--ki-border)!important;
}

/* Checkbox / Radio */
.custom-control-label::before,
.custom-checkbox .custom-control-label::before{
  background:rgb(255 255 255 / 6%)!important;
  border:1px solid var(--ki-border)!important;
}
.custom-control-input:checked ~ .custom-control-label::before{
  background:var(--ki-blue)!important;
  border-color:var(--ki-blue)!important;
}

/* =========================
   Alerts
   ========================= */
.alert{
  border-radius:14px!important;
  border:1px solid var(--ki-border)!important;
  color:var(--ki-text)!important;
}
.alert-success{background:rgb(55 214 122 / 10%)!important;border-color:rgb(55 214 122 / 20%)!important}
.alert-info{background:rgb(30 115 255 / 10%)!important;border-color:rgb(30 115 255 / 20%)!important}
.alert-warning{background:rgb(255 204 0 / 10%)!important;border-color:rgb(255 204 0 / 18%)!important}
.alert-danger{background:rgb(255 77 79 / 10%)!important;border-color:rgb(255 77 79 / 18%)!important}

/* =========================
   Tables
   ========================= */
.table{color:var(--ki-text)!important;border-color: 1px solid azure;border: 2px solid var(--ki-border)!important;}
.table thead th{border-bottom:1px solid var(--ki-border)!important}
.table td,.table th{border-top:1px solid var(--ki-border)!important}
.table-striped tbody tr:nth-of-type(odd){background:rgb(255 255 255 / 2%)!important}
.table-hover tbody tr:hover{background:rgb(30 115 255 / 8%)!important}

.table-bordered td,
.table-bordered th {
  border:1px solid var(--ki-border)!important;
}

/* =========================
   Sidebar
   ========================= */
.sidebar{
  /* background:rgb(255 255 255 / 2%)!important; */
  border:1px solid transparent !important;
  /* border:1px solid var(--ki-border)!important; */
  border-radius:var(--ki-radius)!important;
  box-shadow:var(--ki-shadow2)!important;
}
.sidebar .list-group-item{background:transparent!important}
.sidebar .list-group-item:hover{background:rgb(30 115 255 / 10%)!important}

/* =========================
   Homepage accents (force blue)
   ========================= */
.action-icon-btns a{
  border-radius:18px!important;
  border:1px solid rgb(30 115 255 / 35%)!important;
  background:rgb(255 255 255 / 2%)!important;
  color:var(--ki-text)!important;
  box-shadow:var(--ki-shadow2)!important;
}
.action-icon-btns a:hover{
  background:rgb(30 115 255 / 10%)!important;
  border-color:rgb(30 115 255 / 55%)!important;
  box-shadow:0 0 0 3px var(--ki-blueGlow), var(--ki-shadow)!important;
}
.action-icon-btns .ico-container{
  border-radius:16px!important;
  background:rgb(30 115 255 / 12%)!important;
  border:1px solid rgb(30 115 255 / 25%)!important;
}
.action-icon-btns i{color:var(--ki-blue)!important}

.card-accent-teal,
.card-accent-pomegranate,
.card-accent-sun-flower,
.card-accent-asbestos,
.card-accent-green,
.card-accent-midnight-blue{
  background:rgb(255 255 255 / 2%)!important;
  border:1px solid rgb(30 115 255 / 35%)!important;
  color:var(--ki-text)!important;
}
.card-accent-teal:hover,
.card-accent-pomegranate:hover,
.card-accent-sun-flower:hover,
.card-accent-asbestos:hover,
.card-accent-green:hover,
.card-accent-midnight-blue:hover{
  background:rgb(30 115 255 / 10%)!important;
  border-color:rgb(30 115 255 / 55%)!important;
}

/* =========================
   Modals
   ========================= */
.modal-content{
  background:linear-gradient(180deg,var(--ki-card),var(--ki-card2))!important;
  border:1px solid var(--ki-border2)!important;
  border-radius:18px!important;
  color:var(--ki-text)!important;
}
.modal-header{border-bottom:1px solid var(--ki-border)!important}
.modal-footer{border-top:1px solid var(--ki-border)!important}
.close{color:var(--ki-text)!important;opacity:.9}
.close:hover{opacity:1}

/* =========================
   Footer
   ========================= */
.footer{
  background:rgb(7 10 20 / 65%)!important;
  border-top:1px solid var(--ki-border)!important;
  padding-top:24px;
  padding-bottom:24px;
}
.footer .nav-link,.footer .btn{color:var(--ki-muted)!important}
.footer .nav-link:hover{color:var(--ki-text)!important}
.footer .copyright{color:var(--ki-dim)!important}

/* =========================
   Localisation modal items
   ========================= */
.modal-localisation .item-selector .item{
  display:block;
  padding:12px 12px;
  border-radius:12px;
  background:rgb(255 255 255 / 3%)!important;
  border:1px solid var(--ki-border)!important;
  color:var(--ki-text)!important;
  text-align:center;
  margin-bottom:12px;
}
.modal-localisation .item-selector .item:hover{
  background:rgb(30 115 255 / 10%)!important;
  border-color:rgb(30 115 255 / 45%)!important;
}
.modal-localisation .item-selector .item.active{
  background:rgb(30 115 255 / 14%)!important;
  border-color:rgb(30 115 255 / 60%)!important;
  box-shadow:0 0 0 3px var(--ki-blueGlow)!important;
}

/* =========================
   Fullpage overlay
   ========================= */
#fullpage-overlay{background:rgb(0 0 0 / 55%)!important}
#fullpage-overlay .inner-wrapper{
  background:linear-gradient(180deg,var(--ki-card),var(--ki-card2))!important;
  border:1px solid var(--ki-border2)!important;
  border-radius:18px!important;
  box-shadow:var(--ki-shadow)!important;
  color:var(--ki-text)!important;
}

/* Small polish */
.badge{border-radius:999px}
pre,code{
  color:var(--ki-text)!important;
  background:rgb(255 255 255 / 4%)!important;
  border:1px solid var(--ki-border)!important;
  border-radius:12px!important;
}

/* ===========================================================
   FIX: WHITE CONTENT CONTAINER (Twenty-One)
   Minimal: only remove white wrappers & match header tone
   =========================================================== */

/* Kill common white wrappers inside the main body */
#main-body .bg-white,
#main-body .bg-light,
#main-body .bg-gray-100,
#main-body .bg-faded,
#main-body .content-padded,
#main-body .content-wrapper,
#main-body .main-content,
#main-body .main-content-container,
#main-body .page,
#main-body .page-content,
#main-body .content-area{
  background:transparent !important;
}

/* Make the main content frame match header tone */
#main-body{
  background:linear-gradient(180deg,#0f1834 0%,#0b1020 100%) !important;
}

/* Make ONLY the main inner container match header tone */
#main-body > .container,
#main-body > .container-fluid,
#main-body .primary-content{
  background:linear-gradient(180deg,#0f1834 0%,#0b1020 100%) !important;
  /*! border:1px solid transparent !important; */
  /*! border:1px solid rgba(255,255,255,.08) !important; */
  /*! border-radius:16px !important; */
}

/* Domain search wrappers (in case they’re the white block) */
body.ki-body .section-domain-search,
body.primary-bg-color .section-domain-search,
body.ki-body .domain-search,
body.primary-bg-color .domain-search,
body.ki-body .domain-checker,
body.primary-bg-color .domain-checker,
body.ki-body .domain-checker-container,
body.primary-bg-color .domain-checker-container,
body.ki-body .domain-checker-bg,
body.primary-bg-color .domain-checker-bg{
  background:linear-gradient(180deg,#0f1834 0%,#0b1020 100%) !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:#e9ecff !important;
}
body.ki-body .section-domain-search::before,
body.primary-bg-color .section-domain-search::before,
body.ki-body .section-domain-search::after,
body.primary-bg-color .section-domain-search::after,
body.ki-body .domain-checker-container::before,
body.primary-bg-color .domain-checker-container::before,
body.ki-body .domain-checker-container::after,
body.primary-bg-color .domain-checker-container::after{
  content:none !important;
  display:none !important;
}

/* Domain form itself stays transparent */
#frmDomainHomepage{background:transparent !important}

/* Payment icons */
.payment-list{
  float:center;
  text-align:center;
  font-family:'Open Sans',sans-serif;
  color:#90A4AE;
  list-style-type:none;
  margin:0;
}
.payment-list li{
  display:inline-block;
  margin-right:3px;
  font-size:32px;
}
.payment-list li:last-child{margin-right:0}
.payment-list li p{
  margin-bottom:0;
  color:#ffffff;
  font-family:"Open Sans";
  font-size:13px;
  margin-right:10px;
  display:table;
}
.payment-list li i{color: var(--ki-card2) !important;}
.payment-list li i:hover{
  color: var(--ki-blue2) !important;
  transition:.3s;
}