/* ================================================
   StreamLine VPN — WHMCS Custom Theme
   Child of Twenty-One
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --slvpn-navy: #060d1f;
  --slvpn-navy2: #0a1428;
  --slvpn-navy3: #0d1e3a;
  --slvpn-teal: #4DF0A0;
  --slvpn-teal2: #00c8ff;
  --slvpn-border: rgba(77,240,160,0.12);
  --slvpn-text: #e8f0ff;
  --slvpn-text-dim: #6a7fa8;
}

/* ---- BASE ---- */
body {
  background: var(--slvpn-navy) !important;
  color: var(--slvpn-text) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
}

/* ---- NAVBAR ---- */
.navbar, .navbar-default {
  background: rgba(6,13,31,0.95) !important;
  border-bottom: 1px solid var(--slvpn-border) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: none !important;
}
.navbar-brand img {
  max-height: 40px !important;
}
.navbar-default .navbar-nav > li > a {
  color: var(--slvpn-text-dim) !important;
  font-size: 14px !important;
  transition: color 0.2s !important;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li.active > a {
  color: var(--slvpn-teal) !important;
  background: transparent !important;
}
.navbar-default .navbar-nav > li.active > a {
  border-bottom: 2px solid var(--slvpn-teal) !important;
}

/* ---- MAIN CONTENT AREA ---- */
#main-body, .main-body, .container-fluid {
  background: var(--slvpn-navy) !important;
}
.panel, .card {
  background: var(--slvpn-navy2) !important;
  border: 1px solid var(--slvpn-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: var(--slvpn-text) !important;
}
.panel-heading, .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--slvpn-border) !important;
  color: var(--slvpn-text) !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}
.panel-body, .card-body {
  color: var(--slvpn-text) !important;
}

/* ---- HEADINGS ---- */
h1, h2, h3, h4, h5, h6,
.panel-title, .section-title {
  font-family: 'Syne', sans-serif !important;
  color: var(--slvpn-text) !important;
  font-weight: 700 !important;
}

/* ---- BUTTONS ---- */
.btn-primary, .btn-success {
  background: linear-gradient(135deg, var(--slvpn-teal), var(--slvpn-teal2)) !important;
  border: none !important;
  color: #060d1f !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  transition: opacity 0.2s !important;
  box-shadow: 0 0 20px rgba(77,240,160,0.2) !important;
}
.btn-primary:hover, .btn-success:hover {
  opacity: 0.85 !important;
  color: #060d1f !important;
}
.btn-default {
  background: transparent !important;
  border: 1px solid var(--slvpn-border) !important;
  color: var(--slvpn-text) !important;
  border-radius: 8px !important;
}
.btn-default:hover {
  border-color: var(--slvpn-teal) !important;
  background: rgba(77,240,160,0.08) !important;
  color: var(--slvpn-teal) !important;
}
.btn-danger {
  background: rgba(255,68,102,0.15) !important;
  border: 1px solid rgba(255,68,102,0.3) !important;
  color: #ff4466 !important;
  border-radius: 8px !important;
}

