/* =========================================================
   License 4 Less — Client Area Theme (child of Twenty-One)
   Matched to the license4less.com marketing site:
   dark "terminal" hero, monospace status/SKU accents,
   green "ACTIVE" indicators on a near-black navy base.

   Adjust the hex values below if your live site's exact
   shades differ from this reading of the page.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --l4l-bg:          #0A1220;   /* near-black navy, hero/footer background */
  --l4l-navy:        #0F2C59;   /* header / card accents */
  --l4l-navy-light:  #16345F;
  --l4l-card:        #111827;   /* dark card background */
  --l4l-green:       #2FBF71;   /* primary accent / "ACTIVE" green */
  --l4l-green-dark:  #1E9E5A;
  --l4l-text:        #E5E7EB;   /* light text on dark surfaces */
  --l4l-text-dim:    #94A3B8;
  --l4l-mono:        'JetBrains Mono', 'Fira Code', Consolas, monospace;
  --l4l-sans:        'Inter', -apple-system, 'Segoe UI', sans-serif;
}

body { font-family: var(--l4l-sans); }

/* ---------- Header / navigation ---------- */
.navbar, #header, .header-nav {
  background-color: var(--l4l-bg) !important;
  border-bottom: 1px solid rgba(47,191,113,0.15);
}
.navbar .nav-link, .navbar-nav .nav-link { color: var(--l4l-text) !important; }
.navbar .nav-link:hover { color: var(--l4l-green) !important; }
.navbar-brand img { max-height: 36px; }

/* ---------- Buttons ---------- */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--l4l-green) !important;
  border-color: var(--l4l-green-dark) !important;
  color: #04140B !important;
  font-weight: 600;
}
.btn-primary:hover { background-color: var(--l4l-green-dark) !important; color: #ffffff !important; }

a, .text-primary { color: var(--l4l-navy); }
a:hover { color: var(--l4l-green-dark); }

/* ---------- Status pills (order/service status, "ACTIVE" etc.) ----------
   Mirrors the terminal "ACTIVE" readout style from the marketing site. */
.label-success, .badge-success, .status-active,
.list-group-item .label, .btn-status {
  font-family: var(--l4l-mono) !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.78em;
  background-color: rgba(47,191,113,0.15) !important;
  color: var(--l4l-green) !important;
  border: 1px solid rgba(47,191,113,0.4);
  border-radius: 4px;
}

/* ---------- SKU / product code styling ----------
   For any element you tag with class "l4l-sku" in product
   descriptions (Configurable Options / product short description
   allow limited HTML) to echo the "SKU · CPWHM-01" site styling. */
.l4l-sku {
  font-family: var(--l4l-mono);
  font-size: 0.75em;
  letter-spacing: 0.05em;
  color: var(--l4l-text-dim);
  text-transform: uppercase;
}

/* ---------- Pricing / product cards ---------- */
.pricing-table .featured, .product-highlight, .panel.featured {
  border-color: var(--l4l-green) !important;
  box-shadow: 0 0 0 1px var(--l4l-green);
}
.pricing-table .featured .panel-heading::after,
.product-highlight::before {
  content: "MOST POPULAR";
  font-family: var(--l4l-mono);
  font-size: 0.7em;
  letter-spacing: 0.05em;
  background: var(--l4l-green);
  color: #04140B;
  padding: 2px 8px;
  border-radius: 3px;
}

/* ---------- Invoice / order numbers in mono, like the site's terminal look --- */
.invoice-number, .order-number, #invoicenum, .table td.text-mono {
  font-family: var(--l4l-mono);
  color: var(--l4l-text-dim);
}

/* ---------- Footer ---------- */
#footer, .footer, footer {
  background-color: var(--l4l-bg) !important;
  color: var(--l4l-text-dim);
  border-top: 1px solid rgba(47,191,113,0.15);
}
#footer a, .footer a { color: var(--l4l-green); }
#footer .copyright, .footer .copyright {
  font-family: var(--l4l-mono);
  font-size: 0.8em;
}