/* OffshoreDedi WHMCS System Theme v3.4
   Targeted QA fixes based on live WHMCS screenshots.
   Loaded after v3.1/v3.2 so these rules intentionally take precedence. */

:root{
  --od34-bg:#080d14;
  --od34-panel:#101720;
  --od34-panel2:#151c27;
  --od34-head:#1b2230;
  --od34-border:#303b4c;
  --od34-text:#f4f7fb;
  --od34-muted:#a8b2c1;
  --od34-blue:#318cff;
  --od34-purple:#7c3cff;
}

/* ---------------------------------------------------------
   LOGGED-OUT HEADER — add a visible Register action
   --------------------------------------------------------- */
.od-v2-register-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 19px;
  border:1px solid #344052;
  border-radius:8px;
  background:#101620;
  color:#eef3fb!important;
  font-weight:600;
  text-decoration:none!important;
  transition:.2s ease;
}
.od-v2-register-btn:hover{
  border-color:#5f6cff;
  background:#151d2b;
  color:#fff!important;
  transform:translateY(-1px);
}

/* ---------------------------------------------------------
   REGISTRATION — WHMCS has several inputs with class="field"
   but without .form-control. Force one consistent dark style.
   --------------------------------------------------------- */
#registration input.field,
#registration select.field,
#registration textarea.field,
#registration .intl-tel-input input,
#registration .iti input,
#registration input[type="text"],
#registration input[type="email"],
#registration input[type="tel"],
#registration input[type="password"],
#registration select{
  width:100%;
  min-height:38px;
  background:#171d27!important;
  color:#f4f7fb!important;
  border:1px solid #344052!important;
  border-radius:9px!important;
  box-shadow:none!important;
}
#registration input.field:focus,
#registration select.field:focus,
#registration textarea.field:focus,
#registration input:focus,
#registration select:focus{
  background:#19212d!important;
  color:#fff!important;
  border-color:#5d70ff!important;
  box-shadow:0 0 0 3px rgba(76,96,255,.14)!important;
  outline:none!important;
}
#registration input::placeholder,
#registration textarea::placeholder{
  color:#7f8999!important;
  opacity:1!important;
}
#registration input:-webkit-autofill,
#registration input:-webkit-autofill:hover,
#registration input:-webkit-autofill:focus{
  -webkit-text-fill-color:#f4f7fb!important;
  -webkit-box-shadow:0 0 0 1000px #171d27 inset!important;
  box-shadow:0 0 0 1000px #171d27 inset!important;
  transition:background-color 9999s ease-out 0s!important;
}
#registration .intl-tel-input .selected-flag,
#registration .iti__selected-country,
#registration .iti__selected-country-primary{
  background:#141b25!important;
  color:#fff!important;
}
#registration .intl-tel-input .country-list,
#registration .iti__country-list{
  background:#111823!important;
  border-color:#344052!important;
  color:#eef2f7!important;
}
#registration .intl-tel-input .country-list .country.highlight,
#registration .iti__country.iti__highlight{
  background:#1b2634!important;
}

/* ---------------------------------------------------------
   MARKETCONNECT / RECOMMENDATION PROMOS
   Fixes white 360, RapidSSL, SiteLock, CodeGuard banners on
   client home and product-details pages.
   --------------------------------------------------------- */