/* ---- FORMS ---- */
.form-control, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], select, textarea {
  background: var(--slvpn-navy) !important;
  border: 1px solid rgba(77,240,160,0.15) !important;
  border-radius: 8px !important;
  color: var(--slvpn-text) !important;
  transition: border-color 0.2s !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--slvpn-teal) !important;
  box-shadow: 0 0 0 2px rgba(77,240,160,0.1) !important;
  background: var(--slvpn-navy) !important;
  color: var(--slvpn-text) !important;
  outline: none !important;
}
label {
  color: var(--slvpn-text-dim) !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
.input-group-addon {
  background: var(--slvpn-navy3) !important;
  border-color: rgba(77,240,160,0.15) !important;
  color: var(--slvpn-text-dim) !important;
}

/* ---- TABLES ---- */
.table {
  color: var(--slvpn-text) !important;
}
.table > thead > tr > th {
  border-bottom: 1px solid var(--slvpn-border) !important;
  color: var(--slvpn-text-dim) !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  background: transparent !important;
  font-weight: 500 !important;
}
.table > tbody > tr > td {
  border-top: 1px solid rgba(255,255,255,0.04) !important;
  color: var(--slvpn-text) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background: rgba(255,255,255,0.02) !important;
}
.table > tbody > tr:hover > td {
  background: rgba(77,240,160,0.03) !important;
}

/* ---- ALERTS ---- */
.alert-success {
  background: rgba(77,240,160,0.08) !important;
  border: 1px solid rgba(77,240,160,0.25) !important;
  color: var(--slvpn-teal) !important;
  border-radius: 8px !important;
}
.alert-danger, .alert-error {
  background: rgba(255,68,102,0.08) !important;
  border: 1px solid rgba(255,68,102,0.25) !important;
  color: #ff6644 !important;
  border-radius: 8px !important;
}
.alert-info {
  background: rgba(0,200,255,0.08) !important;
  border: 1px solid rgba(0,200,255,0.2) !important;
  color: var(--slvpn-teal2) !important;
  border-radius: 8px !important;
}
.alert-warning {
  background: rgba(240,196,77,0.08) !important;
  border: 1px solid rgba(240,196,77,0.2) !important;
  color: #f0c44d !important;
  border-radius: 8px !important;
}

/* ---- BADGES & LABELS ---- */
.label-success, .badge-success {
  background: rgba(77,240,160,0.15) !important;
  color: var(--slvpn-teal) !important;
}
.label-danger, .badge-danger {
  background: rgba(255,68,102,0.15) !important;
  color: #ff4466 !important;
}
.label-warning, .badge-warning {
  background: rgba(240,196,77,0.15) !important;
  color: #f0c44d !important;
}

/* ---- SIDEBAR / CLIENT AREA NAV ---- */
.list-group-item {
  background: var(--slvpn-navy2) !important;
  border-color: var(--slvpn-border) !important;
  color: var(--slvpn-text-dim) !important;
  transition: all 0.2s !important;
}
.list-group-item:hover, .list-group-item.active {
  background: rgba(77,240,160,0.08) !important;
  color: var(--slvpn-teal) !important;
  border-color: var(--slvpn-border) !important;
}
.list-group-item.active {
  border-left: 3px solid var(--slvpn-teal) !important;
}

/* ---- PRODUCT/ORDER CARDS ---- */
.product-box, .order-form-product {
  background: var(--slvpn-navy2) !important;
  border: 1px solid var(--slvpn-border) !important;
  border-radius: 12px !important;
  transition: border-color 0.3s, transform 0.3s !important;
}
.product-box:hover, .order-form-product:hover {
  border-color: rgba(77,240,160,0.35) !important;
  transform: translateY(-3px) !important;
}
.product-box .price, .pricing-price {
  color: var(--slvpn-teal) !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
}

/* ---- PAGINATION ---- */
.pagination > li > a {
  background: var(--slvpn-navy2) !important;
  border-color: var(--slvpn-border) !important;
  color: var(--slvpn-text-dim) !important;
}
.pagination > li > a:hover,
.pagination > .active > a {
  background: rgba(77,240,160,0.1) !important;
  border-color: var(--slvpn-teal) !important;
  color: var(--slvpn-teal) !important;
}

/* ---- FOOTER ---- */
footer, #footer {
  background: var(--slvpn-navy2) !important;
  border-top: 1px solid var(--slvpn-border) !important;
  color: var(--slvpn-text-dim) !important;
  font-size: 13px !important;
}
footer a, #footer a {
  color: var(--slvpn-teal) !important;
}

/* ---- DROPDOWN MENUS ---- */
.dropdown-menu {
  background: var(--slvpn-navy2) !important;
  border: 1px solid var(--slvpn-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
.dropdown-menu > li > a {
  color: var(--slvpn-text-dim) !important;
  padding: 10px 16px !important;
}
.dropdown-menu > li > a:hover {
  background: rgba(77,240,160,0.08) !important;
  color: var(--slvpn-teal) !important;
}

/* ---- BREADCRUMBS ---- */
.breadcrumb {
  background: transparent !important;
  color: var(--slvpn-text-dim) !important;
  font-size: 13px !important;
}
.breadcrumb > li + li::before {
  color: var(--slvpn-text-dim) !important;
}
.breadcrumb > .active {
  color: var(--slvpn-teal) !important;
}

/* ---- LINKS ---- */
a { color: var(--slvpn-teal) !important; }
a:hover { color: var(--slvpn-teal2) !important; opacity: 0.85; }

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--slvpn-navy); }
::-webkit-scrollbar-thumb { background: rgba(77,240,160,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(77,240,160,0.4); }

/* ---- MISC ---- */
hr { border-color: var(--slvpn-border) !important; }
.text-muted { color: var(--slvpn-text-dim) !important; }
.well { background: var(--slvpn-navy3) !important; border-color: var(--slvpn-border) !important; }
blockquote { border-left-color: var(--slvpn-teal) !important; }
code { background: var(--slvpn-navy3) !important; color: var(--slvpn-teal) !important; border: none !important; }

/* ---- ADDITIONAL FIXES ---- */

/* Hero/banner area */
.hero-section, .jumbotron, .home-hero,
section.hero, div.hero, .banner,
.homepage-hero, [class*="hero"] {
  background: var(--slvpn-navy) !important;
  color: var(--slvpn-text) !important;
}

/* Domain search area */
.domain-search-wrapper, .domain-search,
.search-domain, #domain-search,
.home-search { 
  background: var(--slvpn-navy2) !important;
  border: 1px solid var(--slvpn-border) !important;
  border-radius: 12px !important;
}
.domain-search input, #inputDomain {
  background: var(--slvpn-navy) !important;
  color: var(--slvpn-text) !important;
  border-color: var(--slvpn-border) !important;
}

