/* ================================================
   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;
}