body .promo-container,
body .promo-banner,
body .promo-banner .content,
body .promo-banner .header,
body #mc-promo-widgets .mc-promo-manage,
body #mc-promo-widgets .mc-promo-login,
body .mc-promo-manage,
body .mc-promo-login{
  background:linear-gradient(145deg,#121923,#0d131c)!important;
  border-color:var(--od34-border)!important;
  color:#d9e1eb!important;
}
body .promo-container,
body .promo-banner,
body .mc-promo-manage,
body .mc-promo-login{
  border:1px solid var(--od34-border)!important;
  border-radius:13px!important;
  overflow:hidden!important;
}
body .promo-banner *,
body .promo-container *,
body .mc-promo-manage *,
body .mc-promo-login *{
  color:#cbd4e0!important;
}
body .promo-banner h3,
body .promo-banner h4,
body .promo-container h3,
body .promo-container h4,
body .mc-promo-manage h3,
body .mc-promo-login h3{
  color:#fff!important;
}
body .promo-banner a:not(.btn),
body .promo-container a:not(.btn),
body .mc-promo-manage a:not(.btn),
body .mc-promo-login a:not(.btn){
  color:#6eaaff!important;
}
body .promo-banner .btn,
body .promo-container .btn,
body .mc-promo-manage .btn,
body .mc-promo-login .btn{
  background:linear-gradient(100deg,#318cff,#7c3cff)!important;
  border-color:#625df3!important;
  color:#fff!important;
  text-decoration:none!important;
  box-shadow:0 8px 22px rgba(78,75,255,.14)!important;
}
/* Preserve useful vendor accent line without a white body */
body .promo-banner.symantec{border-top-color:#4da24c!important}
body .promo-banner.sitelock{border-top-color:#f2952d!important}
body .promo-banner.codeguard{border-top-color:#a9cc5f!important}
body .promo-banner.sitebuilder{border-top-color:#ff3377!important}

/* ---------------------------------------------------------
   PRODUCT DETAILS — remove remaining white surfaces
   --------------------------------------------------------- */
div.product-details div.product-icon{
  background:linear-gradient(145deg,#18212e,#101720)!important;
  border:1px solid #334052!important;
  color:#f2f5fa!important;
}
div.product-details div.product-icon i,
div.product-details div.product-icon .fa,
div.product-details div.product-icon .fas,
div.product-details div.product-icon .far{
  color:#7fa7ff!important;
}
.product-details-tab-container,
.product-details-tab-container.bg-white,
div.product-details-tab-container{
  background:#101720!important;
  border-color:#303b4c!important;
  color:#dce3ed!important;
}
.product-details-tab-container .tab-pane,
.product-details-tab-container .row,
.product-details-tab-container strong,
.product-details-tab-container div,
.product-details-tab-container span{
  color:inherit;
}
.product-details-tab-container strong{color:#f4f7fb!important}
.responsive-tabs-sm-connector .channel,
.responsive-tabs-sm-connector .bottom-border{border-color:#303b4c!important}
.nav-tabs .nav-link{color:#b9c3d2!important}
.nav-tabs .nav-link.active{
  background:#171e29!important;
  border-color:#303b4c!important #303b4c #171e29!important;
  color:#fff!important;
}
.module-client-area{color:#dce3ed!important}

/* Some module/MarketConnect output injects Bootstrap bg-white directly. */
#tabOverview .bg-white,
#tabOverview .card.bg-white,
#tabOverview .panel.bg-white,
#tabOverview .module-client-area .bg-white,
#tabOverview #mc-promo-widgets .bg-white{
  background:#101720!important;
  color:#dce3ed!important;
  border-color:#303b4c!important;
}

/* ---------------------------------------------------------
   MARKDOWN SUPPORT EDITOR — toolbar, editor, preview & footer
   --------------------------------------------------------- */
body .primary-content .md-editor,
body .primary-content div.md-editor{
  background:#111823!important;
  border:1px solid #344052!important;
  border-radius:10px!important;
  overflow:hidden!important;
  box-shadow:none!important;
}
body .primary-content .md-editor>.md-header,
body .primary-content .md-editor .md-header,
body .primary-content .md-editor>.btn-toolbar{
  background:#171e29!important;
  border:0!important;
  border-bottom:1px solid #344052!important;
  color:#eef2f8!important;
}
body .primary-content .md-editor>textarea.markdown-editor,
body .primary-content .md-editor>.md-preview,
body .primary-content .md-editor .md-input{
  background:#101720!important;
  color:#f2f5fa!important;
  border-color:#303b4c!important;
}
body .primary-content .md-editor>textarea.markdown-editor:focus,
body .primary-content .md-editor .md-input:focus{
  background:#121a25!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 1px #596eff!important;
}
body .primary-content .md-editor>.md-preview *,
body .primary-content .md-editor .md-preview *{color:#dce3ed!important}
body .primary-content .md-editor .md-footer,
body .primary-content .markdown-editor-status{
  background:#171e29!important;
  color:#8f9aad!important;
  border-color:#303b4c!important;
}
body .primary-content .md-editor .md-controls .md-control{color:#9aa6b8!important}
body .primary-content .md-editor .md-controls .md-control:hover{color:#fff!important}
body .primary-content .md-editor.md-fullscreen-mode,
body .primary-content .md-editor.md-fullscreen-mode .md-input,
body .primary-content .md-editor.md-fullscreen-mode .md-preview{
  background:#080d14!important;
  color:#f2f5fa!important;
}

/* ---------------------------------------------------------
   INVOICE PAYMENT METHOD — make select clearly look selectable
   --------------------------------------------------------- */
.invoice-container select.od-v34-gateway-select,
.invoice-container .od-v34-gateway-select{
  -webkit-appearance:none!important;
  -moz-appearance:none!important;
  appearance:none!important;
  min-width:250px;
  padding-right:42px!important;
  cursor:pointer!important;
  background-color:#fff!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath fill='%23212b38' d='M1.2.8 7 6.1 12.8.8 14 2 7 8 0 2z'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 14px center!important;
  background-size:14px 8px!important;
  color:#1e2733!important;
}
.invoice-container select.od-v34-gateway-select:hover,
.invoice-container select.od-v34-gateway-select:focus{
  border-color:#6475ff!important;
  box-shadow:0 0 0 3px rgba(76,96,255,.12)!important;
  outline:none!important;
}

/* ---------------------------------------------------------
   A few common white utility surfaces that appear inside
   client-facing cards. Keep standalone invoice excluded.
   --------------------------------------------------------- */
body:not(.invoice-print) #main-body .primary-content .table-responsive:not(.invoice-container),
body:not(.invoice-print) #main-body .primary-content .well{
  border-color:#303b4c!important;
}

@media(max-width:1199px){
  .od-v2-register-btn{width:100%;margin-top:6px}
}
@media(max-width:767px){
  .invoice-container select.od-v34-gateway-select{min-width:0;width:100%!important}
}