/* Page background sections */
section, .section, .container,
.container-fluid > .row,
.content-area, #content,
.main-content, .page-content {
  background: var(--slvpn-navy) !important;
}

/* Icon boxes */
.icon-box, .feature-box,
.home-icon-box, .service-box {
  background: var(--slvpn-navy2) !important;
  border: 1px solid var(--slvpn-border) !important;
  border-radius: 12px !important;
  transition: border-color 0.3s, transform 0.3s !important;
}
.icon-box:hover, .feature-box:hover {
  border-color: rgba(77,240,160,0.3) !important;
  transform: translateY(-3px) !important;
}
.icon-box i, .icon-box svg,
.feature-box i, .feature-box svg {
  color: var(--slvpn-teal) !important;
  fill: var(--slvpn-teal) !important;
}

/* Fix any remaining white backgrounds */
.bg-white, .bg-light, .bg-gray,
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background: white"],
[style*="background-color: white"],
[style*="background-color:#fff"] {
  background: var(--slvpn-navy2) !important;
}

/* Text colours */
p, span, div, li {
  color: var(--slvpn-text);
}
.text-primary { color: var(--slvpn-teal) !important; }

/* Row backgrounds */
.row { background: transparent !important; }

/* Fix input placeholder */
::placeholder { color: var(--slvpn-text-dim) !important; opacity: 1 !important; }

/* ---- TARGETED FIXES ROUND 3 ---- */

/* Full width background fix */
html, body, #wrapper, #main-body,
.main-body, #main, .container-fluid {
  background-color: #060d1f !important;
}

/* Remove white side strips */
body > div, body > section, 
.navbar-header, .navbar-collapse,
.header-area, .top-bar {
  background: transparent !important;
}

/* Domain search banner */
.home-search-section,
.domain-checker, .domain-checker-section,
div[class*="domain"], section[class*="domain"],
.slider, .slider-section, .top-section,
.page-header {
  background: #0a1428 !important;
  border-bottom: 1px solid rgba(77,240,160,0.12) !important;
}

/* Icon feature boxes */
.feature-icon-box, .icon-feature,
a.panel, a.panel-default,
.panel.text-center, div.text-center.panel {
  background: #0a1428 !important;
  border: 1px solid rgba(77,240,160,0.12) !important;
  border-radius: 12px !important;
}
.panel.text-center:hover,
div.text-center.panel:hover {
  border-color: rgba(77,240,160,0.3) !important;
  transform: translateY(-3px) !important;
}

/* Fix any grey/light section backgrounds */
.grey-bg, .gray-bg, .light-bg,
.section-grey, .section-gray,
[class*="bg-grey"], [class*="bg-gray"],
.even-section, .alt-section {
  background: #0d1e3a !important;
}

/* Ensure navbar background extends full width */
.navbar { width: 100% !important; }
.navbar-default { margin: 0 !important; }

/* Fix breadcrumb bar */
.breadcrumb-bar, .sub-header,
.page-breadcrumbs, #breadcrumb {
  background: #0a1428 !important;
  border-bottom: 1px solid rgba(77,240,160,0.08) !important;
}

/* ---- EXACT CLASS FIXES ---- */

/* Breadcrumb nav */
nav.master-breadcrumb,
.master-breadcrumb {
  background: #0a1428 !important;
  border-bottom: 1px solid rgba(77,240,160,0.08) !important;
}
nav.master-breadcrumb * {
  color: #6a7fa8 !important;
}

/* Card accent green boxes (icon feature boxes) */
a.card-accent-green,
.card-accent-green {
  background: #0a1428 !important;
  border: 1px solid rgba(77,240,160,0.15) !important;
  border-radius: 12px !important;
  color: #e8f0ff !important;
  transition: border-color 0.3s, transform 0.3s !important;
}
a.card-accent-green:hover,
.card-accent-green:hover {
  background: #0d1e3a !important;
  border-color: rgba(77,240,160,0.35) !important;
  transform: translateY(-3px) !important;
  color: #4DF0A0 !important;
}
a.card-accent-green i,
a.card-accent-green svg,
.card-accent-green i {
  color: #4DF0A0 !important;
  fill: #4DF0A0 !important;
}

/* ---- ALL CARD ACCENT VARIANTS ---- */
[class*="card-accent-"] {
  background: #0a1428 !important;
  border: 1px solid rgba(77,240,160,0.15) !important;
  border-radius: 12px !important;
  color: #e8f0ff !important;
  transition: border-color 0.3s, transform 0.3s !important;
}
[class*="card-accent-"]:hover {
  background: #0d1e3a !important;
  border-color: rgba(77,240,160,0.35) !important;
  transform: translateY(-3px) !important;
}
[class*="card-accent-"] i,
[class*="card-accent-"] svg {
  color: #4DF0A0 !important;
  fill: #4DF0A0 !important;
}
[class*="card-accent-"] span,
[class*="card-accent-"] p {
  color: #6a7fa8 !important;
}

/* ---- STORE PRODUCT CARDS ---- */
.product.clearfix,
div[id^="product"].product {
  background: #0a1428 !important;
  border: 1px solid rgba(77,240,160,0.15) !important;
  border-radius: 12px !important;
  color: #e8f0ff !important;
  transition: border-color 0.3s, transform 0.3s !important;
}
div[id^="product"].product:hover {
  border-color: rgba(77,240,160,0.35) !important;
  transform: translateY(-3px) !important;
}
div[id^="product"].product h3,
div[id^="product"].product .product-name {
  color: #e8f0ff !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
}
div[id^="product"].product p,
div[id^="product"].product .product-description {
  color: #6a7fa8 !important;
}
div[id^="product"].product .price-block,
div[id^="product"].product .price {
  background: #060d1f !important;
  border-radius: 8px !important;
  color: #4DF0A0 !important;
}

/* ---- PRODUCT CARD HEADERS ---- */
div[id^="product"].product header,
div[id^="product"].product > header,
.product header, .product .product-header {
  background: #0d1e3a !important;
  border-bottom: 1px solid rgba(77,240,160,0.15) !important;
  border-radius: 12px 12px 0 0 !important;
  color: #4DF0A0 !important;
}
div[id^="product"].product header *,
.product header * {
  color: #4DF0A0 !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
}

/* ---- PRODUCT DESCRIPTION TEXT ---- */
p[id$="-description"],
[id$="-description"] {
  color: #c8d4f0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* ---- CHECKOUT PAGE FIXES ---- */

/* Promo code tab */
a.nav-link.active,
.nav-link.active {
  background: #0d1e3a !important;
  border: 1px solid rgba(77,240,160,0.2) !important;
  color: #4DF0A0 !important;
  border-radius: 8px 8px 0 0 !important;
}

/* Promo code content area */
div.tab-content {
  background: #0a1428 !important;
  border: 1px solid rgba(77,240,160,0.12) !important;
  border-radius: 0 8px 8px 8px !important;
}

/* Order Summary heading */
h2.font-size-30 {
  background: #0d1e3a !important;
  color: #4DF0A0 !important;
  border-radius: 8px 8px 0 0 !important;
  font-family: 'Syne', sans-serif !important;
}

/* Order Summary container */
div.summary-container {
  background: #0a1428 !important;
  border: 1px solid rgba(77,240,160,0.15) !important;
  border-radius: 0 0 8px 8px !important;
  color: #e8f0ff !important;
}
div.summary-container * {
  color: #e8f0ff !important;
}
div.summary-container .total,
div.summary-container [class*="total"] {
  color: #4DF0A0 !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
}

/* ---- ORDER SUMMARY BOX ---- */
div#orderSummary.order-summary,
.order-summary {
  background: #0a1428 !important;
  border: 1px solid rgba(77,240,160,0.15) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
div#orderSummary.order-summary * {
  color: #e8f0ff !important;
}
div#orderSummary.order-summary [class*="total"],
div#orderSummary.order-summary .total-price,
div#orderSummary.order-summary h2,
div#orderSummary.order-summary h3 {
  color: #4DF0A0 !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
}
/* Remove the gold/brown border */
div#orderSummary.order-summary,
div.summary-container,
h2.font-size-30 {
  border-color: rgba(77,240,160,0.15) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ---- ARTICLE / ANNOUNCEMENT ELEMENTS ---- */
article {
  background: #0a1428 !important;
  border: 1px solid rgba(77,240,160,0.12) !important;
  border-radius: 12px !important;
  color: #e8f0ff !important;
}
article * {
  color: #e8f0ff !important;
}
article p, article div {
  background: transparent !important;
}

/* ---- LOGIN PAGE INPUT FIXES ---- */

/* Input group icon prefix */
.input-group-prepend,
.input-group-prepend .input-group-text,
.input-group-addon {
  background: linear-gradient(135deg, #4DF0A0, #00c8ff) !important;
  border: none !important;
  color: #060d1f !important;
  border-radius: 8px 0 0 8px !important;
}
.input-group-prepend .input-group-text i,
.input-group-prepend .input-group-text svg,
.input-group-addon i {
  color: #060d1f !important;
  fill: #060d1f !important;
}

/* Input fields on login */
.input-group input,
.input-group .form-control {
  background: #0a1428 !important;
  border: 1px solid rgba(77,240,160,0.15) !important;
  border-left: none !important;
  color: #e8f0ff !important;
  border-radius: 0 8px 8px 0 !important;
}
.input-group input:focus,
.input-group .form-control:focus {
  border-color: #4DF0A0 !important;
  box-shadow: none !important;
}

/* Show/hide password icon */
.input-group-append,
.input-group-append .input-group-text {
  background: #0a1428 !important;
  border: 1px solid rgba(77,240,160,0.15) !important;
  border-left: none !important;
  color: #6a7fa8 !important;
  border-radius: 0 8px 8px 0 !important;
}

/* ---- INPUT GROUP TEXT ICONS ---- */
span.input-group-text,
.input-group-text {
  background: linear-gradient(135deg, #4DF0A0, #00c8ff) !important;
  border: none !important;
  color: #060d1f !important;
}
span.input-group-text i,
span.input-group-text svg,
span.input-group-text * {
  color: #060d1f !important;
  fill: #060d1f !important;
}

/* ---- CENTRE PRODUCT CARDS ---- */
.products-container, .product-list,
.row.equal-height, .row.products,
div[class*="product-list"],
.store-products {
  justify-content: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
}

div[id^="product"].product {
  float: none !important;
}

/* Centre the product grid columns */
.col-md-4.product-col,
[class*="col-"][class*="product"],
div[id^="product"].product.col-md-4,
div[id^="product"].product.col-sm-6 {
  float: none !important;
  display: inline-block !important;
  vertical-align: top !important;
}

/* ---- CENTRE CARD COLUMNS ---- */
div.card-columns.home {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  column-count: unset !important;
  gap: 20px !important;
}
div.card-columns.home > * {
  flex: 0 0 auto !important;
  width: 320px !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* ================================================
   ROUND 4 FIXES — 9.0.6 light patches + dropdown z-index
   ================================================ */

/* ---- STAT TILES (Services / Quotes / Tickets / Invoices) ---- */
a.tile, .tile,
.stat-tile, .panel.tile,
[class*="tile"] {
  background: #0a1428 !important;
  border: 1px solid rgba(77,240,160,0.12) !important;
  color: #e8f0ff !important;
}
a.tile:hover, .tile:hover {
  border-color: rgba(77,240,160,0.35) !important;
  background: #0d1e3a !important;
}
a.tile *, .tile * { color: #e8f0ff !important; }
.tile .h1, .tile h1, .tile .stat-value { color: #4DF0A0 !important; }

/* ---- PRIMARY BG COLOR OVERRIDE (theme.min.css uses #f1f1f1) ---- */
.primary-bg-color {
  background-color: #0a1428 !important;
}

/* ---- DATA TABLES (Services / Invoices / Tickets lists) ---- */
.table.table-list,
table.table-list,
#tableServicesList, #tableInvoicesList, #tableTicketsList,
.dataTable, .dataTables_wrapper,
table[id^="table"] {
  background: #0a1428 !important;
  color: #e8f0ff !important;
}
.table.table-list thead th,
table.table-list thead th,
.dataTable thead th,
table[id^="table"] thead th {
  background: #0d1e3a !important;
  color: #6a7fa8 !important;
  border-bottom: 1px solid rgba(77,240,160,0.15) !important;
}
.table.table-list tbody tr,
.dataTable tbody tr,
table[id^="table"] tbody tr {
  background: #0a1428 !important;
}
.table.table-list tbody tr:hover td,
.dataTable tbody tr:hover td {
  background: rgba(77,240,160,0.05) !important;
}
.table.table-list tbody td,
.dataTable tbody td,
table[id^="table"] tbody td {
  background: transparent !important;
  color: #e8f0ff !important;
  border-top: 1px solid rgba(255,255,255,0.04) !important;
}
/* DataTables wrapper / info / filter areas */
.dataTables_wrapper, .dataTables_info, .dataTables_filter,
.dataTables_length, .dataTables_paginate {
  background: transparent !important;
  color: #6a7fa8 !important;
}

/* ---- PRODUCT ICON BOX (service details page big square) ---- */
.product-icon, .product-icon.text-center,
div.product-icon {
  background: #0d1e3a !important;
  border: 1px solid rgba(77,240,160,0.15) !important;
  border-radius: 12px !important;
  color: #4DF0A0 !important;
}
.product-icon i, .product-icon svg {
  color: #4DF0A0 !important;
  fill: #4DF0A0 !important;
}
.product-status-active, .product-status {
  background: transparent !important;
}

/* ---- DROPDOWN MENU Z-INDEX (menus appearing behind content) ---- */
.navbar, .navbar-default, .navbar-nav {
  position: relative !important;
  z-index: 1030 !important;
}
.dropdown-menu {
  z-index: 1050 !important;
  position: absolute !important;
}
.navbar .dropdown, .navbar .dropdown.open,
.nav-item.dropdown {
  position: relative !important;
}
/* Ensure the tiles/content below don't stack above the nav */
.tile, a.tile, .stat-tiles, .panel {
  z-index: 1 !important;
  position: relative !important;
}

/* ---- ANY REMAINING LIGHT BACKGROUNDS ---- */
[style*="background-color: #f1f1f1"],
[style*="background-color:#f1f1f1"],
[style*="background: #f8f8f8"],
[style*="background:#f8f8f8"],
[style*="#EFEFEF"], [style*="#efefef"],
[style*="#E8F0FF"] {
  background: #0a1428 !important;
}

/* ---- MASS PAYMENT TABLE (masspay rows had #EFEFEF bg) ---- */
tr.masspay-total, tr.masspay-invoice-detail,
tr.masspay-total td, tr.masspay-invoice-detail td,
.masspay-total, .masspay-invoice-detail,
table.masspay td, table.masspay th,
[class*="masspay"] {
  background: #0a1428 !important;
  color: #e8f0ff !important;
}
tr.masspay-total td, .masspay-total td {
  border-top: 1px solid rgba(77,240,160,0.15) !important;
  font-weight: 700 !important;
}
tr.masspay-total td.text-right, .masspay-total .text-right {
  color: #4DF0A0 !important;
}
/* The mass-pay summary/total container box */
.masspay-summary, .mass-payment-summary,
#massPaymentForm, .masspay-container,
.mass-pay-total-row {
  background: #0a1428 !important;
  color: #e8f0ff !important;
}

/* Catch the specific #EFEFEF cells anywhere in tables */
td[style*="#EFEFEF"], td[style*="#efefef"],
tr[style*="#EFEFEF"], tr[style*="#efefef"] {
  background: #0a1428 !important;
}

/* Broad safety: any td/th still light gets navy + readable text */
.table td, .table th,
table td, table th {
  background-color: transparent !important;
}
/* Fix text-right cells specifically flagged as #E8F0FF-on-#EFEFEF */
td.text-right {
  color: #e8f0ff !important;
}

/* ================================================
   ROUND 5 FIXES — order/cart light boxes + product card centering
   ================================================ */

/* ---- CONFIGURE / CART PRODUCT BOXES (product-info #F8F8F8) ---- */
.product-info, div.product-info,
.secondary-cart-body, div.secondary-cart-body,
.cart-body, .primary-cart-body,
.order-summary, .summary-container,
.checkout-summary, .cart-summary {
  background: #0a1428 !important;
  color: #e8f0ff !important;
  border-color: rgba(77,240,160,0.15) !important;
}
.product-info *, .secondary-cart-body *,
.cart-body * {
  background-color: transparent !important;
  color: #e8f0ff !important;
}

/* ---- CHOOSE BILLING CYCLE / CONFIG ROWS ---- */
.choose-cycle, .billing-cycle-options,
.config-option, .configurable-option,
.product-configurable-options,
.field-container, .product-field {
  background: #0a1428 !important;
  color: #e8f0ff !important;
}

/* ---- CART / CHECKOUT INPUT FIELDS ---- */
.secondary-cart-body input, .secondary-cart-body select,
.product-info input, .product-info select,
.cart-body input, .cart-body select,
input.form-control, select.form-control {
  background: #060d1f !important;
  border: 1px solid rgba(77,240,160,0.15) !important;
  color: #e8f0ff !important;
}

/* ---- PROMO CODE BOX ---- */
.promo-code, .apply-promo, #promoCode,
.promotion-code-container {
  background: #0a1428 !important;
  color: #e8f0ff !important;
}

/* ---- CATCH light hex on cart/order elements ---- */
[style*="#F8F8F8"], [style*="#f8f8f8"],
.secondary-cart-body[style], .product-info[style] {
  background: #0a1428 !important;
}

/* ---- STORE PRODUCT CARDS — CENTER PRICE & BUTTON ---- */
/* The order-now product cards: center the pricing and the button */
.product-box, div[id^="product"].product,
.order-product, .store-product {
  text-align: center !important;
}
.product-box .price, .product-box .product-price,
div[id^="product"].product .price,
div[id^="product"].product .product-price,
.product-pricing, .price-block {
  text-align: center !important;
  justify-content: center !important;
  width: 100% !important;
  display: block !important;
}
/* Center the Order Now button */
.product-box .btn, .product-box a.btn,
div[id^="product"].product .btn,
div[id^="product"].product a.btn,
.product-box .order-button, .order-now-btn {
  display: inline-block !important;
  float: none !important;
  margin: 12px auto 0 !important;
}
/* The card body/footer that holds price + button */
.product-box .product-body, .product-box footer,
div[id^="product"].product .product-body,
div[id^="product"].product .product-desc-area,
.product-content, .product-footer {
  text-align: center !important;
}

/* ================================================
   ROUND 6 FIXES — modals + product card centering (real structure)
   ================================================ */

/* ---- MODALS (Remove Item popup — modal-body / modal-footer #E8F0FF) ---- */
.modal-content, .modal-body, .modal-header, .modal-footer,
div.modal-body, div.modal-footer, div.modal-header,
.modal-dialog .modal-content {
  background: #0a1428 !important;
  color: #e8f0ff !important;
  border-color: rgba(77,240,160,0.15) !important;
}
.modal-body *, .modal-footer *, .modal-header * {
  color: #e8f0ff !important;
  background-color: transparent !important;
}
.modal-header {
  border-bottom: 1px solid rgba(77,240,160,0.15) !important;
}
.modal-footer {
  border-top: 1px solid rgba(77,240,160,0.15) !important;
}
.modal-title, .modal-header h4, .modal-header h3 {
  color: #4DF0A0 !important;
  font-family: 'Syne', sans-serif !important;
}
/* Modal close X */
.modal .close, .modal-header .close {
  color: #6a7fa8 !important;
  opacity: 1 !important;
}
/* Modal backdrop */
.modal-backdrop {
  background: #060d1f !important;
}
/* The "No" / secondary modal button readability */
.modal-footer .btn-default, .modal .btn-default {
  background: #0d1e3a !important;
  border: 1px solid rgba(77,240,160,0.2) !important;
  color: #e8f0ff !important;
}

/* ---- STORE PRODUCT CARDS — CENTER via the real structure ---- */
/* Cards are div#productN.product.clearfix with internal columns.
   Force the whole card and all descendants to center-align. */
div[id^="product"].product,
div[id^="product"].product.clearfix {
  text-align: center !important;
}
div[id^="product"].product * {
  text-align: center !important;
}
/* Any internal float columns → unfloat and center */
div[id^="product"].product .row,
div[id^="product"].product [class*="col-"],
div[id^="product"].product .pull-right,
div[id^="product"].product .pull-left,
div[id^="product"].product .text-right,
div[id^="product"].product .text-left {
  float: none !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* The price */
div[id^="product"].product .price,
div[id^="product"].product [class*="price"] {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}
/* The Order Now button — center it as an inline-block */
div[id^="product"].product .btn,
div[id^="product"].product a.btn,
div[id^="product"].product button {
  float: none !important;
  display: inline-block !important;
  margin: 12px auto 0 !important;
  text-align: center !important;
}
/* If button sits in a wrapper, center the wrapper's contents */
div[id^="product"].product .product-desc,
div[id^="product"].product footer,
div[id^="product"].product .product-body {
  text-align: center !important;
}

/* ================================================
   ROUND 7 — force product card into centered flex column
   (overrides floats/columns/justify that text-align can't)
   ================================================ */

/* Make the card body a vertical flexbox that centers its children */
div[id^="product"].product,
div[id^="product"].product.clearfix {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
}

/* Center the CONTENT children (header, product-desc, footer) but NOT the
   free-trial-banner, which is an absolutely-positioned corner ribbon. */
div[id^="product"].product > header,
div[id^="product"].product > .product-desc,
div[id^="product"].product > footer,
div[id^="product"].product .row,
div[id^="product"].product [class*="col-"]:not([class*="free-trial"]) {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  text-align: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: center !important;
}

/* Keep the card as the positioning context for the ribbon */
div[id^="product"].product,
div[id^="product"].product.clearfix {
  position: relative !important;
}

/* Restore the free-trial ribbon to its corner (don't let flex/block rules touch it) */
div[id^="product"].product .free-trial-banner {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
  margin: 0 !important;
  z-index: 2 !important;
  flex: none !important;
  align-self: flex-end !important;
}

/* Kill any left/right padding that offsets price/button */
div[id^="product"].product .price,
div[id^="product"].product [class*="price"],
div[id^="product"].product .product-desc,
div[id^="product"].product .product-pricing {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  float: none !important;
  width: 100% !important;
}

/* Button: center as inline-block, remove any float/right positioning */
div[id^="product"].product .btn,
div[id^="product"].product a.btn,
div[id^="product"].product button,
div[id^="product"].product .btn-order,
div[id^="product"].product [class*="order"] a {
  float: none !important;
  display: inline-block !important;
  margin: 14px auto 0 !important;
  position: static !important;
}

/* ================================================
   ROUND 8 — tighten card spacing + fix ribbon size
   ================================================ */

/* Reduce the vertical gap in the product card flex column */
div[id^="product"].product,
div[id^="product"].product.clearfix {
  gap: 4px !important;
  padding-bottom: 20px !important;
}
div[id^="product"].product > header,
div[id^="product"].product > .product-desc,
div[id^="product"].product > footer {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Trim the big gap above the button */
div[id^="product"].product .btn,
div[id^="product"].product a.btn,
div[id^="product"].product button {
  margin: 8px auto 0 !important;
}
/* Tighten the product-desc block (holds price + monthly) */
div[id^="product"].product .product-desc {
  padding: 8px 0 !important;
}

/* ---- FREE TRIAL RIBBON — restore readable size ---- */
div[id^="product"].product .free-trial-banner {
  width: 150px !important;
  height: 150px !important;
  overflow: hidden !important;
  top: 0 !important;
  right: 0 !important;
  pointer-events: none !important;
}
/* The rotated text strip inside the ribbon */
div[id^="product"].product .free-trial-banner::after,
div[id^="product"].product .free-trial-banner span,
div[id^="product"].product .free-trial-banner {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}

/* ================================================
   ROUND 9 — collapse empty features list, tighten card
   ================================================ */

/* The empty <ul> in product-desc creates the big gap. Collapse it. */
div[id^="product"].product .product-desc ul:empty,
div[id^="product"].product .product-desc ul {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
div[id^="product"].product .product-desc:empty,
div[id^="product"].product .product-desc {
  margin: 0 !important;
  padding: 4px 0 !important;
  min-height: 0 !important;
}

/* Don't let equal-height flex stretch the inner content apart.
   Keep children grouped at the top, button naturally below. */
div[id^="product"].product,
div[id^="product"].product.clearfix {
  justify-content: flex-start !important;
  gap: 2px !important;
  padding: 0 0 20px 0 !important;
}

/* Header (product name) tighter */
div[id^="product"].product > header {
  padding: 16px 12px 8px !important;
  margin: 0 !important;
}

/* Pricing block (in footer) — sit close to the button */
div[id^="product"].product footer {
  margin: 0 !important;
  padding: 0 12px !important;
}
div[id^="product"].product .product-pricing {
  margin: 8px 0 4px !important;
  padding: 0 !important;
}

/* Button — minimal top margin */
div[id^="product"].product .btn-order-now,
div[id^="product"].product a.btn {
  margin: 6px auto 0 !important;
}

/* ================================================
   ROUND 10 — reposition trial ribbon so full text shows
   ================================================ */

/* Ensure the card clips the ribbon corner cleanly and gives it room */
div[id^="product"].product,
div[id^="product"].product.clearfix {
  overflow: hidden !important;
  position: relative !important;
}

/* Enlarge the ribbon container so the full diagonal text fits */
div[id^="product"].product .free-trial-banner {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 175px !important;
  height: 175px !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

/* The diagonal strip: position it further from the corner and center the text on it.
   Uses ::after which is the ribbon strip in Twenty-One. */
div[id^="product"].product .free-trial-banner::after {
  content: "" !important;
}
div[id^="product"].product .free-trial-banner {
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.3px !important;
}

/* If the ribbon uses a span/inner element for the text, push it down the diagonal
   so it's centered on the visible triangle rather than jammed in the corner. */
div[id^="product"].product .free-trial-banner span,
div[id^="product"].product .free-trial-banner > * {
  position: absolute !important;
  display: block !important;
  width: 200px !important;
  padding: 6px 0 !important;
  top: 42px !important;
  right: -42px !important;
  transform: rotate(45deg) !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

/* ================================================
   ROUND 11 — move ribbon text further in from corner
   ================================================ */
div[id^="product"].product .free-trial-banner span,
div[id^="product"].product .free-trial-banner > * {
  top: 60px !important;
  right: -50px !important;
  width: 200px !important;
  transform: rotate(45deg) !important;
  text-align: center !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}
/* Slightly larger container so nothing clips at the new position */
div[id^="product"].product .free-trial-banner {
  width: 190px !important;
  height: 190px !important;
}