@import url("../lp/chrome.css");

/* =========================================================================
   LowPings — zona de client WHMCS
   =========================================================================

   Se încarcă DUPĂ `all.min.css` (vezi `includes/head.tpl`), deci re-skinuiește
   Six fără să atingă CSS-ul compilat de Bootstrap 3. Ăsta e singurul mod în
   care tema supraviețuiește unui update de WHMCS.

   Valorile nu sunt alese aici. Sunt aceleași cu ale site-ului, din
   `tailwind.config.js` și `app/globals.css`:
     suprafețe   #000 / #060606 / #0a0a0a
     linii       alb 10% și 20%
     tipografie  Geist, titluri la tracking -0.02em
     butoane     pastilă, alb pe negru sau contur
     panouri     rază 1rem, cu muchie de lumină sus

   Fișierul înlocuiește blocul de variabile „Nexus Cart" care venea în copia
   asta de Six: `all.css` nu citește nicio variabilă CSS, deci acele ~130 de
   linii nu făceau nimic.

   Organizare:
     1. fonturi și token-uri      7. tabele
     2. bază                      8. formulare
     3. header și navigație       9. alerte, etichete, badge-uri
     4. hero și scurtături       10. sidebar și liste
     5. butoane                  11. footer și utilitare
     6. panouri și carduri       12. formularul de comandă
   ========================================================================= */

/* ------------------------------------------------ 1. fonturi și token-uri */

@font-face {
  font-family: "Geist";
  src: url("../fonts/GeistVF.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMonoVF.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --lp-base: #000000;
  --lp-raised: #060606;
  --lp-panel: #0a0a0a;

  --lp-line: rgb(255 255 255 / 0.10);
  --lp-line-strong: rgb(255 255 255 / 0.20);

  --lp-text: #ffffff;
  --lp-text-soft: #d1d5db;
  --lp-text-muted: #9ca3af;
  --lp-text-faint: #6b7280;
  --lp-text-dim: #4b5563;

  --lp-up: #34d399;
  --lp-warn: #fbbf24;
  --lp-down: #f87171;

  --lp-radius: 1rem;
  --lp-radius-sm: 0.6rem;

  /* Muchia de lumină de pe carduri. Același gradient ca `.edge-lit`. */
  --lp-edge: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0.045) 0%,
    rgb(255 255 255 / 0.012) 22%,
    transparent 55%
  );

  --lp-font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
  --lp-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ------------------------------------------------------------- 2. bază -- */

body {
  background: var(--lp-base);
  color: var(--lp-text-soft);
  font-family: var(--lp-font);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--lp-font);
  color: var(--lp-text);
  font-weight: 600;
  letter-spacing: -0.02em;
}

h1, .h1 { font-size: 30px; }
h2, .h2 { font-size: 24px; }
h3, .h3 { font-size: 19px; }
h4, .h4 { font-size: 16px; }

a {
  color: var(--lp-text);
  text-underline-offset: 4px;
}

a:hover,
a:focus {
  color: var(--lp-text);
  text-decoration: underline;
}

hr { border-top-color: var(--lp-line); }

code, pre, kbd, samp {
  font-family: var(--lp-font-mono);
}

pre {
  background: var(--lp-panel);
  border-color: var(--lp-line);
  color: var(--lp-text-soft);
  border-radius: var(--lp-radius-sm);
}

::selection {
  background: rgb(255 255 255 / 0.18);
  color: #fff;
}

.text-muted { color: var(--lp-text-faint); }
.text-success { color: var(--lp-up); }
.text-warning { color: var(--lp-warn); }
.text-danger { color: var(--lp-down); }
.text-info,
.text-primary { color: var(--lp-text-soft); }

/* Eticheta mică, majuscule, tracking larg — „eyebrow"-ul din sistemul de pe
   site, disponibil pentru capetele de secțiune din zona de client. */
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--lp-line-strong);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lp-text-soft);
}

/* ------------------------------------------- 3. header și navigație ----- */

section#header {
  background: var(--lp-base);
  border-bottom: 1px solid var(--lp-line);
  padding: 0;
}

section#header .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.5rem;
  gap: 24px;
}

/* Six pune Raleway la 2.6em pe logoul-text. Fontul nu e încărcat de temă,
   deci cădea pe un serif de sistem — de aceea și `font-family` aici. */
section#header .logo,
section#header .logo-text {
  order: -1;
  float: none;
  margin: 0;
  padding: 0;
  font-family: var(--lp-font);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lp-text);
  text-decoration: none;
}

section#header .logo img {
  max-height: 34px;
  width: auto;
}

section#header .top-nav {
  float: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

section#header .top-nav > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--lp-text-muted);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

section#header .top-nav > li > a:hover,
section#header .top-nav > li > a:focus {
  background: rgb(255 255 255 / 0.06);
  color: var(--lp-text);
  text-decoration: none;
}

/* Acțiunea principală din colț: pastila albă, ca „Vezi planurile" de pe
   site. Una singură pe ecran — restul rămân linkuri discrete. */
section#header .top-nav > li > a.btn {
  background: #fff;
  color: #000;
  font-weight: 700;
  padding: 9px 22px;
  border: 0;
  box-shadow: 0 10px 15px -3px rgb(255 255 255 / 0.10);
}

section#header .top-nav > li > a.btn:hover,
section#header .top-nav > li > a.btn:focus {
  background: #f3f4f6;
  color: #000;
}

section#main-menu {
  background: var(--lp-base);
  border-bottom: 1px solid var(--lp-line);
}

section#main-menu .navbar-main,
.navbar-default {
  background: transparent;
  border: 0;
  margin: 0;
  min-height: 0;
}

section#main-menu .navbar-nav { margin: 0; }

section#main-menu .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a {
  padding: 10px 16px;
  margin: 10px 2px;
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--lp-text-muted);
  background: transparent;
  transition: background-color 0.2s, color 0.2s;
}

section#main-menu .navbar-nav > li > a:hover,
section#main-menu .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background: rgb(255 255 255 / 0.06);
  color: var(--lp-text);
}

section#main-menu .navbar-nav > li.active > a,
section#main-menu .navbar-nav > .open > a,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  background: rgb(255 255 255 / 0.10);
  color: var(--lp-text);
}

.navbar-default .navbar-toggle {
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  margin: 14px 0;
  padding: 10px 12px;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background: rgb(255 255 255 / 0.06);
}

.navbar-default .navbar-toggle .icon-bar { background: var(--lp-text); }

.navbar-default .navbar-collapse { border-color: var(--lp-line); }

.dropdown-menu {
  background: var(--lp-panel);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-sm);
  box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.8);
  padding: 6px;
  margin-top: 6px;
}

.dropdown-menu > li > a {
  color: var(--lp-text-soft);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13.5px;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a {
  background: rgb(255 255 255 / 0.08);
  color: var(--lp-text);
}

.dropdown-menu .divider { background: var(--lp-line); }

.popover {
  background: var(--lp-panel);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-sm);
  color: var(--lp-text-soft);
}

.popover-title {
  background: transparent;
  border-bottom-color: var(--lp-line);
  color: var(--lp-text);
}

.popover.bottom > .arrow:after { border-bottom-color: var(--lp-panel); }
.popover.top > .arrow:after { border-top-color: var(--lp-panel); }

/* --------------------------------------------- 4. hero și scurtături ----- */

section#home-banner {
  background: var(--lp-base);
  border-bottom: 1px solid var(--lp-line);
  padding: 72px 0;
  position: relative;
  overflow-x: clip;
}

/* Aceeași lumină difuză ca în hero-ul de pe site. `clip` pe secțiune, ca să
   nu lățească documentul pe telefon — greșeala reparată deja pe site. */
section#home-banner::before {
  content: "";
  position: absolute;
  top: -12rem;
  left: 50%;
  z-index: 0;
  height: 42rem;
  width: min(90rem, 130%);
  translate: -50% 0;
  pointer-events: none;
  background: radial-gradient(
    55% 50% at 50% 40%,
    rgb(255 255 255 / 0.07) 0%,
    rgb(255 255 255 / 0.025) 38%,
    transparent 70%
  );
}

section#home-banner .container {
  position: relative;
  z-index: 1;
}

section#home-banner h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}

/* Butoanele din căutarea de domenii: Six le dă verde și gri, cu colț drept.
   Aici căutarea e acțiunea principală, transferul e alternativa. */
section#home-banner .btn {
  border-radius: 999px;
  font-weight: 600;
}

section#home-banner .btn.search {
  background-color: #fff;
  color: #000;
  font-weight: 700;
}

section#home-banner .btn.search:hover { background-color: #f3f4f6; }

section#home-banner .btn.transfer {
  background-color: transparent;
  border: 1px solid var(--lp-line-strong);
  color: var(--lp-text-soft);
}

section#home-banner .btn.transfer:hover {
  background-color: rgb(255 255 255 / 0.05);
  color: var(--lp-text);
}

/* Grupul de input din hero: Bootstrap 3 lipește câmpul de butoane cu colțuri
   drepte. Le desprindem, ca în bara de căutare de domenii de pe site. */
section#home-banner .input-group { display: flex; gap: 8px; }
section#home-banner .input-group-btn { display: flex; gap: 8px; width: auto; }

/* Câmpul de căutare stă pe fundal negru, la fel ca pagina. Fără suprafață
   proprie n-ar arăta a câmp, ci a text pierdut în mijlocul secțiunii. */
section#home-banner .input-group .form-control,
section#home-banner textarea {
  background: var(--lp-panel);
  border: 1px solid var(--lp-line-strong);
  border-radius: var(--lp-radius-sm);
  color: var(--lp-text);
}

section#home-banner .input-group .form-control:focus {
  background: var(--lp-panel);
  border-color: rgb(255 255 255 / 0.35);
}

.home-shortcuts {
  background: var(--lp-raised);
  border-bottom: 1px solid var(--lp-line);
  padding: 28px 0;
}

.home-shortcuts .lead {
  color: var(--lp-text-muted);
  font-size: 15px;
}

.home-shortcuts ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Six pune `float:left; width:24%` și borduri albastre între elemente. Le
   anulăm explicit: altfel flexboxul de mai sus se bate cu float-ul. */
.home-shortcuts ul li,
.home-shortcuts li:first-child {
  flex: 1 1 160px;
  float: none;
  width: auto;
  padding: 0;
  border: 0;
  white-space: normal;
  overflow: visible;
}

.home-shortcuts li p { text-transform: none; }
.home-shortcuts li span { display: none; }

.home-shortcuts ul li a {
  display: block;
  height: 100%;
  padding: 18px;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  background-color: var(--lp-panel);
  background-image: var(--lp-edge);
  color: var(--lp-text-soft);
  text-align: center;
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s;
}

.home-shortcuts ul li a:hover {
  border-color: var(--lp-line-strong);
  color: var(--lp-text);
  text-decoration: none;
}

.home-shortcuts ul li a i {
  font-size: 20px;
  color: var(--lp-text-muted);
  margin-bottom: 10px;
  display: block;
}

.home-shortcuts ul li a p {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
}

section#main-body {
  background: var(--lp-base);
  padding: 40px 0 72px;
}

/* ---------------------------------------------------------- 5. butoane -- */

.btn {
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 24px;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.btn:focus,
.btn:active:focus {
  outline: 2px solid var(--lp-line-strong);
  outline-offset: 2px;
}

/* Acțiunea principală: alb pe negru, ca pe site. Nu albastru. */
.btn-primary,
.btn-success,
.btn-order-now {
  background: #fff;
  border-color: #fff;
  color: #000;
  font-weight: 700;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-order-now:hover, .btn-order-now:focus {
  background: #f3f4f6;
  border-color: #f3f4f6;
  color: #000;
}

.btn-default,
.btn-info {
  background: transparent;
  border-color: var(--lp-line-strong);
  color: var(--lp-text-soft);
}

.btn-default:hover, .btn-default:focus, .btn-default:active,
.btn-info:hover, .btn-info:focus, .btn-info:active {
  background: rgb(255 255 255 / 0.05);
  border-color: var(--lp-line-strong);
  color: var(--lp-text);
}

.btn-danger {
  background: transparent;
  border-color: rgb(248 113 113 / 0.45);
  color: var(--lp-down);
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
  background: rgb(248 113 113 / 0.10);
  border-color: rgb(248 113 113 / 0.65);
  color: var(--lp-down);
}

.btn-warning {
  background: transparent;
  border-color: rgb(251 191 36 / 0.45);
  color: var(--lp-warn);
}

.btn-link {
  color: var(--lp-text-soft);
  border: 0;
  padding-left: 0;
  padding-right: 0;
}

.btn-link:hover { color: var(--lp-text); }

.btn-lg { padding: 13px 30px; font-size: 15px; }
.btn-sm { padding: 7px 16px; font-size: 12.5px; }
.btn-xs { padding: 4px 12px; font-size: 11.5px; }

.btn[disabled],
.btn.disabled { opacity: 0.4; }

/* ------------------------------------------------- 6. panouri și carduri */

.panel,
.well,
.thumbnail,
.tile {
  background-color: var(--lp-panel);
  background-image: var(--lp-edge);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  box-shadow: none;
  color: var(--lp-text-soft);
}

.panel-heading {
  background: transparent;
  border-bottom: 1px solid var(--lp-line);
  border-radius: var(--lp-radius) var(--lp-radius) 0 0;
  padding: 16px 20px;
  color: var(--lp-text);
}

.panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--lp-text);
  letter-spacing: -0.01em;
}

.panel-body { padding: 20px; }

.panel-footer {
  background: transparent;
  border-top: 1px solid var(--lp-line);
  border-radius: 0 0 var(--lp-radius) var(--lp-radius);
  padding: 14px 20px;
  color: var(--lp-text-faint);
}

/* Variantele contextuale de panou din Bootstrap colorau tot capul cu
   albastru, verde sau roșu. Aici culoarea e semnal, nu decor: rămâne doar o
   linie subțire colorată sus. */
.panel-primary,
.panel-info,
.panel-success,
.panel-warning,
.panel-danger,
.panel-default { border-color: var(--lp-line); }

.panel-primary > .panel-heading,
.panel-info > .panel-heading,
.panel-success > .panel-heading,
.panel-warning > .panel-heading,
.panel-danger > .panel-heading,
.panel-default > .panel-heading {
  background: transparent;
  border-color: var(--lp-line);
  color: var(--lp-text);
}

.panel-success { border-top: 2px solid var(--lp-up); }
.panel-warning { border-top: 2px solid var(--lp-warn); }
.panel-danger { border-top: 2px solid var(--lp-down); }

.well { padding: 20px; }

/* Capul de pagină din Six: titlu + linie sub el. Titlul venea albastru
   (#058) și subțire; îl aducem la tratamentul de titlu al site-ului. */
.header-lined {
  border-bottom: 1px solid var(--lp-line);
  padding-bottom: 14px;
  margin-bottom: 24px;
  color: var(--lp-text);
}

/* `div.header-lined h1` în Six, deci și aici — altfel titlul rămâne albastru,
   Six având un selector cu element în față și specificitate mai mare. */
div.header-lined h1 {
  border-bottom: 0;
  color: var(--lp-text);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  padding: 0;
}

/* Six trage firul Ariadnei cu `margin-top:-15px`, ca să-l lipească sub un
   titlu care avea 15px de margine dedesubt. Scoțând marginea aceea, firul
   urca peste titlu. Se anulează amândouă, nu doar una. */
div.header-lined .breadcrumb {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 12px;
}

div.header-lined .breadcrumb li a { color: var(--lp-text-faint); }
div.header-lined .breadcrumb > .active { color: var(--lp-text-soft); }

section#main-body .page-header { border-bottom-color: var(--lp-line); }

/* ---------------------------------------------------------- 7. tabele -- */

.table {
  color: var(--lp-text-soft);
  margin-bottom: 0;
}

.table > thead > tr > th {
  border-bottom: 1px solid var(--lp-line-strong);
  color: var(--lp-text-faint);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 14px 16px;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td {
  border-top: 1px solid var(--lp-line);
  padding: 13px 16px;
  vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd),
.table-hover > tbody > tr:hover {
  background: rgb(255 255 255 / 0.03);
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border-color: var(--lp-line); }

.table > tbody > tr.active > td,
.table > tbody > tr > td.active { background: rgb(255 255 255 / 0.05); }

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--lp-text-faint); }

/* ------------------------------------------------------- 8. formulare -- */

label,
.control-label {
  color: var(--lp-text-soft);
  font-size: 13px;
  font-weight: 500;
}

.form-control,
#registration .form-control,
#registration .field {
  background: var(--lp-base);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-sm);
  box-shadow: none;
  color: var(--lp-text);
  font-size: 14px;
  height: auto;
  padding: 11px 14px;
  transition: border-color 0.2s;
}

.form-control:focus,
#registration .form-control:focus {
  background: var(--lp-base);
  border-color: var(--lp-line-strong);
  box-shadow: none;
  outline: none;
  color: var(--lp-text);
}

.form-control::placeholder { color: var(--lp-text-dim); }

.form-control[disabled],
.form-control[readonly] {
  background: var(--lp-panel);
  color: var(--lp-text-faint);
  opacity: 1;
}

select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%),
    linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px),
    calc(100% - 14px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

textarea.form-control { min-height: 120px; }

.input-group-addon {
  background: var(--lp-panel);
  border-color: var(--lp-line);
  color: var(--lp-text-faint);
  border-radius: var(--lp-radius-sm);
}

.input-group-lg > .form-control,
#registration .input-group-lg > .form-control {
  font-size: 15px;
  padding: 14px 18px;
  border-radius: var(--lp-radius-sm);
}

.input-group-lg .btn,
.input-group-btn .btn { border-radius: 999px; }

.help-block,
#registration .field-help-text {
  color: var(--lp-text-faint);
  font-size: 12px;
}

.has-error .form-control { border-color: rgb(248 113 113 / 0.55); }
.has-error .control-label,
.has-error .help-block { color: var(--lp-down); }
.has-success .form-control { border-color: rgb(52 211 153 / 0.45); }

#registration .sub-heading,
#registration .sub-heading span {
  color: var(--lp-text);
  background: transparent;
}

#registration .field-icon i { color: var(--lp-text-dim); }

/* --------------------------------- 9. alerte, etichete, badge-uri ------- */

.alert {
  background: var(--lp-panel);
  border: 1px solid var(--lp-line);
  border-left-width: 2px;
  border-radius: var(--lp-radius-sm);
  color: var(--lp-text-soft);
  padding: 14px 18px;
}

.alert a { color: var(--lp-text); }

.alert-success { border-left-color: var(--lp-up); }
.alert-info { border-left-color: var(--lp-text-muted); }
.alert-warning { border-left-color: var(--lp-warn); }
.alert-danger { border-left-color: var(--lp-down); }

/* Bootstrap dă fiecărei alerte propria culoare de link, toate ilizibile pe
   negru. Linkul rămâne alb; culoarea o poartă linia din stânga. */
.alert-success .alert-link,
.alert-info .alert-link,
.alert-warning .alert-link,
.alert-danger .alert-link,
.alert .alert-link {
  color: var(--lp-text);
  text-decoration: underline;
}

.label,
.badge {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 10px;
}

.label-default,
.badge {
  background: rgb(255 255 255 / 0.10);
  color: var(--lp-text-soft);
}

.label-success { background: rgb(52 211 153 / 0.15); color: var(--lp-up); }
.label-warning { background: rgb(251 191 36 / 0.15); color: var(--lp-warn); }
.label-danger { background: rgb(248 113 113 / 0.15); color: var(--lp-down); }
.label-info,
.label-primary {
  background: rgb(255 255 255 / 0.10);
  color: var(--lp-text-soft);
}

/* ---------------------------------------------- 10. sidebar și liste --- */

.sidebar .panel,
.sidebar .list-group {
  border-radius: var(--lp-radius);
  overflow: hidden;
}

.list-group {
  background: transparent;
  border-radius: var(--lp-radius);
}

/* `a.list-group-item` e cu element în față în Six și dă `color:#555`, adică
   gri închis pe fundal aproape negru. De aceea apare și aici cu `a.`. */
.list-group-item,
a.list-group-item {
  background: var(--lp-panel);
  border-color: var(--lp-line);
  color: var(--lp-text-soft);
  padding: 12px 16px;
  font-size: 13.5px;
}

a.list-group-item:hover,
a.list-group-item:focus {
  background: rgb(255 255 255 / 0.05);
  color: var(--lp-text);
}

.list-group-item.active,
a.list-group-item.active,
a.list-group-item.active:hover {
  background: rgb(255 255 255 / 0.10);
  border-color: var(--lp-line);
  color: var(--lp-text);
  font-weight: 600;
}

.list-group-item .badge { background: rgb(255 255 255 / 0.10); }

.nav-tabs { border-bottom-color: var(--lp-line); }

.nav-tabs > li > a {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--lp-text-faint);
  margin-right: 4px;
  padding: 12px 16px;
}

.nav-tabs > li > a:hover {
  background: transparent;
  border-bottom-color: var(--lp-line-strong);
  color: var(--lp-text);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background: transparent;
  border: 0;
  border-bottom: 2px solid #fff;
  color: var(--lp-text);
}

.breadcrumb {
  background: transparent;
  padding: 0 0 18px;
  font-size: 12px;
  color: var(--lp-text-faint);
}

.breadcrumb > li + li:before { color: var(--lp-text-dim); }
.breadcrumb > .active { color: var(--lp-text-soft); }

.pagination > li > a,
.pagination > li > span {
  background: var(--lp-panel);
  border-color: var(--lp-line);
  color: var(--lp-text-soft);
}

.pagination > .active > a,
.pagination > .active > span {
  background: rgb(255 255 255 / 0.12);
  border-color: var(--lp-line-strong);
  color: var(--lp-text);
}

.modal-content {
  background: var(--lp-panel);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
}

.modal-header,
.modal-footer { border-color: var(--lp-line); }

.modal-backdrop.in { opacity: 0.7; }

.tooltip-inner {
  background: var(--lp-panel);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-sm);
  color: var(--lp-text-soft);
  font-size: 12px;
  padding: 7px 11px;
}

.tooltip.top .tooltip-arrow { border-top-color: var(--lp-line-strong); }

.progress {
  background: rgb(255 255 255 / 0.06);
  border-radius: 999px;
  box-shadow: none;
  height: 6px;
}

.progress-bar {
  background: #fff;
  box-shadow: none;
}

.progress-bar-success { background: var(--lp-up); }
.progress-bar-warning { background: var(--lp-warn); }
.progress-bar-danger { background: var(--lp-down); }

/* -------------------------------------------- 11. footer și utilitare -- */

section#footer {
  background: var(--lp-raised);
  border-top: 1px solid var(--lp-line);
  padding: 28px 0;
  color: var(--lp-text-dim);
  font-size: 12px;
}

section#footer p { margin: 0; }
section#footer a { color: var(--lp-text-muted); }

.back-to-top {
  background: var(--lp-panel);
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  color: var(--lp-text-muted);
}

.back-to-top:hover {
  border-color: var(--lp-line-strong);
  color: var(--lp-text);
}

#fullpage-overlay { background: rgb(0 0 0 / 0.85); }
#fullpage-overlay .msg { color: var(--lp-text-soft); }

/* ------------------------------------------ 12. formularul de comandă -- */

#order-standard_cart {
  color: var(--lp-text-soft);
  font-size: 14px;
}

#order-standard_cart .panel {
  background-color: var(--lp-panel);
  background-image: var(--lp-edge);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
}

#order-standard_cart .products {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

#order-standard_cart .product {
  flex: 1 1 260px;
  background-color: var(--lp-panel);
  background-image: var(--lp-edge);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  padding: 24px;
  transition: border-color 0.2s;
}

#order-standard_cart .product:hover { border-color: var(--lp-line-strong); }

#order-standard_cart .product h3,
#order-standard_cart .product .product-name {
  color: var(--lp-text);
  font-size: 15px;
  font-weight: 600;
  margin-top: 0;
}

#order-standard_cart .product .product-desc {
  color: var(--lp-text-faint);
  font-size: 13px;
  line-height: 1.6;
}

#order-standard_cart .price,
#order-standard_cart .font-size-36 {
  color: var(--lp-text);
  font-family: var(--lp-font-mono);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

#order-standard_cart .product-pricing .cycle,
#order-standard_cart .product-pricing small {
  color: var(--lp-text-faint);
  font-family: var(--lp-font);
  font-size: 13px;
}

#order-standard_cart .feature-value { color: var(--lp-text-soft); }

#order-standard_cart .header-lined,
#order-standard_cart h1,
#order-standard_cart h2 { color: var(--lp-text); }

#order-standard_cart .cart-sidebar .list-group-item {
  background: transparent;
  border-color: var(--lp-line);
}

#order-standard_cart .order-summary,
#order-standard_cart .summary-container {
  background-color: var(--lp-panel);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
}

#order-standard_cart .total-due-today,
#order-standard_cart .total-row {
  color: var(--lp-text);
  font-family: var(--lp-font-mono);
}

#order-standard_cart .radio label,
#order-standard_cart .checkbox label { color: var(--lp-text-soft); }

#order-standard_cart table td,
#order-standard_cart table th { border-color: var(--lp-line); }

/* =========================================================================
   13. Ecranele din spatele autentificării
   =========================================================================
   Blocurile de aici nu apar pe paginile publice, deci au scăpat la prima
   trecere: se văd abia după login. Toate au fundal alb sau accente colorate
   scrise în Six cu selectori de specificitate mare.
   ========================================================================= */

/* ------------------------------------- bara de verificare a emailului --- */

.verification-banner {
  background-color: var(--lp-panel);
  border-bottom: 1px solid var(--lp-line);
  border-left: 2px solid var(--lp-warn);
  color: var(--lp-text-soft);
  font-weight: 400;
  padding: 14px 18px;
}

.verification-banner .text { color: var(--lp-text-soft); }

/* Butonul de retrimitere e scris în Six ca
   `.verification-banner.email-verification .btn.btn-action`, patru clase.
   Selectorul de aici trebuie să le egaleze, altfel rămâne gri-ardezie. */
.verification-banner.email-verification .btn.btn-action,
.verification-banner.user-validation .btn.btn-action,
.verification-banner .btn:not(.close) {
  background-color: transparent;
  border: 1px solid var(--lp-line-strong);
  color: var(--lp-text-soft);
  padding: 7px 16px;
}

.verification-banner.email-verification .btn.btn-action:hover,
.verification-banner.email-verification .btn.btn-action:active,
.verification-banner.user-validation .btn.btn-action:hover,
.verification-banner .btn:not(.close):hover {
  background-color: rgb(255 255 255 / 0.05);
  border-color: var(--lp-line-strong);
  color: var(--lp-text);
}

.verification-banner .btn.close,
.verification-banner .btn.close:hover {
  color: var(--lp-text-faint);
  background: transparent;
}

/* -------------------------------------------- casetele de statistici --- */

/* `.tiles .tile` vine cu `background-color:#f8f8f8` și bordură gri între
   celule. Devin panouri, ca restul cardurilor. */
.tiles { margin: 0 0 20px; }

.tiles .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8px;
}

.tiles .tile,
.tiles .tile:hover {
  position: relative;
  margin: 8px;
  padding: 18px 20px;
  width: calc(25% - 16px);
  background-color: var(--lp-panel);
  background-image: var(--lp-edge);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  transition: border-color 0.2s;
}

.tiles .tile:hover { border-color: var(--lp-line-strong); }

.tiles .tile a { color: inherit; }

.tile .icon {
  top: 16px;
  right: 18px;
  font-size: 22px;
  color: var(--lp-text-dim);
}

.tile .stat {
  margin-top: 4px;
  font-family: var(--lp-font-mono);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--lp-text);
}

.tile .title {
  color: var(--lp-text-faint);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Dunga colorată de sub cifră era singurul element cromatic decorativ din
   ecran. În sistemul de pe site culoarea e semnal, nu ornament. */
.tile .highlight,
.tile .highlight.bg-color-blue,
.tile .highlight.bg-color-green,
.tile .highlight.bg-color-red,
.tile .highlight.bg-color-gold {
  margin-top: 12px;
  height: 1px;
  background-color: var(--lp-line-strong);
}

@media (max-width: 767px) {
  .tiles .tile,
  .tiles .tile:hover { width: calc(50% - 16px); }
}

/* ------------------------------------------ căutarea din baza de date -- */

.home-kb-search .form-control,
.home-kb-search .form-control:focus {
  background-color: var(--lp-panel);
  border: 1px solid var(--lp-line);
  color: var(--lp-text);
  font-weight: 400;
  padding-left: 50px;
}

.home-kb-search .form-control:focus { border-color: var(--lp-line-strong); }
.home-kb-search i { color: var(--lp-text-dim); }

/* ------------------------------------ panourile din zona de client ----- */

/* `.client-home-panels .panel>.panel-heading` e alb explicit în Six. */
.client-home-panels .panel > .panel-heading {
  background-color: transparent;
  border-bottom: 1px solid var(--lp-line);
  font-weight: 600;
}

.client-home-panels .panel small { color: var(--lp-text-faint); }

.client-home-panels .panel > .panel-heading .panel-title .btn {
  background-color: transparent;
  border: 1px solid var(--lp-line-strong);
  color: var(--lp-text-soft);
}

.client-home-panels .panel > .panel-heading .panel-title .btn:hover {
  background-color: rgb(255 255 255 / 0.05);
  color: var(--lp-text);
}

/* Liniile de accent de deasupra panourilor erau șase culori diferite. */
/* Scrise în Six ca `.panel.panel-accent-blue` — două clase, deci selectorul
   de aici le egalează cu `.panel[class*=...]`. */
.panel[class*="panel-accent-"] {
  border-top: 1px solid var(--lp-line-strong);
}

/* ----------------------------------------- tabelele cu sortare (DataTables) */

.table-container {
  background-color: var(--lp-panel);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  overflow: hidden;
  padding: 0;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper div.dataTables_info {
  background-color: transparent;
  border-bottom: 1px solid var(--lp-line);
  color: var(--lp-text-faint);
  font-size: 12px;
  font-weight: 400;
  padding: 14px 18px !important;
}

.dataTables_wrapper .dataTables_filter { padding: 8px 12px; }
.dataTables_wrapper .dataTables_filter label { padding: 0; }

/* Six pune pe câmpul de căutare o lupă ca imagine de fundal peste alb, cu
   `.dataTables_wrapper .dataTables_filter label .form-control` — trei clase,
   deci selectorul de aici trebuie să fie la fel de lung. */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter label .form-control,
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length label .form-control {
  background: var(--lp-base);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-sm);
  color: var(--lp-text);
  height: auto;
  padding: 8px 12px !important;
  width: auto;
}

.dataTables_wrapper .dataTables_filter label .form-control:focus {
  border-color: var(--lp-line-strong);
}

/* `.dataTables_length` avea `background-color:#f6f6f6` — bara albă de sub
   tabel, cu selectorul de „articole pe pagină". */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_length label {
  background-color: transparent;
  border-top: 1px solid var(--lp-line);
  color: var(--lp-text-faint);
  font-size: 12px;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_paginate { border-top: 0; }

.dataTables_wrapper .dataTables_length label { padding: 12px 18px; }

/* Capul de tabel avea fundal alb, text #333 și o bordură verde de 4 px,
   alternând două nuanțe pe coloane pare. */
table.table-list thead th,
.dataTables_wrapper table.table-list thead th,
.dataTables_wrapper table.table-list thead th:nth-child(even) {
  background-color: transparent;
  border-bottom: 1px solid var(--lp-line-strong);
  color: var(--lp-text-faint);
  font-size: 12px;
  font-weight: 500;
  padding: 14px 12px;
  text-align: left;
}

.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
  background-color: rgb(255 255 255 / 0.04);
}

.table-list > tbody > tr > td,
.table-list > tbody > tr:nth-child(even) > td {
  background-color: transparent;
  border-top: 1px solid var(--lp-line);
  color: var(--lp-text-soft);
}

.table-list > tbody > tr:hover > td { background-color: rgb(255 255 255 / 0.03); }

.table-list > tbody > tr > td a.border-left { border-left-color: var(--lp-line); }

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after { color: var(--lp-text-dim); }

/* ------------------------------------------- navigație: blocul de cont -- */

/* `.navbar-main li.account` avea fundal bleumarin plin — singura pată de
   culoare din bara de sus. */
.navbar-main {
  background-color: transparent;
  font-family: var(--lp-font);
  font-size: 14px;
}

.navbar-main li.account,
.navbar-main li.account.open {
  background-color: rgb(255 255 255 / 0.06);
  border-radius: 999px;
  margin: 10px 0;
}

.navbar-main li.account > a { color: var(--lp-text); }

.navbar-main .navbar-nav > li > a { color: var(--lp-text-muted); }
.navbar-main .navbar-nav > li > a:hover {
  background-color: rgb(255 255 255 / 0.06);
  color: var(--lp-text);
}

.navbar-main .dropdown-menu > li > a:hover,
.navbar-main .navbar-nav .open .dropdown-menu > li > a:hover {
  background-color: rgb(255 255 255 / 0.08);
  color: var(--lp-text);
}

.navbar-main .navbar-nav .open .dropdown-menu > li > a { color: var(--lp-text-soft); }

.navbar-main .dropdown-menu {
  border-radius: var(--lp-radius-sm);
  border-top: 1px solid var(--lp-line);
  padding: 6px;
}

/* --------------------------------------------------- rest de curățenie -- */

section#footer .back-to-top i {
  background-color: var(--lp-panel);
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  color: var(--lp-text-muted);
  opacity: 1;
}

/* Bootstrap folosește `.bg-color-*` și pentru butoane mici din panouri. */
.btn.bg-color-blue,
.btn.bg-color-green,
.btn.bg-color-red,
.btn.bg-color-gold,
.btn.bg-color-orange {
  background-color: transparent;
  border: 1px solid var(--lp-line-strong);
  color: var(--lp-text-soft);
}

/* =========================================================================
   14. Proporții
   =========================================================================
   Până aici tema avea culorile site-ului, dar ritmul lui Six: containere de
   1170px, spațieri de 10–15px și un singur corp de literă peste tot. Site-ul
   respiră altfel — de aceea secțiunea asta nu schimbă nicio culoare, doar
   spațiu, scară tipografică și felul în care se grupează navigația.
   ========================================================================= */

/* --------------------------------------------------------- containerul -- */

/* 80rem, ca `max-w-content` de pe site, în loc de 1170px. */
@media (min-width: 1200px) {
  .container { width: 1240px; }
}

section#main-body { padding: 48px 0 80px; }

/* ------------------------------------------------ navigația ca grup-pastilă */

/* Pe site meniul e un grup rotunjit cu contur, iar elementele sunt pastile
   în interiorul lui. Aceeași formă și aici, doar din CSS. */
/* Six ține butonul hamburger vizibil până la 991px (`all.css`, media
   max-width:991px). Pragul de aici era 768px, deci între 768 și 991 se vedeau
   ȘI hamburgerul, ȘI bara desktop — navigație dublată, pe două rânduri.
   Le aliniem: bara apare exact de unde dispare hamburgerul. */
@media (min-width: 992px) {
  section#main-menu .navbar-collapse {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
  }

  section#main-menu .navbar-nav {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    float: none;
    padding: 4px;
    border: 1px solid var(--lp-line);
    border-radius: 999px;
    background: rgb(255 255 255 / 0.035);
  }

  section#main-menu .navbar-nav > li { float: none; }

  section#main-menu .navbar-nav > li > a,
  .navbar-main .navbar-nav > li > a {
    margin: 0;
    padding: 8px 15px;
  }
}

/* --------------------------------------------------- capul de pagină ---- */

/* Firul Ariadnei urcă deasupra titlului, ca pe paginile site-ului, unde
   `Breadcrumbs` stă înaintea lui `PageHero`. Fără atins șablonul. */
div.header-lined {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 10px;
  border-bottom: 1px solid var(--lp-line);
  margin-bottom: 32px;
  padding-bottom: 22px;
}

div.header-lined h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  line-height: 1.15;
  margin: 0;
}

div.header-lined .breadcrumb {
  margin: 0;
  padding: 0;
  font-size: 12px;
}

/* ------------------------------------------------------------ panouri --- */

.panel { margin-bottom: 20px; }

.panel-heading { padding: 18px 24px; }
.panel-body { padding: 24px; }
.panel-footer { padding: 16px 24px; }

/* Titlul de panou capătă tratamentul de „eyebrow" din sistemul de pe site:
   mic, majuscule, tracking larg. Diferențiază capul de conținut fără să
   ceară o linie în plus. */
.panel-title,
.panel-title strong {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lp-text-muted);
}

.panel-title .badge { letter-spacing: 0; }

/* Butonul mic din capul panoului nu trebuie să crească înălțimea rândului. */
.panel-title .btn-xs { letter-spacing: 0; text-transform: none; }

/* ------------------------------------------------- liste și navigație --- */

.list-group-item,
a.list-group-item { padding: 14px 20px; }

.sidebar .panel-heading { border-bottom: 1px solid var(--lp-line); }

/* --------------------------------------------------------- statistici --- */

.tiles .tile,
.tiles .tile:hover { padding: 24px; }

.tile .stat { font-size: 36px; margin-top: 6px; }

.tile .icon { font-size: 20px; top: 20px; right: 22px; }

/* ------------------------------------------------------------ tabele --- */

/* Cifrele din tabele — prețuri, date, cicluri — pe cifre de lățime egală,
   ca în tabelele de planuri de pe site. Altfel coloanele „dansează". */
.table > tbody > tr > td,
.table-list > tbody > tr > td,
.tile .stat,
.total-due-today {
  font-variant-numeric: tabular-nums;
}

.table > tbody > tr > td,
.table > tbody > tr > th { padding: 15px 18px; }

.table > thead > tr > th { padding: 15px 18px; }

table.table-list tbody td { padding: 15px 12px; font-size: 13px; }

/* ------------------------------------------------------- formulare ----- */

.form-group { margin-bottom: 18px; }

label,
.control-label { margin-bottom: 6px; }

/* --------------------------------------------------------- footer ------ */

section#footer { padding: 40px 0; }

/* ----------------------------------------------------------- responsive */

@media (max-width: 767px) {
  #header .container {
    flex-wrap: wrap;
    padding-top: 14px;
    padding-bottom: 14px;
    gap: 12px;
  }

  #header .top-nav {
    order: 2;
    width: 100%;
    flex-wrap: wrap;
  }

  #home-banner { padding: 48px 0; }

  #main-body { padding: 28px 0 48px; }

  .panel-body { padding: 16px; }

  .table > thead > tr > th,
  .table > tbody > tr > td { padding: 11px 12px; }
}

/* =========================================================================
   13. capul de pagină
   =========================================================================
   Zona de client are nevoie de un singur meniu, iar acela e al WHMCS. Meniul
   mare de pe lowpings.ro ar fi al treilea nivel de navigație în același cap de
   pagină — aglomerație fără rost. Păstrăm din site doar brandul, ca ancoră
   vizuală, și lăsăm funcția meniului la WHMCS.

   Rezultatul are două rânduri: brand + controale de cont, apoi meniul.
   ========================================================================= */

section#header {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

section#header .container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  min-height: 68px;
  border-bottom: 1px solid var(--lp-line);
}

/* Logo-ul propriu al lui Six e înlocuit de brandul site-ului. Ancora lui
   poartă ambele clase (`logo logo-text`), iar Six o randează DUPĂ lista de
   sus — de aceea alinierea nu se poate lăsa pe seama lui `space-between`,
   care ar depinde de câți copii rămân vizibili. */
section#header .logo,
section#header .logo-text,
section#header a.logo,
section#header .search {
  display: none !important;
}


.lp-brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  background: transparent;
}

.lp-brand a {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.lp-brand a:hover,
.lp-brand a:focus {
  color: #fff;
  text-decoration: none;
}

section#header .top-nav {
  flex: 0 1 auto;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin: 0 0 0 auto;
  padding: 0;
}

/* Footer-ul real conține deja datele firmei, ANPC, Netopia și copyright-ul.
   Din cel al lui Six păstrăm doar butonul de întoarcere sus. */
section#footer {
  background: transparent;
  border: 0;
  padding: 0 0 28px;
}

section#footer > .container > p {
  display: none;
}

.lp-chrome {
  background: var(--lp-base);
}

.lp-chrome-footer {
  border-top: 1px solid var(--lp-line);
}

/* =========================================================================
   14. scara rădăcinii
   =========================================================================
   Six moștenește `html { font-size: 10px }` din Bootstrap 3, dar valorile în
   `rem` din această temă sunt scrise pe baza standard de 16px — la 10px ar
   valora 62,5% din cât au fost gândite. Bootstrap folosește `rem` în exact
   două reguli din tot `all.css`, deci mutarea rădăcinii e fără efecte laterale.
   ========================================================================= */

html {
  font-size: 16px;
}

/* =========================================================================
   15. căutarea de domenii din hero
   =========================================================================
   Six imbrichează un al doilea `.input-group` (TLD-uri, lungime, căutare
   sigură) chiar în interiorul celui cu câmpul de căutare. Pe flex, cele două
   ajung pe același rând: câmpul se strivește, butonul devine cerc, iar
   controalele secundare rămân albe, nestilizate. Le trecem pe al doilea rând
   și le facem controale discrete.
   ========================================================================= */

section#home-banner .row > [class*="col-"] {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  left: auto;
  float: none;
}

section#home-banner .input-group.advanced-input {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}

section#home-banner #message {
  flex: 1 1 340px;
  min-height: 84px;
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.5;
  resize: vertical;
  text-align: left;
}

section#home-banner #message::placeholder {
  color: var(--lp-text-faint);
}

/* Six poziționează absolut butoanele (`right:185px; top:65px`) și pune fundal
   alb pe `.advanced-input`. Selectoarele lui au două clase, deci le egalăm. */
section#home-banner .advanced-input {
  background-color: transparent;
}

section#home-banner .advanced-input .input-group-btn {
  position: static;
  right: auto;
  top: auto;
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  width: auto;
}

section#home-banner .advanced-input label {
  color: var(--lp-text-muted);
  font-size: 12.5px;
  font-weight: 500;
}

section#home-banner .advanced-input .input-group-btn {
  align-self: center;
}

section#home-banner .advanced-input .input-group-btn .btn {
  height: 48px;
  padding: 0 26px;
  white-space: nowrap;
  font-size: 14px;
}

/* Rândul al doilea: filtre, nu câmpuri. Discrete, centrate sub căutare. */
section#home-banner .input-group .input-group.advanced-input {
  flex: 1 0 100%;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

section#home-banner .btn-group > .multiselect.btn,
section#home-banner .btn-group > .btn-default {
  height: 34px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--lp-line);
  background: transparent;
  background-image: none;
  color: var(--lp-text-muted);
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: none;
}

section#home-banner .btn-group > .multiselect.btn:hover,
section#home-banner .btn-group > .btn-default:hover,
section#home-banner .btn-group.open > .multiselect.btn {
  border-color: var(--lp-line-strong);
  background: rgb(255 255 255 / 0.05);
  color: var(--lp-text);
}

section#home-banner .input-group.advanced-input > label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--lp-text-muted);
  cursor: pointer;
}

section#home-banner .input-group.advanced-input > label input[type="checkbox"] {
  margin: 0;
  accent-color: #fff;
}

section#home-banner .domainchecker-homepage-captcha {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

section#home-banner .recaptcha-container {
  margin: 0;
}

/* =========================================================================
   16. densitatea paginii
   ========================================================================= */

/* Six rezervă 350px pe secțiune și încă 300px + 60px marjă pe `.main-content`,
   ca paginile scurte să nu se prăbușească. Cu padding-ul temei, rezerva asta
   lasă un gol negru cât ecranul sub orice pagină cu puțin conținut. */
section#main-body {
  min-height: 0;
}

section#main-body .main-content {
  min-height: 0;
  margin-bottom: 0;
}

/* =========================================================================
   17. o singură margine stângă
   =========================================================================
   Containerul Bootstrap (1170px, padding 15px) și containerul site-ului
   (1280px, padding 24px) dădeau trei muchii diferite pe aceeași pagină:
   brandul, meniul și footer-ul începeau fiecare în alt loc. Le aducem pe toate
   pe geometria site-ului.
   ========================================================================= */

.container {
  max-width: 1280px;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
}

/* =========================================================================
   18. magazin și coș
   =========================================================================
   `templates/orderforms/standard_cart/css/all.min.css` se încarcă DUPĂ tema
   asta (poziția 17 în <head>), deci regulile lui câștigă la specificitate
   egală: carduri albe, antete gri, prețuri invizibile. Nu forțăm cu
   `!important` — urcăm specificitatea la nivelul lui și îl depășim cinstit.

   Selectoarele lui sunt de forma `#order-standard_cart .products .product`
   (un id + două clase); ale noastre le egalează sau le depășesc.
   ========================================================================= */

/* Grila de produse: markup-ul are coloane Bootstrap flotante, peste care
   tema punea flex — de aici cardurile suprapuse. O grilă le rezolvă pe ambele. */
body #order-standard_cart .products {
  margin: 0;
}

/* Grila stă pe rândul dinăuntru, nu pe `.products`: structura reală este
   `.products > .row.row-eq-height > .col-md-6 > .product`. Pusă pe `.products`,
   grila avea un singur copil și nu făcea nimic. */
body #order-standard_cart .products > .row,
body #order-standard_cart .products .row-eq-height {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
  margin: 0;
}

/* WHMCS împarte lista în două coloane, fiecare cu mai multe produse. Coloana
   devine un teanc, ca produsele să nu se lipească între ele. */
body #order-standard_cart .products .row > [class*="col-"] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: auto;
  max-width: none;
  float: none;
  padding: 0;
  margin: 0;
}

body #order-standard_cart .products .product {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  background: var(--lp-panel);
  background-image: var(--lp-edge);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  box-shadow: none;
  transition: border-color 0.2s;
}

body #order-standard_cart .products .product:hover {
  border-color: var(--lp-line-strong);
}

body #order-standard_cart .products .product header {
  margin: 0;
  padding: 16px 20px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--lp-line);
  border-radius: var(--lp-radius) var(--lp-radius) 0 0;
}

body #order-standard_cart .products .product header span {
  color: var(--lp-text);
  font-size: 15px;
  font-weight: 600;
}

body #order-standard_cart .products .product .product-desc {
  flex: 1 1 auto;
  padding: 16px 20px;
  color: var(--lp-text-faint);
  font-size: 13px;
  line-height: 1.7;
}

body #order-standard_cart .products .product footer {
  padding: 0 20px 20px;
  background: transparent;
  border: 0;
}

body #order-standard_cart .products .product .product-pricing {
  padding: 0 0 14px;
  color: var(--lp-text-faint);
  font-size: 12.5px;
}

body #order-standard_cart .products .product .product-pricing .price {
  display: block;
  margin: 2px 0;
  color: var(--lp-text);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

body #order-standard_cart .products .product footer .btn {
  display: block;
  width: 100%;
  white-space: normal;
  text-align: center;
  padding: 11px 18px;
  border-radius: 999px;
  background: #fff;
  border: 0;
  color: #000;
  font-weight: 600;
  font-size: 13.5px;
}

body #order-standard_cart .products .product footer .btn:hover,
body #order-standard_cart .products .product footer .btn:focus {
  background: #f3f4f6;
  color: #000;
}

/* WHMCS 9 pune `card` peste `panel` pe aceleași elemente. Două clase bat
   regula cu o singură clasă din foaia încărcată după noi. */
body .panel.card,
body .sidebar .panel.card {
  background-color: var(--lp-panel);
  background-image: var(--lp-edge);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  color: var(--lp-text-soft);
}

body .panel-heading.card-header {
  background: transparent;
  border-bottom: 1px solid var(--lp-line);
  color: var(--lp-text);
}

body .panel-body.card-body {
  background: transparent;
  color: var(--lp-text-soft);
}

/* Titlul paginii de magazin lua fontul monospațiat. */
body #order-standard_cart .header-lined h1,
body #order-standard_cart h1,
body #order-standard_cart h2 {
  font-family: var(--lp-font);
}

/* Six împarte cardul în două coloane flotante — `div.product-desc` la 60% și
   `footer` la 40%. Selectoarele lui au element în față, deci le egalăm cu
   element în față, altfel descrierea rămâne pe o coloană îngustă. */
body #order-standard_cart .products .product div.product-desc {
  float: none;
  width: auto;
  padding: 16px 20px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--lp-text-faint);
}

body #order-standard_cart .products .product footer {
  float: none;
  width: auto;
  margin: 0;
  padding: 0 20px 20px;
  font-size: inherit;
  text-align: left;
}

body #order-standard_cart .products .product div.product-pricing {
  margin: 0 0 14px;
  color: var(--lp-text-faint);
  font-size: 12.5px;
}

body #order-standard_cart .products .product div.product-pricing span.price {
  display: block;
  margin: 2px 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--lp-text);
  font-family: var(--lp-font);
}

/* =========================================================================
   19. configurarea produsului și coșul
   =========================================================================
   Aceeași problemă ca la magazin: foaia formularului de comandă se încarcă
   ultima. Toate regulile de aici sunt prefixate cu `body`, ca să o depășească
   fără `!important`.
   ========================================================================= */

/* Rezumatul produsului din capul paginii de configurare. */
body #order-standard_cart .product-info {
  margin: 0 0 24px;
  padding: 20px;
  background: var(--lp-panel);
  background-image: var(--lp-edge);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  color: var(--lp-text-soft);
  font-size: 13px;
  line-height: 1.7;
}

body #order-standard_cart .product-info .product-title {
  display: block;
  margin-bottom: 10px;
  color: var(--lp-text);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Separatoarele de secțiune erau cutii albe cu text albastru, suprapuse
   peste linie. Le facem etichete discrete pe linia de despărțire. */
/* Separatorul e o linie de înălțime zero, cu un <span> așezat peste ea.
   Se stilizează span-ul, nu containerul — altfel linia dispare. */
body #order-standard_cart .sub-heading {
  display: block;
  height: 0;
  padding: 0;
  margin: 30px 0 36px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--lp-line);
  text-align: center;
}

body #order-standard_cart .sub-heading span,
body #order-standard_cart .sub-heading .primary-bg-color,
body #order-standard_cart .sub-heading em {
  background-color: var(--lp-base);
  color: var(--lp-text-muted);
  font-size: 12.5px;
  font-weight: 500;
  font-style: normal;
}

body #order-standard_cart .field-help-text,
body #order-standard_cart .field-container small {
  color: var(--lp-text-faint);
  font-size: 12.5px;
}

/* Sumarul comenzii: era alb pe gri deschis, cu totalul invizibil. */
body #order-standard_cart .order-summary {
  padding: 20px;
  background: var(--lp-panel);
  background-image: var(--lp-edge);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  color: var(--lp-text-soft);
}

body #order-standard_cart .order-summary h2,
body #order-standard_cart .order-summary .font-size-30 {
  margin: 0 0 16px;
  color: var(--lp-text);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

body #order-standard_cart .order-summary .summary-container {
  padding: 0;
  background: transparent;
  border: 0;
  font-size: 13px;
}

body #order-standard_cart .order-summary .summary-container .product-name {
  display: block;
  color: var(--lp-text);
  font-weight: 600;
}

body #order-standard_cart .order-summary .summary-container .product-group {
  display: block;
  margin-bottom: 12px;
  color: var(--lp-text-faint);
  font-size: 12.5px;
  font-style: normal;
}

body #order-standard_cart .order-summary .summary-totals {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--lp-line);
}

body #order-standard_cart .order-summary .total-due-today {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--lp-line);
  color: var(--lp-text-faint);
  font-size: 12.5px;
  text-align: right;
}

body #order-standard_cart .order-summary .total-due-today .amt {
  display: block;
  color: var(--lp-text);
  font-family: var(--lp-font);
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Extra-opțiunile: carduri, nu blocuri verzi. */
body #order-standard_cart .panel-addon {
  background: var(--lp-panel);
  background-image: var(--lp-edge);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  overflow: hidden;
}

body #order-standard_cart .panel-addon .panel-body label {
  color: var(--lp-text);
  font-size: 13.5px;
  font-weight: 600;
}

body #order-standard_cart .panel-addon .panel-price {
  padding: 10px 16px;
  background-color: transparent;
  border-top: 1px solid var(--lp-line);
  color: var(--lp-text-muted);
  font-size: 12.5px;
}

body #order-standard_cart .panel-addon .panel-add,
body #order-standard_cart .panel-addon-selected .panel-add {
  display: block;
  padding: 10px 16px;
  background-color: transparent;
  border-top: 1px solid var(--lp-line);
  color: var(--lp-text-soft);
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
}

body #order-standard_cart .panel-addon .panel-add:hover {
  background-color: rgb(255 255 255 / 0.06);
  color: var(--lp-text);
}

body #order-standard_cart .panel-addon-selected {
  border-color: var(--lp-line-strong);
}

body #order-standard_cart .panel-addon-selected .panel-add {
  background-color: #fff;
  color: #000;
  font-weight: 600;
}

/* Câmpurile de formular din coș. */
body #order-standard_cart .form-control,
body #order-standard_cart select.form-control,
body #order-standard_cart .custom-select {
  background-color: var(--lp-panel);
  border: 1px solid var(--lp-line-strong);
  border-radius: var(--lp-radius-sm);
  color: var(--lp-text);
  box-shadow: none;
}

body #order-standard_cart .form-control:focus,
body #order-standard_cart .custom-select:focus {
  background-color: var(--lp-panel);
  border-color: rgb(255 255 255 / 0.35);
  box-shadow: none;
  color: var(--lp-text);
}

body #order-standard_cart .form-control::placeholder {
  color: var(--lp-text-faint);
}

/* Butonul de continuare: acțiunea principală a paginii. */
body #order-standard_cart #btnCompleteProductConfig,
body #order-standard_cart .btn-primary {
  background: #fff;
  border: 0;
  border-radius: 999px;
  color: #000;
  font-weight: 600;
  padding: 12px 28px;
}

body #order-standard_cart #btnCompleteProductConfig:hover,
body #order-standard_cart .btn-primary:hover {
  background: #f3f4f6;
  color: #000;
}

/* =========================================================================
   20. editorul de mesaje (bootstrap-markdown)
   =========================================================================
   Formularul de tichet folosește `bootstrap-markdown`, pe care tema nu-l
   acoperea. Six îi dă fundal alb prin `.md-editor > textarea` — un selector
   mai specific decât `.form-control` — iar tema scrie textul cu alb.
   Consecința: clientul scria în tichet și nu vedea nimic.
   ========================================================================= */

body .md-editor {
  background: var(--lp-base);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-sm);
  overflow: hidden;
}

body .md-editor.active,
body div.md-editor.active {
  border-color: var(--lp-line-strong);
  box-shadow: none;
  outline: 0;
}

body .md-editor > .md-header,
body .md-editor > .btn-toolbar,
body .md-editor .md-footer {
  background: var(--lp-panel);
  background-color: var(--lp-panel);
  border-bottom: 1px solid var(--lp-line);
  color: var(--lp-text-faint);
}

body .md-editor .md-footer {
  border-bottom: 0;
  border-top: 1px solid var(--lp-line);
  font-size: 12px;
}

/* Câmpul propriu-zis: aici se scrie. */
body .md-editor > textarea,
body .md-editor > textarea.markdown-editor,
body .md-editor > textarea:focus,
body .md-editor > textarea.markdown-editor:focus {
  background: var(--lp-base);
  background-color: var(--lp-base);
  border: 0;
  border-top: 1px solid var(--lp-line);
  border-bottom: 1px solid var(--lp-line);
  color: var(--lp-text);
  font-family: var(--lp-font-mono);
  font-size: 13.5px;
  line-height: 1.6;
  box-shadow: none;
  outline: 0;
  resize: vertical;
}

body .md-editor > textarea::placeholder {
  color: var(--lp-text-dim);
}

body .md-editor > .md-preview {
  background: var(--lp-base);
  border-top: 1px solid var(--lp-line);
  border-bottom: 1px solid var(--lp-line);
  color: var(--lp-text-soft);
}

/* Butoanele din bara editorului. */
body .md-editor > .md-header .btn,
body .md-editor > .md-header .btn-default {
  background: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: var(--lp-radius-sm);
  color: var(--lp-text-muted);
  box-shadow: none;
}

body .md-editor > .md-header .btn:hover,
body .md-editor > .md-header .btn:focus,
body .md-editor > .md-header .btn-default:hover {
  background: rgb(255 255 255 / 0.07);
  border-color: var(--lp-line);
  color: var(--lp-text);
}

body .md-editor > .md-header .btn-primary {
  background: transparent;
  border: 1px solid var(--lp-line);
  color: var(--lp-text-soft);
}

body .md-editor > .md-header .btn-primary:hover {
  background: rgb(255 255 255 / 0.07);
  color: var(--lp-text);
}

body .md-editor .md-controls .md-control {
  color: var(--lp-text-faint);
}

body .md-editor .md-controls .md-control:hover {
  color: var(--lp-text);
}

/* Modul pe tot ecranul păstrează aceleași culori. */
body .md-editor.md-fullscreen-mode {
  background: var(--lp-base);
}

body .md-editor.md-fullscreen-mode .md-input,
body .md-editor.md-fullscreen-mode .md-input:focus,
body .md-editor.md-fullscreen-mode .md-input:hover {
  background: var(--lp-base);
  color: var(--lp-text);
}

body .md-editor.md-fullscreen-mode .md-preview {
  color: var(--lp-text-soft);
}

body .md-editor.md-fullscreen-mode .btn {
  color: var(--lp-text-muted);
}

body .md-editor.md-fullscreen-mode .btn:hover,
body .md-editor.md-fullscreen-mode .btn:focus {
  color: var(--lp-text);
}

/* =========================================================================
   21. zona de client logat
   =========================================================================
   Tot ce urmează repară reguli din `all.css` (Six + Bootstrap 3, încărcat
   ÎNAINTE de această foaie) care au rămas neacoperite pentru că au element
   în față sau o clasă în plus față de selectoarele temei. Nimic din secțiune
   nu se vede pe paginile publice — toate apar abia după autentificare.

   Regula de cascadă folosită peste tot: `custom.css` se încarcă după
   `all.min.css`, deci la specificitate EGALĂ câștigă. De aceea corecțiile
   copiază forma selectorului original (inclusiv elementele din față) în loc
   să urce artificial specificitatea sau să pună `!important`.
   ========================================================================= */

/* ------------------------------------------- 21.1 panourile din sidebar -- */

/* Cauza: `all.css:10780` și `all.css:10810` — `.panel-sidebar > .panel-heading`
   și `> .panel-footer` sunt (0,2,0) și bat `.panel-heading` (custom.css:606)
   și `.panel-footer` (custom.css:623), care sunt doar (0,1,0). Rezultat: capul
   și subsolul panourilor de sidebar rămâneau #f5f5f5 pe temă neagră.

   De ce doar unele panouri: WHMCS scoate sidebar-ul primar cu
   `panel panel-sidebar panel-default …`, prins de `.panel-default >
   .panel-heading` (custom.css:646, tot (0,2,0), dar mai târziu în fișier).
   Cel secundar iese cu `panel panel-sidebar panel-sidebar` — fără
   `panel-default` — deci nu-l prindea nimic. De aici inconsecvența dintre
   panouri vecine din aceeași coloană.

   `transparent`, nu o culoare: panoul are deja `--lp-panel` + `--lp-edge`
   de la `.panel`; orice fundal propriu ar tăia muchia de lumină. */
.panel-sidebar > .panel-heading {
  background-color: transparent;
  border-bottom: 1px solid var(--lp-line);
  color: var(--lp-text);
}

.panel-sidebar > .panel-footer {
  background-color: transparent;
  border-top: 1px solid var(--lp-line);
  color: var(--lp-text-muted);
}

/* Cauza: `all.css:10793` — `.panel-sidebar .panel-title` (0,2,0) bate
   `.panel-title` (custom.css:614 și :1526, ambele (0,1,0)). Din temă treceau
   doar `font-size`, `letter-spacing` și `text-transform` (fără concurență în
   Six), iar restul rămânea Six: 1.1em din `.panel-sidebar{font-size:15px}`
   = 16,5px, Open Sans, weight 300, #555 — adică 2,5:1 pe capul de panou și o
   tipografie hibridă pe care n-a decis-o nimeni.

   `display:flex` rezolvă a doua problemă a aceluiași titlu: chevronul de
   pliere e un `<i class="… panel-minimise pull-right">` scris DUPĂ text, în
   același `<h3>`. Fiind float după conținut inline, nu scurtează rândul deja
   așezat, deci se suprapunea peste ultima literă ori de câte ori titlul
   încăpea pe un rând. În container flex, `float` nu se aplică deloc
   elementelor flex, deci `pull-right` (care e `!important` în Bootstrap) se
   neutralizează singur, fără să avem nevoie de `!important`. */
.panel-sidebar .panel-title {
  align-items: center;
  color: var(--lp-text-muted);
  display: flex;
  font-family: var(--lp-font);
  font-size: 11px;
  font-weight: 600;
  gap: 8px;
  line-height: 1.5;
}

/* Cauza: `all.css:10800` `.panel-sidebar .panel-minimise { color:#ddd }` — pe
   capul alb era invizibil, iar pe capul negru ar rămâne cel mai luminos
   element din el, mai puternic decât titlul.
   Varianta `.minimised` e listată separat pentru că `all.css:10804` o scrie
   cu (0,3,0) și i-ar impune `margin-top:7px`, care ar decentra chevronul în
   noul rând flex. `transform: rotate(180deg)` rămâne neatins. */
.panel-sidebar .panel-minimise,
.panel-sidebar .panel-minimise.minimised {
  color: var(--lp-text-faint);
  margin-left: auto;
  margin-top: 0;
}

/* Cauza: `all.css:10819` — iconițele din listă erau #cc, iar `all.css:10832`
   le stingea la hover la #666 `!important` (≈1,9:1 peste fundalul de hover al
   temei): treceai cu mausul peste un element și devenea mai puțin vizibil.
   Originalul are `!important`, deci și corecția are nevoie. */
.panel-sidebar .list-group-item i:not(.fa-circle):not(.fa-dot-circle):not(.no-transform) {
  color: var(--lp-text-faint);
}

.panel-sidebar a.list-group-item:hover i.fas,
.panel-sidebar a.list-group-item:hover i.far {
  color: var(--lp-text) !important;
}

/* Cauza: `all.css:10836` — `#465054`, gri-ardezie, singurul ton rece din toată
   zona de client. Selectorul are element în față (`a.list-group-item`) și e
   (0,3,1), deci bate `a.list-group-item.active` din temă (custom.css:966,
   (0,2,1)). Valorile de aici sunt exact cele pe care tema le voia deja. */
.panel-sidebar a.list-group-item.active,
.panel-sidebar a.list-group-item.active:focus,
.panel-sidebar a.list-group-item.active:hover {
  background-color: rgb(255 255 255 / 0.10);
  border-color: var(--lp-line);
  color: var(--lp-text);
}

/* Cauza: `all.css:10847` — filtrele din „Situația Financiară" / „Imagine de
   ansamblu" deveneau la apăsare o bandă #eee cu text #555. (0,4,0), deci bate
   tot ce are tema. E singura interacțiune de pe paginile alea. */
.panel-sidebar.view-filter-btns .list-group-item.active,
.panel-sidebar.view-filter-btns .list-group-item.active:focus,
.panel-sidebar.view-filter-btns .list-group-item.active:hover {
  background-color: rgb(255 255 255 / 0.10);
  border-color: var(--lp-line);
  color: var(--lp-text);
}

/* Cauza: `all.css:5020` — pastila cu numărul de pe filtrul activ devenea albă
   cu cifre #337ab7, singurul albastru Bootstrap rămas în temă. (0,3,1) bate
   `.list-group-item .badge` (custom.css:915, (0,2,0)). */
.list-group-item.active > .badge {
  background-color: rgb(255 255 255 / 0.20);
  color: var(--lp-text);
}

/* Cauza: `all.css:8028` `.btn{overflow:hidden}` peste `white-space:nowrap`
   (all.css:3109) taie eticheta butoanelor din subsolul panourilor de sidebar
   („Adaugare fonduri" se oprea la „Adaugare fo"), fără trei puncte și fără
   niciun indiciu că textul continuă. Coloana `col-xs-6` are ~146px. */
.panel-sidebar > .panel-footer .btn-block {
  overflow: visible;
  padding-left: 10px;
  padding-right: 10px;
  white-space: normal;
}

/* ------------------------------------------- 21.2 etichetele de stare ---- */

/* Cauza: `all.css:9415` `.status { display:block; background-color:#fff;
   border:2px solid #ccc; color:#333 }`. Markup-ul e peste tot
   `<span class="label status status-…">`, deci `.label` din temă
   (custom.css:852) prinde raza, corpul de literă și padding-ul, dar NU are
   `background`, iar `.label-default` nu se potrivește — de aceea fundalul alb
   din Six rămânea. Efect: o bară albă cât celula (măsurat 139×34px) în
   tabelele de servicii, domenii, facturi, oferte, tichete și afiliați.
   `line-height` e declarat pentru că `.status` îl fixa la 22px și tema n-avea
   ce să-l bată. */
.status {
  background-color: rgb(255 255 255 / 0.06);
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  color: var(--lp-text-soft);
  display: inline-block;
  line-height: 1.6;
}

/* Cauza: `all.css:9425-9500` — 14 culori de tipar (#D9534F, #F89406, #004258,
   #9A141E …) alese pentru fundal alb. Sistemul de aici are trei semnale plus
   un neutru; gruparea nu copiază Six literal, pentru că Six însuși era
   inconsecvent (`pending` roșu, dar `pending-registration` portocaliu).
     up    = stare bună, nimic de făcut
     warn  = tranziție sau ceva de făcut
     down  = bani datorați sau abuz
     muted = stare terminală / inactivă */
.status-active,
.status-open,
.status-completed,
.status-paid { color: var(--lp-up); }

.status-pending,
.status-pending-transfer,
.status-pending-registration,
.status-redemption,
.status-grace,
.status-suspended,
.status-inprogress,
.status-customer-reply { color: var(--lp-warn); }

.status-unpaid,
.status-fraud,
.status-collections { color: var(--lp-down); }

.status-cancelled,
.status-terminated,
.status-closed,
.status-expired,
.status-transferred-away,
.status-onhold,
.status-delivered,
.status-answered,
.status-refunded,
.status-draft { color: var(--lp-text-muted); }

/* ------------------------------------------------ 21.3 paginarea -------- */

/* Cauza: `all.css:4840` — `.pagination > .disabled > a/span` e (0,2,1) și bate
   `.pagination > li > a` din temă (custom.css:953, (0,1,2)). Tema a stilizat
   starea normală și `.active`, dar nu și `.disabled`. Pe paginile cu tabel gol
   AMBELE săgeți sunt disabled, deci două pătrate albe sunt tot ce se vede în
   zona de paginare. `--lp-text-faint` e acceptabil aici pentru că e un control
   dezactivat, nu text de conținut. */
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus,
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus {
  background-color: var(--lp-panel);
  border-color: var(--lp-line);
  color: var(--lp-text-faint);
}

/* --------------------------------------------- 21.4 tabelele DataTables -- */

/* Cauza: `custom.css:1312` a înlocuit shorthand-ul din `all.css:9286`
   (`background: url('../../../assets/img/search.png') #fff no-repeat`) cu
   `background: var(--lp-base)` — shorthand-ul șterge și imaginea. WHMCS
   trimite `oLanguage.sSearch = ""`, deci nu există nici etichetă care să
   compenseze: câmpul rămâne o cutie neagră goală, fără niciun indiciu că e
   căutare. Lupa e redesenată inline (SVG în `data:`), nu din Font Awesome, ca
   să nu depindă de o familie de fonturi încărcată din `head.tpl`. `%239ca3af`
   e chiar valoarea lui `--lp-text-muted`; `var()` nu funcționează în `url()`.
   `!important` doar pentru că regula bătută (custom.css:1320) îl are și ea. */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter label .form-control {
  background-color: var(--lp-base);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239ca3af' stroke-width='1.6'%3E%3Ccircle cx='6.8' cy='6.8' r='4.4'/%3E%3Cpath d='M10.2 10.2 14 14'/%3E%3C/svg%3E");
  background-position: 12px 50%;
  background-repeat: no-repeat;
  background-size: 14px 14px;
  padding: 8px 12px 8px 34px !important;
}

/* Cauza: `custom.css:1348-1357` — varianta cu `:nth-child(even)` din acea
   listă are (0,3,3) și bate `table.dataTable thead > tr > th.sorting`
   (all.css:12503, (0,2,4)), iar shorthand-ul `padding:14px 12px` șterge
   `padding-right:30px`, adică exact rezerva pentru săgeata de sortare
   (`:after` la `right:8px`). Coloanele impare n-au selectorul suplimentar și
   păstrează 30px — de aici suprapunerea alternată, doar pe coloanele pare.
   Regulile de mai jos sunt tot (0,3,3), dar vin mai târziu în fișier. */
.dataTables_wrapper table.table-list thead th.sorting,
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
  padding-right: 30px;
}

/* Cauza: `custom.css:1359` evidențiază capul coloanei sortate (alb 4%), dar
   DataTables pune `.sorting_1` / `.sorting_2` și pe `<td>`-uri, iar
   `custom.css:1364` le lasă transparente. Evidențierea se oprea la antet și
   arăta ca două benzi verticale întâmplătoare. */
.dataTables_wrapper table.table-list tbody td.sorting_1,
.dataTables_wrapper table.table-list tbody td.sorting_2 {
  background-color: rgb(255 255 255 / 0.02);
}

/* ------------------------------------------- 21.5 tabloul de bord ------- */

/* Cauza: `all.css:8713` `.client-home-panels .panel > .list-group` (0,3,0) —
   `custom.css:1260` tratează `> .panel-heading`, dar nu și `> .list-group`,
   deci rândul din „Servicii active" rămânea încadrat de două linii #ddd, de
   câteva ori mai puternice decât orice separator al temei. */
.client-home-panels .panel > .list-group {
  border-bottom: 1px solid var(--lp-line);
  border-top: 1px solid var(--lp-line);
}

/* Cauza: `js/whmcs.js:853` și `:866` pun `border-bottom:1px solid #ddd`
   INLINE pe ultimul rând vizibil, la randare și din nou la „Vezi mai multe".
   Un stil inline nu poate fi bătut decât cu `!important` — e singura excepție
   din secțiune care nu are un `!important` corespondent în original, dar are
   ceva mai tare: un atribut `style`. */
div[menuitemname="Active Products/Services"] .list-group-item[style] {
  border-bottom-color: var(--lp-line) !important;
}

/* Cauza: `all.css:8661` `.text-domain { color:#006687 }` — albastru-petrol pe
   #0a0a0a = 3,06:1, la 12px. Numele domeniului de sub serviciu e conținut. */
.text-domain { color: var(--lp-text-muted); }

/* Cauza: șablonul Six (clientareahome) emite `<div class="panel-footer">` gol
   pe „Anunțuri recente", „Facturi neachitate" și „Tichete recente", iar
   `.panel-footer` (custom.css:623 / :1521) îi dă oricum padding — ~32px de
   spațiu mort sub fiecare panou, care dezaliniază înălțimile din grilă.
   `:empty` NU se potrivește, pentru că șablonul lasă noduri de spațiu alb
   înăuntru; de aceea pornim de la zero și punem padding doar când există un
   copil real. `:has(> *)` nu adaugă specificitate (`*` valorează zero), deci
   ambele reguli sunt (0,3,0) și se departajează prin ordine. */
.client-home-panels .panel > .panel-footer {
  padding-bottom: 0;
  padding-top: 0;
}

.client-home-panels .panel > .panel-footer:has(> *) {
  padding-bottom: 16px;
  padding-top: 16px;
}

/* Cauza: regula Bootstrap `.input-group .form-control:first-child` din
   `all.css` taie colțurile din dreapta, presupunând că butonul stă lipit
   acolo. Tema a trecut `.input-group` pe `display:flex` cu wrap, deci
   butoanele „Înregistrare"/„Transferați" coboară pe rândul doi și câmpul
   rămâne cu stânga rotundă și dreapta tăiată drept, lipit de ele. */
#registerDomainPanel .input-group > .form-control {
  border-radius: var(--lp-radius-sm);
  margin-bottom: 8px;
}

/* ------------------------------------------ 21.6 detaliile produsului --- */

/* Cauza: `all.css:9130` `div.product-details-tab-container { background-color:
   #fff }` (0,1,1), fără corespondent în temă: containerul de sub tab-urile
   „Domeniu / Opțiuni de configurare" era un dreptunghi alb pe toată lățimea,
   cu textul temei (#d1d5db) peste el = 1,48:1. Originalul are element în
   față (`div.`), deci și corecția îl păstrează. */
div.product-details-tab-container {
  background-color: var(--lp-panel);
  border: 1px solid var(--lp-line);
  border-top: 0;
  border-radius: 0 0 var(--lp-radius) var(--lp-radius);
  color: var(--lp-text-soft);
}

/* Cauza: `all.css:9085` `div.product-details div.product-icon
   { background-color:#efefef }` (0,2,2) — cel mai mare bloc din pagină, gri
   deschis, cu numele produsului scris peste el cu alb de la regula de titluri
   a temei: 1,15:1. Două elemente în față în original, două și aici. */
div.product-details div.product-icon {
  background-color: var(--lp-raised);
  border: 1px solid var(--lp-line);
  border-bottom: 0;
  border-radius: var(--lp-radius) var(--lp-radius) 0 0;
  color: var(--lp-text-soft);
}

/* Cercul decorativ din spatele glifei rămânea deschis, cu glifa albă peste. */
div.product-details div.product-icon .fa-stack .fa-circle {
  color: rgb(255 255 255 / 0.08);
}

div.product-details div.product-icon .fa-stack .fa-inverse {
  color: var(--lp-text-soft);
}

/* Cauza: `all.css:9102` / `:9110` / `:9123` — banda de stare de sub card era
   verde Bootstrap plin (#46A546) cu text alb (3,12:1), singura culoare
   saturată din zona de client. În plus `.product-status` avea `border-radius:
   10px` cu `overflow: visible`, iar banda e ultimul copil fără rază proprie,
   deci colțul de jos ieșea pătrat din containerul rotunjit.
   Culoarea rămâne semnal, nu suprafață: banda e o nuanță transparentă din
   tokenul de stare, scrisă ca `rgb(… / 0.12)` ca la `.label-success`
   (custom.css:865), nu cu `color-mix`, ca să nu introducem o dependență de
   suport pe care restul fișierului n-o are.
   Bordurile închid cardul început de `.product-icon` de mai sus. */
.product-status {
  border: 1px solid var(--lp-line);
  border-top: 0;
  border-radius: 0 0 var(--lp-radius) var(--lp-radius);
  overflow: hidden;
}

.product-status-active { background-color: rgb(52 211 153 / 0.12); }
.product-status-pending { background-color: rgb(251 191 36 / 0.12); }
.product-status-suspended { background-color: rgb(248 113 113 / 0.12); }

.product-status-terminated,
.product-status-cancelled,
.product-status-fraud { background-color: rgb(255 255 255 / 0.06); }

.product-status-text {
  border-top: 1px solid var(--lp-line);
  color: var(--lp-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  padding: 10px 5px;
}

/* Cauza: `all.css:11212` `.mc-panel-promo img` nu dă niciun fundal, iar PNG-ul
   livrat de MarketConnect (wordmark negru + lacăt negru) e desenat pentru
   hârtie albă: pe corpul negru al panoului „Protecție Malware" se vedea doar
   cuvântul „Lock". Imaginea nu se poate recolora, deci primește propria placă
   deschisă. `#fff` e scris literal (aceeași valoare cu `--lp-text`) pentru că
   aici e suprafață, nu text — exact ca la `.btn-primary`, custom.css:530. */
.mc-panel-promo img {
  background-color: #fff;
  border-radius: var(--lp-radius-sm);
  padding: 10px 14px;
}

/* -------------------------------------------- 21.7 facturi și plăți ----- */

/* PRECONDIȚIE DE ȘABLON: `templates/lowpings-dark/viewinvoice.tpl` e un
   document de sine stătător — nu include `includes/head.tpl` și linkează doar
   `all.min.css` + `invoice.css`, iar `custom.css` e linkat exclusiv din
   `head.tpl:11`. Până nu se adaugă în `viewinvoice.tpl`, IMEDIAT DUPĂ linia cu
   `invoice.css` (custom.css trebuie să rămână ULTIMA foaie, altfel
   `invoice.css` o bate la specificitate egală):
       {assetExists file="custom.css"}
       <link href="{$__assetPath__}?v={$smarty.now|date_format:'%Y%m%d%H'}" rel="stylesheet">
       {/assetExists}
   regulile de mai jos nu se încarcă deloc pe pagina facturii. */

/* Cauza: `invoice.css:26` `.invoice-container { background-color:#fff;
   border:1px solid #ccc; border-radius:6px; padding:70px }` și `:121`
   `td.total-row { background-color:#f8f8f8 }` — coala rămâne albă chiar și
   după ce se încarcă tema, iar pe benzile de totaluri textul temei dă 1,28:1,
   adică exact suma de plată devine ilizibilă. */
.invoice-container {
  background-color: var(--lp-panel);
  background-image: var(--lp-edge);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  margin: 32px auto;
  padding: 48px;
}

.invoice-container strong { color: var(--lp-text); }

.invoice-container address,
.invoice-container .small-text { color: var(--lp-text-soft); }

.invoice-container hr { border-top-color: var(--lp-line); }

/* originalul are element în față (`td.total-row`), deci și corecția */
.invoice-container td.total-row {
  background-color: rgb(255 255 255 / 0.05);
  color: var(--lp-text);
}

/* Cauza: `invoice.css:84-101` — statusul mare de sus (24px bold) folosește
   culori de tipar: #cc0000 = 3,36:1 pe negru, #224488 (stornată) = 2,12:1.
   Selectoarele originale sunt clase goale (`.paid`, `.unpaid`…), care ar
   ateriza în tot site-ul; le legăm de `.invoice-container`, singurul loc unde
   `viewinvoice.tpl` / `viewquote.tpl` le folosesc. */
.invoice-container .draft,
.invoice-container .cancelled { color: var(--lp-text-muted); }
.invoice-container .unpaid { color: var(--lp-down); }
.invoice-container .paid { color: var(--lp-up); }
.invoice-container .collections { color: var(--lp-warn); }
.invoice-container .refunded { color: var(--lp-text-soft); }

/* Cauza: `all.css:10421` `tr.masspay-total td { background-color:#efefef }` —
   banda de totaluri (Subtotal, TVA, „Total de plată") rămânea aproape albă,
   cu textul temei peste ea: 1,28:1. `.table > tbody > tr > td`
   (custom.css:716) nu declară `background`, deci n-avea ce să o bată.
   Element în față în original, element în față și aici. */
tr.masspay-total td {
  background-color: rgb(255 255 255 / 0.05);
  color: var(--lp-text);
}

/* Cauza: `all.css:10418` `tr.masspay-invoice-detail td { font-size:0.8em }` —
   descrierile articolelor coborau la ~10,5px, sub orice altă mărime din zona
   de client (corpul e 13-14px). */
tr.masspay-invoice-detail td {
  color: var(--lp-text-soft);
  font-size: 13px;
}

/* Cauza: `all.css:1389` etc. — `masspay.tpl` folosește `<td class="bg-info">`
   pentru rândurile care despart facturile, iar Bootstrap îi dă #d9edf7: text
   de temă peste el = 1,22:1, adică nu se citește ce factură urmează. Tema nu
   avea nicio regulă `.bg-*`. Nuanțele colorate le păstrează pe cele de semnal,
   la aceeași alfa ca etichetele din custom.css:865. */
.bg-primary {
  background-color: rgb(255 255 255 / 0.10);
  color: var(--lp-text);
}

.bg-info { background-color: rgb(255 255 255 / 0.06); }
.bg-success { background-color: rgb(52 211 153 / 0.12); }
.bg-warning { background-color: rgb(251 191 36 / 0.12); }
.bg-danger { background-color: rgb(248 113 113 / 0.12); }

/* Cauza: `custom.css:697` `.table { margin-bottom: 0 }` anulează cei 20px ai
   Bootstrap-ului — corect pentru tabelele închise în panouri, greșit pentru
   `masspay.tpl`, care pune tabelul direct în `<form>`, fără distanțier: blocul
   de totaluri și cardul „Selectați metoda de plată" rămâneau la ~5px. Numai
   copilul direct al formularului, ca să nu atingem tabelele din panouri. */
form > .table { margin-bottom: 24px; }

/* ------------------------------ 21.8 asistență și baza de cunoștințe ---- */

/* Cauza: `all.css:10685` și `:10688` — `.md-editor > .btn-toolbar` și
   `.md-editor > textarea.markdown-editor, > .md-preview` au
   `background-color:#fff !important`. Secțiunea 20 din custom.css are
   specificitate mai mare (`body .md-editor > textarea…`) dar NU are
   `!important`, deci prinde `color` și pierde `background`: editorul rămâne
   alb, iar textul temei e alb peste el — clientul scrie tichetul și nu vede
   nimic (1:1). Originalul are `!important`, deci și corecția.
   Prefixul `body` păstrează forma restului secțiunii 20. */
body .md-editor > .btn-toolbar {
  background-color: var(--lp-panel) !important;
}

body .md-editor > textarea.markdown-editor,
body .md-editor > .md-preview {
  background-color: var(--lp-base) !important;
  border-bottom: 1px solid var(--lp-line) !important;
  border-top: 1px solid var(--lp-line) !important;
}

/* Cauza: valoarea implicită a user-agentului pentru butonul nativ din
   `<input type="file">` — un dreptunghi #efefef cu text negru înfipt în
   câmpul negru de la „Atașamente". custom.css stilizează `.form-control`, dar
   nu atinge pseudo-elementul. */
input[type="file"].form-control::file-selector-button,
input[type="file"].form-control::-webkit-file-upload-button {
  background: var(--lp-raised);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-sm);
  color: var(--lp-text-soft);
  font: inherit;
  margin-right: 12px;
  padding: 4px 12px;
}

/* Cauza: `all.css:10212` `.kb-rate-article { background-color:#eff7ff;
   color:#4d7cab }` — caseta „Răspunsul a fost util?" e un dreptunghi
   alb-albăstrui lat cât conținutul, iar butoanele „Da"/„Nu" sunt `.btn-link`
   și moștenesc #d1d5db de la temă: ~1,35:1 pe fond aproape alb. Elementul
   principal de feedback al articolului era inutilizabil. */
.kb-rate-article {
  background-color: var(--lp-panel);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  color: var(--lp-text-soft);
}

.kb-rate-article .btn-link,
.kb-rate-article .btn-link:hover,
.kb-rate-article .btn-link:focus {
  color: var(--lp-text);
}

/* Cauza: `all.css:10206` `.kb-article-content { font-size:1.2em;
   line-height:1.2em; font-weight:200 }` — corpul articolului la greutate 200
   în #d1d5db pe negru are trăsături foarte subțiri, iar rândurile aproape se
   ating (16,8px text cu 20,16px interlinie). */
.kb-article-content {
  color: var(--lp-text-soft);
  font-weight: 400;
  line-height: 1.7;
}

/* Cauza: `all.css:10172` `.kbarticles { font-size:0.8em }` — titlurile își
   recuperează mărimea prin `.kbarticles a { font-size:1.2em }` (all.css:10176),
   dar rezumatele rămân la 11,2px, sub orice altă mărime din temă. `1.25em`
   readuce exact baza de 14px. Iar `all.css:10180` colora glifele cu #8ce,
   singura culoare din pagină care nu e nici albă, nici gri, nici token. */
.kbarticles p {
  color: var(--lp-text-muted);
  font-size: 1.25em;
  line-height: 1.6;
}

.kbarticles a .glyphicon { color: var(--lp-text-faint); }

/* Cauza: `all.css:10242` `.kb-search > .input-group-btn > .btn
   { border-radius: 0 3px 3px 0 }` (0,3,1) — inputul primește raza temei prin
   `.input-group-lg > .form-control` (custom.css:791), butonul nu are
   corespondent, deci bara de căutare se termina cu un colț drept lângă un
   colț de 9,6px. */
.kb-search > .input-group-btn > .btn {
  border-radius: 0 var(--lp-radius-sm) var(--lp-radius-sm) 0;
}

/* ------------------------------ 21.9 profil, contacte, afiliați --------- */

/* Cauza: nicio declarație `color-scheme` nicăieri în `templates/lowpings-dark`
   (verificat recursiv), deci Chrome presupune schemă luminoasă și randează
   toate controalele native în clar: checkbox-urile de la „Preferințe de
   notificare" ies albastre sau albe pline, popup-urile de `<select>`,
   scrollbar-urile și orice date picker la fel. `accent-color` era setat o
   singură dată, îngropat în custom.css:1827, doar pe căutarea de domenii. */
:root { color-scheme: dark; }

input[type="checkbox"],
input[type="radio"] { accent-color: #fff; }

/* Cauza: `all.css:11406` `.marketing-email-optin { background-color:#f8f8f8 }`,
   fără corespondent în temă — casetă albă lipită pe pagina neagră, cu titlul
   h4 alb pe alb (1,05:1) și paragraful #d1d5db pe alb (1,4:1). */
.marketing-email-optin {
  background-color: var(--lp-panel);
  background-image: var(--lp-edge);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  color: var(--lp-text-soft);
  padding: 20px;
}

.marketing-email-optin h4 {
  color: var(--lp-text);
  margin-top: 0;
}

/* Cauza: `all.css:6896-6926` — lista de țări a câmpului de telefon
   (intl-tel-input) se deschide ca panou alb cu contur #CCC; numele țărilor
   n-au culoare proprie, deci moștenesc `body { color: var(--lp-text-soft) }`
   și devin invizibile (~1,4:1), iar prefixele sunt #999 pe alb (2,8:1). */
.intl-tel-input .country-list {
  background-color: var(--lp-raised);
  border: 1px solid var(--lp-line-strong);
  border-radius: var(--lp-radius-sm);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.6);
  color: var(--lp-text-soft);
}

.intl-tel-input .country-list .divider { border-bottom: 1px solid var(--lp-line); }
.intl-tel-input .country-list .country { color: var(--lp-text-soft); }
.intl-tel-input .country-list .country .dial-code { color: var(--lp-text-muted); }

.intl-tel-input .country-list .country.highlight {
  background-color: rgb(255 255 255 / 0.08);
  color: var(--lp-text);
}

/* `all.css:6883` desenează săgeata din triunghiuri de bordură, #555. */
.intl-tel-input .selected-flag .iti-arrow { border-top-color: var(--lp-text-faint); }
.intl-tel-input .selected-flag .iti-arrow.up { border-bottom-color: var(--lp-text-faint); }

/* Cauza: `all.css:12255-12330` — comutatoarele bootstrap-switch („Da/Nu" la
   lista de mail, „ON/OFF" la Autentificare Rapidă) sunt verde Bootstrap
   #5cb85c pe jumătate și #fff pe cealaltă, iar în OFF devin o pastilă #eee cu
   text negru. Starea pornit devine pastila albă a temei (ca `.btn-primary`),
   starea oprit un neutru transparent. */
.bootstrap-switch {
  border-color: var(--lp-line-strong);
  border-radius: var(--lp-radius-sm);
}

.bootstrap-switch .bootstrap-switch-container { border-radius: var(--lp-radius-sm); }

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
  background: #fff;
  color: #000;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
  background: rgb(255 255 255 / 0.10);
  color: var(--lp-text-soft);
}

.bootstrap-switch .bootstrap-switch-label {
  background: var(--lp-panel);
  color: var(--lp-text-soft);
}

/* Cauza: `affiliates.tpl` scrie `class="affiliate-stat … alert-warning"` — are
   varianta, dar NU are clasa `alert`, deci `.alert` din temă (custom.css:825)
   nu se potrivește niciodată și câștigă variantele brute Bootstrap
   (all.css:5134-5156): trei blocuri pastelate mari (#fcf8e3, #d9edf7,
   #dff0d8) pe pagina neagră. `all.css:9515` `.affiliate-stat` dă doar padding
   și font-size, deci nici înălțimile nu se egalizau. */
.affiliate-stat {
  background-color: var(--lp-panel);
  background-image: var(--lp-edge);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  color: var(--lp-text-soft);
  min-height: 132px;
  padding: 20px;
}

.affiliate-stat.alert-warning { border-top: 2px solid var(--lp-warn); }
.affiliate-stat.alert-info { border-top: 2px solid var(--lp-text-muted); }
.affiliate-stat.alert-success { border-top: 2px solid var(--lp-up); }

.affiliate-stat span {
  color: var(--lp-text);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.affiliate-stat i { color: var(--lp-text-faint); }

/* Cauza: `all.css:9537` `.affiliate-referral-link span { border:1px solid #ccc;
   border-radius:10px }` — conturul cel mai vizibil din toată tema, pe exact
   elementul pe care afiliatul îl copiază cel mai des, și fără fundal propriu. */
.affiliate-referral-link span {
  background: var(--lp-raised);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-sm);
  color: var(--lp-text);
  font-family: var(--lp-font-mono);
}

/* Cauza: `custom.css:589` `.btn[disabled], .btn.disabled { opacity: 0.4 }`
   peste `custom.css:558` `.btn-danger { background: transparent }` — un buton
   deja de contur, la 0.4, dispare: „Solicită retragere" dezactivat dă ≈1,94:1,
   iar starea dezactivată e cea implicită pentru aproape toți afiliații.
   Opacitatea se înlocuiește cu o suprafață neutră reală, ca butonul să rămână
   lizibil și totuși vizibil inactiv.
   A doua regulă: `all.css:3462` reaplică roșul plin #d9534f la hover pe
   butonul dezactivat, cu (0,3,0) peste `.btn-danger:hover` al temei (0,2,0). */
.btn[disabled],
.btn.disabled {
  background: rgb(255 255 255 / 0.04);
  border-color: var(--lp-line);
  color: var(--lp-text-muted);
  opacity: 1;
}

.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
.btn-danger.disabled.focus,
.btn-danger[disabled].focus {
  background-color: rgb(255 255 255 / 0.04);
  border-color: var(--lp-line);
  color: var(--lp-text-muted);
}

/* Cauza: markup din Six (`clientareacontacts.tpl`): butonul de submit e
   `<button class="btn btn-default btn-block">»</button>` într-un `col-sm-2`,
   iar `.btn-default` e contur transparent în temă (custom.css:544) — iese o
   casetă goală de ~100px lângă select, care se citește ca un câmp gol, nu ca
   un buton. */
.alert .row > .col-sm-2 > .btn-default.btn-block {
  color: var(--lp-text-muted);
  margin-left: auto;
  min-width: 56px;
  width: auto;
}

/* ------------------------------------------- 21.10 pragul de contrast --- */

/* Cauza: nu e nicio regulă rămasă din Six — e o alegere a temei, dar tokenul
   e cu o treaptă prea întunecat pentru rolul primit. `--lp-text-faint`
   (#6b7280) dă 4,07:1 pe `--lp-panel` și 4,31:1 pe `--lp-base`, deci sub
   pragul de 4,5:1, iar locurile de mai jos sunt toate text de conținut, nu
   note marginale: titlurile plăcuțelor de statistică (11px majuscule),
   capetele de coloană, numărătoarea de rezultate, „Articole pe pagină",
   datele reale ale contului din câmpurile `disabled`, textele de ajutor de la
   facturare și mențiunea contractuală din subsolul formularului de fonduri.
   `--lp-text-muted` (#9ca3af) dă 7,8:1 pe panou și 8,3:1 pe bază, și rămâne
   clar sub `--lp-text-soft`, deci ierarhia celor patru trepte nu se pierde.
   Selectoarele le repetă exact pe cele originale; câștigă prin ordine. */

.text-muted { color: var(--lp-text-muted); }

.tile .title { color: var(--lp-text-muted); }

.table > thead > tr > th { color: var(--lp-text-muted); }

table.table-list thead th,
.dataTables_wrapper table.table-list thead th,
.dataTables_wrapper table.table-list thead th:nth-child(even) {
  color: var(--lp-text-muted);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper div.dataTables_info { color: var(--lp-text-muted); }

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_length label { color: var(--lp-text-muted); }

.panel-footer { color: var(--lp-text-muted); }

.form-control[disabled],
.form-control[readonly] { color: var(--lp-text-muted); }

.help-block,
#registration .field-help-text { color: var(--lp-text-muted); }

/* =========================================================================
   Ce am respins din rapoarte și de ce
   =========================================================================

   1. `.panel-sidebar > .panel-heading { background-color: var(--lp-panel) }`
      (un raport) — respins în favoarea lui `transparent`. `.panel` pune deja
      `--lp-panel` PLUS gradientul `--lp-edge`; un fundal opac pe cap ar tăia
      muchia de lumină exact acolo unde se vede. Măsurătoarea unui alt auditor
      pe `?action=details` (#121212, adică panou + edge) confirmă că varianta
      corectă e cea transparentă.

   2. `.panel-sidebar { font-size: 14px }` — respins. Era necesar doar cât timp
      titlul rămânea la `1.1em`; odată ce `.panel-sidebar .panel-title` e fixat
      la 11px, singurul efect rămas e micșorarea textului din `.panel-body`-ul
      sidebar-ului, care nu a fost raportat ca defect. Nu schimbăm ce nu e rupt.

   3. Lupa din câmpul de căutare desenată cu Font Awesome 6 Pro
      (`content:"\f002"` pe un `::before`) — respinsă în favoarea variantei
      SVG inline. Pseudo-elementul depinde de o familie de fonturi încărcată
      din `head.tpl` (care pe `viewinvoice.tpl` nici nu se încarcă) și cere în
      plus `position:relative` pe `<label>`. SVG-ul în `data:` n-are nicio
      dependență și rezolvă și `background-image`-ul șters de shorthand.

   4. `.text-center + p.text-muted` și `.affiliate-referral-link ~ .text-muted`
      — respinse. Erau o încercare de a ridica tonul doar pe un paragraf, dar
      se sprijină pe ordinea fraților în șablon: prima regulă prinde ORICE
      paragraf `.text-muted` care urmează un element centrat, oriunde în zona
      de client. `.text-muted` e, în Bootstrap, exclusiv pentru text; dacă
      valoarea lui cade sub prag, cade peste tot. Am rezolvat la sursă, cu
      `.text-muted { color: var(--lp-text-muted) }`.

   5. Regula separată pentru `.status-custom` (tichete cu stare definită de
      admin, cu `background-color: white` la all.css:9424) — respinsă ca
      redundantă. Elementul poartă `class="label status status-custom"`, iar
      `.status` de mai sus e tot (0,1,0) și vine după, deci îi dă deja fundalul
      și bordura. Culoarea și `border-color` rămân oricum ale atributului
      `style=""` pus de WHMCS pe element, pe care nu-l atingem.

   6. `.status` cu `border-radius: var(--lp-radius-sm)` și `padding: 2px 12px`
      / `font-size: 12px` (două rapoarte) — respinse în favoarea formei de
      pastilă. Markup-ul e mereu `<span class="label status status-…">`, deci
      `.label` din temă (custom.css:852) dă deja raza 999px, 11px, weight 600
      și `padding: 4px 10px`; redeclararea lor ar fi dublat regula temei și ar
      fi rupt etichetele de restul sistemului. `.status` primește strict ce
      trebuie desfăcut din Six: `display`, fundal, bordură, culoare,
      `line-height`.

   7. `color-mix(in srgb, var(--lp-up) 16%, transparent)` pentru benzile de
      stare — respins în favoarea lui `rgb(52 211 153 / 0.12)`. E aceeași
      culoare, scrisă în convenția pe care fișierul o folosește deja de nouă
      ori (`.label-success`, `.alert-*`, `.progress`), fără o dependență de
      suport pe care nicio altă regulă din temă n-o are.

   8. `.status-pending`/`.status-inprogress` → `--lp-down` (un raport) —
      respins. Six colora `pending` roșu dar `pending-registration` portocaliu,
      adică era el însuși inconsecvent. Aici cele patru trepte au un singur
      înțeles: warn = tranziție, down = bani datorați sau abuz. `pending`,
      `inprogress` și `customer-reply` sunt tranziții.

   9. `.status-collections` → `--lp-warn` (două rapoarte) — respins. E o
      creanță escaladată, mai gravă decât „neachitată"; dacă `unpaid` e roșu,
      `collections` nu poate fi galben.

  10. `.status-expired` / `.status-transferred-away` / `.status-answered` →
      `--lp-down` (un raport) — respinse. Sunt stări terminale, nu probleme
      active; stau cu `cancelled` / `terminated` / `closed` pe neutru.

  11. `.pagination > .disabled > … { color: var(--lp-text-dim) }` (un raport) —
      respins pentru `--lp-text-faint`. `--lp-text-dim` (#4b5563) pe
      `--lp-panel` coboară sub 2,5:1; e un control dezactivat, deci exceptat
      de la pragul de 4,5:1, dar tot trebuie să se vadă că există.

  12. `border-color: var(--lp-line-strong)` pe elementele active din sidebar
      (două rapoarte) — respins pentru `var(--lp-line)`. Tema își desenează
      deja starea activă cu `background: rgb(255 255 255 / 0.10)` +
      `border-color: var(--lp-line)` (custom.css:966); corecția trebuie doar
      să recâștige cascada, nu să inventeze o a doua stare activă.

  13. `.mc-panel-promo img { background-color: var(--lp-text) }` — valoarea
      păstrată, forma respinsă: `--lp-text` e tokenul de TEXT, iar acolo albul
      e suprafață. Scris `#fff`, ca la `.btn-primary` (custom.css:530).

  14. Corecția pentru `/viewinvoice.php` NU e CSS și nu e inclusă mai sus ca
      regulă: fără linia de `<link>` din `viewinvoice.tpl` (citată în 21.7),
      `custom.css` nu se încarcă deloc pe pagina facturii și blocul
      `.invoice-container` n-are niciun efect. Modificarea de șablon trebuie
      făcută separat — enunțul cerea să nu modific niciun fișier.
   ========================================================================= */

/* Blocul e salvat și la:
   /tmp/claude-0/-home-lowpings-public-html-clienti-lowpings-ro/d9aa5a38-24da-433b-bf07-efe60df14881/scratchpad/audit2/consolidat.css
   98 reguli, 157 selectoare unice, 0 duplicate, 7 `!important` (6 contra unor
   `!important` din original, 1 contra unui atribut `style` pus de whmcs.js).
   Niciun fișier din temă nu a fost modificat. */

/* =========================================================================
   21. reparații consolidate — pasul de audit
   =========================================================================
   Bloc unic, de adăugat LA SFÂRȘITUL lui `custom.css`. Poziția contează:
   trei reguli de aici (`#registration .sub-heading`, `.list-group-item .badge`,
   grila de produse) corectează reguli scrise mai sus în același fișier și
   câștigă doar prin ordine în cascadă.

   Adversarii sunt trei foi:
     a) `templates/lowpings-dark/css/all.min.css` — Bootstrap 3 + Six compilat,
        încărcat ÎNAINTEA temei (head.tpl:4). Aici o specificitate egală ne
        ajunge, pentru că venim după el.
     b) `templates/orderforms/standard_cart/css/all.min.css` — încărcat DUPĂ
        temă. Aici fiecare selector e prefixat cu `body`, ca să câștige cinstit.
     c) reguli proprii, mai vechi, din `custom.css`.
   `!important` apare o singură dată, în secțiunea editorului de mesaje, unde
   originalul îl are el însuși.
   ========================================================================= */


/* -------------------------------------------------------------------------
   21.1 baza: controale native
   -------------------------------------------------------------------------
   Tema nu declară `color-scheme`, deci browserul randează toate widgeturile
   proprii în varianta light: butonul „Choose File" de la atașamente, popupul
   de <select>, scrollbarele, fundalul de autofill. O singură declarație le
   întoarce pe toate.                                                        */

:root { color-scheme: dark; }

/* Six are `body,button,input,select,textarea{font-family:"Open Sans",Verdana,
   Tahoma,serif;color:#333}`. Tema redefinise doar `body`, așa că textul tastat,
   <select>-urile și `<input class="btn">` rămâneau pe alt font decât restul
   paginii — de aici „Ai uitat parola?" (un <a>) în Geist lângă „Autentificare"
   (un <input>) în Open Sans. `color: inherit` scapă și de `#333` moștenit pe
   controalele fără `.form-control`; cele cu clasă își impun oricum culoarea. */
button,
input,
select,
textarea {
  font-family: var(--lp-font);
  color: inherit;
}

/* `accent-color` era pus doar pe checkboxul din hero (custom.css:1829). Restul
   bifelor rămâneau cu albastrul sistemului de operare — „nu mă uita" pe login,
   acceptarea Termenilor pe register. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #fff;
}

/* Butonul de fișier e un widget UA; îl tratăm ca pe un `.btn-default`. */
body input[type="file"].form-control {
  color: var(--lp-text-soft);
  padding: 9px 12px;
}

body input[type="file"]::file-selector-button,
body input[type="file"]::-webkit-file-upload-button {
  background: var(--lp-raised);
  border: 1px solid var(--lp-line-strong);
  border-radius: var(--lp-radius-sm);
  color: var(--lp-text);
  cursor: pointer;
  font: inherit;
  margin-right: 12px;
  padding: 5px 14px;
}

body input[type="file"]::file-selector-button:hover,
body input[type="file"]::-webkit-file-upload-button:hover {
  background: rgb(255 255 255 / 0.10);
}

/* Bootstrap dă `.close{color:#000;text-shadow:0 1px 0 #fff;opacity:.2}` — pe
   un cap de modal negru înseamnă un × invizibil. Se vede în modalul „Generare
   Parolă", unde e singura cale de închidere din colț. */
.close,
.modal-header .close {
  color: var(--lp-text-muted);
  text-shadow: none;
  opacity: 1;
}

.close:hover,
.close:focus,
.modal-header .close:hover,
.modal-header .close:focus {
  color: var(--lp-text);
  opacity: 1;
}

/* `.btn.disabled{opacity:0.4}` (custom.css:589) stinge tot butonul, inclusiv
   conturul. Pe paginare, unde butoanele dezactivate sunt singurele controale
   de pe ecran, rezultatul arată a artefact, nu a stare dezactivată. Pe
   „Finalizare comandă" cu coșul gol, pastila albă la 40% dă gri #6c6c6c cu
   text negru — 4.4:1, exact pe limită. În ambele cazuri stingem culoarea
   explicit, nu prin opacitate. */
.btn-group > .btn.disabled,
.btn-group > .btn[disabled] {
  opacity: 1;
  color: var(--lp-text-faint);
  border-color: var(--lp-line);
}

body #order-standard_cart .btn-checkout.disabled,
body #order-standard_cart .btn-checkout[disabled] {
  opacity: 1;
  background: var(--lp-raised);
  border-color: var(--lp-line);
  color: var(--lp-text-faint);
}


/* -------------------------------------------------------------------------
   21.2 panourile de sidebar (Six)
   -------------------------------------------------------------------------
   Aceleași reguli lovesc în register, knowledgebase, announcements,
   serverstatus și în toate paginile /store — de aceea stau într-un singur loc.

   `.panel-sidebar>.panel-heading{color:#333;background-color:#f5f5f5}` are
   (0,2,0) și bate `.panel-heading{background:transparent}` (0,1,0) al temei.
   Panourile care poartă în plus `panel-default` scăpau întâmplător (tema are
   override pe varianta aia), de unde inconsecvența „IMAGINE DE ANSAMBLU" negru
   / „ASISTENȚĂ" alb pe aceeași pagină.                                      */

.panel-sidebar > .panel-heading {
  background: transparent;
  background-color: transparent;
  color: var(--lp-text);
  border-bottom: 1px solid var(--lp-line);
}

.panel-sidebar > .panel-footer {
  background-color: transparent;
  color: var(--lp-text-muted);
  border-top: 1px solid var(--lp-line);
}

/* `.panel-sidebar .panel-title{font-size:1.1em;font-weight:300;
   font-family:'Open Sans';color:#555}` (0,2,0) bate stilul de „eyebrow" al
   temei de la custom.css:1526 (0,1,0). Consecințe: titlu la 2.66:1 pe panou
   și antete de 89px, cu „IMAGINE DE ANSAMBLU" rupt pe două rânduri. */
.panel-sidebar .panel-title {
  font-family: var(--lp-font);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lp-text-muted);
}

.panel-sidebar .panel-minimise { color: var(--lp-text-muted); }

/* `color:#ccc` din Six pe iconița din dreapta rândului. */
.panel-sidebar .list-group-item i:not(.fa-circle):not(.fa-dot-circle):not(.no-transform) {
  color: var(--lp-text-muted);
}

/* Rândul activ primea `#465054` — gri-ardezie din Six, culoare care nu există
   în paletă. Regula lui e (0,3,1), a temei (custom.css:906) doar (0,2,1). */
.panel-sidebar a.list-group-item.active,
.panel-sidebar a.list-group-item.active:focus,
.panel-sidebar a.list-group-item.active:hover {
  background-color: rgb(255 255 255 / 0.10);
  border-color: var(--lp-line);
  color: var(--lp-text);
}

/* Filtrele de pe serverstatus.php („incidente deschise", „întreruperi
   programate", „incidente rezolvate") folosesc un alt selector, (0,3,0), pe
   care regula de mai sus nu-l prinde: fundal #eee cu text #555. */
.panel-sidebar.view-filter-btns .list-group-item.active,
.panel-sidebar.view-filter-btns .list-group-item.active:focus,
.panel-sidebar.view-filter-btns .list-group-item.active:hover {
  background-color: rgb(255 255 255 / 0.10);
  border-color: var(--lp-line);
  color: var(--lp-text);
}

/* La hover, Six întunecă iconița la `#666` — regulă gândită pentru un fundal
   care se albea. Aici fundalul se luminează, deci iconița dispărea exact când
   treci cu mouse-ul peste ea. Originalul are `!important`, deci și noi. */
.panel-sidebar a.list-group-item:hover i.fas,
.panel-sidebar a.list-group-item:hover i.far,
.panel-sidebar a.list-group-item:focus i.fas,
.panel-sidebar a.list-group-item:focus i.far {
  color: var(--lp-text) !important;
}

/* `.list-group-item .badge{background-color:transparent;color:#666}` (0,2,0).
   custom.css:915 a corectat doar fundalul și a uitat culoarea, iar
   `.label-default,.badge{color:var(--lp-text-soft)}` e (0,1,0) și pierde.
   Contoarele „0" din sidebar ajungeau la 2.77:1 pe pastila lor. */
.list-group-item .badge {
  background: rgb(255 255 255 / 0.10);
  color: var(--lp-text-soft);
}

/* Bootstrap: `h1 small{color:#777}` (0,0,2) — singura culoare de text de pe
   serverstatus.php care nu vine din paletă. */
.header-lined h1 small,
.header-lined h2 small {
  color: var(--lp-text-muted);
}

/* chrome.css intră prin `@import` pe linia 1, deci orice regulă din corpul
   lui custom.css vine după el la specificitate egală. Etichetele mici din
   subsol („GĂZDUIRE", „CUI", „Limbă:") erau la 2.68:1. */
.lp-chrome-footer .text-gray-600 {
  color: var(--lp-text-muted);
}


/* -------------------------------------------------------------------------
   21.3 înregistrare și autentificare
   ------------------------------------------------------------------------- */

/* `#registration label{font-weight:300;color:#666;font-size:13px}` (1,0,1) din
   Six; tema are doar `label{margin-bottom:6px}`, fără culoare. La 3.5:1 pe
   negru, cel mai grav e „Am citit și sunt de acord cu" — gri-șters lângă un
   link alb, exact pe bifa obligatorie. */
#registration label {
  color: var(--lp-text-soft);
}

/* Separatoarele de secțiune: custom.css:815-818 a scos fundalul alb al
   <span>-ului (care masca linia), dar n-a schimbat și `border-top:1px solid
   #ddd` din Six — așa că linia trecea prin mijlocul textului, ca o tăietură.
   Trebuie să vină DUPĂ linia 818, la specificitate egală. Același tratament
   există deja, corect, pentru `#order-standard_cart` la custom.css:2098. */
#registration .sub-heading {
  border-top-color: var(--lp-line);
}

#registration .sub-heading span {
  background-color: var(--lp-base);
  color: var(--lp-text-muted);
  font-size: 12.5px;
  font-weight: 500;
}

/* Panoul de opt-in marketing: `.marketing-email-optin{background-color:#f8f8f8}`
   — cutie albă pe pagină neagră, cu h4 alb pe alb (1.06:1). */
.marketing-email-optin {
  background-color: var(--lp-panel);
  background-image: var(--lp-edge);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
}

.marketing-email-optin h4 { color: var(--lp-text); }
.marketing-email-optin p { color: var(--lp-text-soft); }

/* Comutatorul Da/Nu din același panou aduce trei culori Bootstrap într-un
   singur widget: verde #5cb85c pe jumătatea activă, alb pe mâner, #eee pe
   „Nu". Pe o pagină care nu folosește nicăieri verde ca accent de acțiune,
   pastila activă devine albă (convenția temei pentru acțiunea principală). */
.bootstrap-switch {
  border-color: var(--lp-line-strong);
  border-radius: var(--lp-radius-sm);
}

.bootstrap-switch .bootstrap-switch-label {
  background: var(--lp-raised);
  color: var(--lp-text);
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
  background: #fff;
  color: #000;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
  background: rgb(255 255 255 / 0.10);
  color: var(--lp-text-soft);
}

.bootstrap-switch.bootstrap-switch-focused {
  border-color: var(--lp-line-strong);
  box-shadow: none;
}

/* intl-tel-input, partea de culoare: lista de țări e `background-color:#fff`,
   iar numele de țară moștenesc `--lp-text-soft` de pe body => alb pe alb. */
.intl-tel-input .country-list {
  background-color: var(--lp-panel);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-sm);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.65);
  color: var(--lp-text-soft);
}

.intl-tel-input .country-list .divider { border-bottom-color: var(--lp-line); }
.intl-tel-input .country-list .country { color: var(--lp-text-soft); }
.intl-tel-input .country-list .country .dial-code { color: var(--lp-text-muted); }

.intl-tel-input .country-list .country.highlight {
  background-color: rgb(255 255 255 / 0.08);
  color: var(--lp-text);
}

/* intl-tel-input, partea de așezare: `#registration .form-control{padding:
   11px 14px}` (custom.css:742, specificitate 1,1,0) e un shorthand care
   resetează `padding-left`-ul de 76-100px cerut de widget (0,4,1). Efectul:
   steagul și „+40" stau PESTE placeholder și peste numărul tastat. Valorile
   sunt exact cele din all.min.css, doar urcate la (1,5,0). */
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input.form-control { padding-left: 76px; }
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input.form-control { padding-left: 84px; }
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input.form-control { padding-left: 92px; }
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input.form-control { padding-left: 100px; }

/* Separatorul blocului cu steagul era `rgba(0,0,0,.05)` — invizibil pe negru. */
#registration .intl-tel-input .selected-flag {
  background-color: rgb(255 255 255 / 0.04);
  border-right: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-sm) 0 0 var(--lp-radius-sm);
}

#registration .intl-tel-input .selected-flag .iti-arrow { border-top-color: var(--lp-text-muted); }
#registration .intl-tel-input .selected-flag .iti-arrow.up { border-bottom-color: var(--lp-text-muted); }

/* `assets/img/clippy.svg` nu declară `fill`, deci se randează negru pe negru
   în modalul „Generare Parolă". Nu e fișierul nostru, deci îl inversăm. */
.copy-to-clipboard img {
  filter: invert(1);
  opacity: 0.75;
}

.copy-to-clipboard:hover img { opacity: 1; }

/* reCAPTCHA e un <iframe> cross-origin: din CSS nu se poate schimba tema lui.
   Reparația curată e `theme: 'dark'` în apelul `grecaptcha.render` din
   `templates/lowpings-dark/js/scripts.js` (+ scripts.min.js regenerat) —
   vezi lista de respinse. Aici doar îl încadrăm, ca să arate intenționat și
   nu ca o casetă albă care plutește. */
body .recaptcha-container > .g-recaptcha {
  display: inline-block;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-sm);
  overflow: hidden;
  line-height: 0;
}


/* -------------------------------------------------------------------------
   21.4 magazin: grila de produse
   -------------------------------------------------------------------------
   Trei reguli se băteau cap în cap și spărgeau lista de produse (carduri de
   320px într-o zonă de 917px, în scară, cu ~28% din lățime gol):

     1. `#order-standard_cart .products{display:flex;flex-wrap:wrap}`
        (custom.css:1047, rămășiță din secțiunea 12) făcea din fiecare `.row`
        un flex item cu lățime shrink-to-fit;
     2. `repeat(auto-fit,minmax(320px,1fr))` pus pe `.products > .row`
        (custom.css:1895) colapsa atunci la UN singur track de 320px;
     3. `.row:before,.row:after{content:" ";display:table}` (Bootstrap)
        deveneau ele însele elemente de grilă și împingeau produsele cu o
        celulă — de acolo decalajul vertical.

   Structura reală e `.products > .row.row-eq-height × 3 > .col-md-6 × 2 >
   .product`, deci grila trebuie să stea pe `.products`, iar rândurile să
   dispară din fluxul de layout. Regulile 1 și 2 rămân moarte după acest bloc;
   pot fi șterse din custom.css la aplicare, dar nu e obligatoriu.           */

body #order-standard_cart .products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: stretch;
  margin: 0;
}

body #order-standard_cart .products > .row,
body #order-standard_cart .products .row-eq-height {
  display: contents;
}

body #order-standard_cart .products > .row::before,
body #order-standard_cart .products > .row::after {
  display: none;
}

body #order-standard_cart .products .row > [class*="col-"] > .product {
  flex: 1 1 auto;
}

/* Lista de caracteristici („2GB RAM / 25GB SSD / 100% CPU") e textul principal
   de vânzare al paginii, dar tema îi dădea `--lp-text-faint` (#6b7280 pe
   #0a0a0a = 4.10:1) în custom.css:1949 și :2030. Token-ul ăla e pentru text
   slab, nu pentru conținut. Ambii selectori sunt repetați aici ca să bată și
   varianta cu element în față (`div.product-desc`) din Six. */
body #order-standard_cart .products .product .product-desc,
body #order-standard_cart .products .product div.product-desc {
  color: var(--lp-text-soft);
}

/* Aceeași poveste pentru „Începând de la" / „Lunar" (custom.css:1963, :2048):
   randurile astea spun dacă prețul e lunar sau de pornire. */
body #order-standard_cart .products .product .product-pricing,
body #order-standard_cart .products .product div.product-pricing {
  color: var(--lp-text-muted);
}

/* WHMCS pune `<br>` după `<span class="price">` și încă unul după ciclul de
   facturare. Când ciclul lipsește (produse la 0), rămân două rânduri goale —
   60-90px de gol între preț și „Comandă acum". `.price` e deja `display:block`
   în temă, deci `<br>`-urile sunt pur și simplu spațiu mort. */
body #order-standard_cart .products .product div.product-pricing br {
  display: none;
}


/* -------------------------------------------------------------------------
   21.5 coșul (cart.php?a=view)
   -------------------------------------------------------------------------
   Tot ce urmează luptă cu `templates/orderforms/standard_cart/css/all.min.css`,
   care se încarcă DUPĂ temă — de aici prefixul `body` peste tot.            */

/* Antetul tabelului era o bară albastră plină (`background-color:#058`), iar
   lista avea `border-bottom:2px solid #058` — linia albastră de sub „Coșul
   dumneavoastră este gol". */
body #order-standard_cart .view-cart-items-header {
  background-color: var(--lp-raised);
  border: 1px solid var(--lp-line);
  border-bottom: 0;
  border-radius: var(--lp-radius) var(--lp-radius) 0 0;
  color: var(--lp-text-muted);
  padding: 12px 20px;
}

body #order-standard_cart .view-cart-items {
  border: 1px solid var(--lp-line);
  border-top: 0;
  border-radius: 0 0 var(--lp-radius) var(--lp-radius);
  overflow: hidden;
}

/* Rândurile din coș: `.item{background-color:#fff}` și `:nth-child(even)
   {background-color:#eee}`, peste textul alb/#d1d5db al temei => numele
   produsului, prețul, ciclul, opțiunile și „Editați" la ~1.4:1. Pe rând alb
   se vedea doar domeniul, pentru că el are culoarea lui (#056). */
body #order-standard_cart .view-cart-items .item {
  background-color: var(--lp-panel);
  border-bottom: 1px solid var(--lp-line);
  color: var(--lp-text-soft);
}

body #order-standard_cart .view-cart-items .item:nth-child(even) {
  background-color: var(--lp-raised);
}

body #order-standard_cart .view-cart-items .item:last-child {
  border-bottom: 0;
}

body #order-standard_cart .view-cart-items .item-title { color: var(--lp-text); }

body #order-standard_cart .view-cart-items .item-group,
body #order-standard_cart .view-cart-items .item-price .cycle {
  color: var(--lp-text-muted);
}

body #order-standard_cart .view-cart-items .item-domain { color: var(--lp-text-soft); }

body #order-standard_cart .btn-remove-from-cart { color: var(--lp-text-muted); }
body #order-standard_cart .btn-remove-from-cart:hover { color: var(--lp-down); }

/* Tabul activ („Cupon de reduceri") avea `background-color:#f8f8f8` cu textul
   alb al temei peste el — 1.0:1, literalmente invizibil. */
body #order-standard_cart .view-cart-tabs .nav-tabs a {
  color: var(--lp-text-muted);
  border-radius: var(--lp-radius-sm) var(--lp-radius-sm) 0 0;
}

body #order-standard_cart .view-cart-tabs .nav-tabs a:hover {
  background-color: rgb(255 255 255 / 0.05);
  border-color: var(--lp-line);
  color: var(--lp-text);
}

body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"],
body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"] {
  background-color: var(--lp-panel);
  border-color: var(--lp-line) var(--lp-line) var(--lp-panel);
  color: var(--lp-text);
}

/* Panoul tabului: `.tab-content{background-color:#f8f8f8}`. Înăuntru, inputul
   e deja negru (tema îl prinde ca `.form-control`), deci ieșea un câmp negru
   într-o casetă albă, cu butonul „Validare cod" la 1.4:1. */
body #order-standard_cart .view-cart-tabs .tab-content {
  background-color: var(--lp-panel);
  background-image: var(--lp-edge);
  border: 1px solid var(--lp-line);
  border-radius: 0 var(--lp-radius-sm) var(--lp-radius-sm) var(--lp-radius-sm);
  color: var(--lp-text-soft);
  padding: 18px;
}

/* Casetele secundare din coș, toate albe/gri deschis cu textul temei peste:
   `.view-cart-promotion-code{#fff}`, `.view-cart-gateway-checkout{#e8e8e8}`,
   `.apply-credit-container{#eee}`, `.cc-input-container{#f3f3f3}`. */
body #order-standard_cart .view-cart-promotion-code {
  background-color: var(--lp-raised);
  border: 1px dashed var(--lp-line-strong);
  border-radius: var(--lp-radius-sm);
  color: var(--lp-text-soft);
}

body #order-standard_cart .view-cart-gateway-checkout {
  background-color: var(--lp-panel);
  background-image: var(--lp-edge);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  color: var(--lp-text-soft);
}

body #order-standard_cart .apply-credit-container {
  background-color: var(--lp-raised);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-sm);
  color: var(--lp-text-soft);
}

body #order-standard_cart .cc-input-container {
  background-color: var(--lp-panel);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-sm);
  color: var(--lp-text-soft);
}

body #order-standard_cart .cc-input-container .existing-cc-grid {
  color: var(--lp-text-muted);
}

/* `.btn-continue-shopping{color:#222}` — 1.27:1 pe negru. */
body #order-standard_cart .order-summary .btn-continue-shopping {
  color: var(--lp-text-muted);
}

body #order-standard_cart .order-summary .btn-continue-shopping:hover,
body #order-standard_cart .order-summary .btn-continue-shopping:focus {
  color: var(--lp-text);
}

/* „Total de plată azi", „Taxe de instalare", „Lunar": custom.css:2171 și :2119
   le dau `--lp-text-faint` (3.9:1). Suma propriu-zisă (`.amt`) rămâne albă,
   are regula ei. */
body #order-standard_cart .order-summary .total-due-today,
body #order-standard_cart .order-summary .recurring-charges,
body #order-standard_cart .field-help-text {
  color: var(--lp-text-muted);
}

/* `#order-standard_cart .field,#order-standard_cart .form-control{color:#626262;
   background-color:#fff;border:1px solid #ddd}` — tema declară doar
   `.form-control`, deci orice câmp care are DOAR clasa `.field` rămânea alb.
   (Pe coș câmpul de cupon are ambele clase și scăpa întâmplător.) */
body #order-standard_cart .field {
  background-color: var(--lp-panel);
  border: 1px solid var(--lp-line-strong);
  border-radius: var(--lp-radius-sm);
  color: var(--lp-text);
}

body #order-standard_cart .field[disabled],
body #order-standard_cart .field[readonly],
body #order-standard_cart .form-control[disabled],
body #order-standard_cart .form-control[readonly] {
  background-color: var(--lp-raised);
  color: var(--lp-text-faint);
}

body #order-standard_cart .field-icon i { color: var(--lp-text-muted); }


/* -------------------------------------------------------------------------
   21.6 configurarea produsului și alegerea domeniului
   ------------------------------------------------------------------------- */

/* `.domain-selection-options .option{background-color:#f8f8f8}` — tot blocul
   „Înregistrați un domeniu nou / Transferați / Am domeniul meu" era o cutie
   albă în mijlocul paginii negre, cu inputuri negre înăuntru (tema le prinde
   ca `.form-control`). Tema nu avea nicio regulă pe `.domain-selection-options`.
   Odată ce panoul devine negru, se rezolvă de la sine și butonul „Verificați",
   care era o pastilă albă pe un panou aproape alb. */
body #order-standard_cart .domain-selection-options .option {
  background-color: var(--lp-panel);
  background-image: var(--lp-edge);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  margin-bottom: 8px;
  padding: 14px 20px;
}

body #order-standard_cart .domain-selection-options .option-selected {
  background-color: var(--lp-raised);
  border-color: var(--lp-line-strong);
}

body #order-standard_cart .domain-selection-options .option-selected label {
  color: var(--lp-text);
}

/* `#order-standard_cart label,...,.service-renewals .div-renewal-period-label
   {font-weight:300;color:#666}` — toate etichetele din fluxul de comandă la
   3.2:1 pe negru. Tema acoperea doar `.panel-addon .panel-body label`. */
body #order-standard_cart label,
body #order-standard_cart p.domain-renewal-desc,
body .service-renewals .div-renewal-period-label {
  color: var(--lp-text-soft);
  font-weight: 400;
}

/* `.addon-promo-container{border:1px solid #eee}` — un dreptunghi alb dur în
   jurul cutiei promo SiteLock, singura margine vizibilă de pe pagină (tema
   folosește peste tot alb 10%). Tema acoperă `.panel-addon`, dar nu și asta. */
body #order-standard_cart .addon-promo-container {
  background-color: var(--lp-panel);
  background-image: var(--lp-edge);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  padding: 22px;
}

body #order-standard_cart .addon-promo-container h3 { color: var(--lp-text); }
body #order-standard_cart .addon-promo-container a { color: var(--lp-text); }

/* iCheck desenează radio-urile și bifele dintr-un sprite PNG (`blue.png`,
   `blue@2x.png`), deci bifa albastră Bootstrap nu se poate schimba din
   culoare — doar printr-un filtru pe imagine. Apare pe „Înregistrați un
   domeniu nou" și pe opțiunile de la pasul de configurare. */
body #order-standard_cart .iradio_square-blue,
body #order-standard_cart .icheckbox_square-blue,
body .domain-checker-container .iradio_square-blue,
body .domain-checker-container .icheckbox_square-blue {
  filter: grayscale(1) brightness(1.7) contrast(1.1);
}


/* -------------------------------------------------------------------------
   21.7 căutarea de domenii
   ------------------------------------------------------------------------- */

/* `.domain-checker-container` e un gradient galben-portocaliu (#ffd960 ->
   #ffb201) cu un glob desenat în dreapta (`.domain-checker-bg` cu
   `background-image:url(../img/globe.png)`), iar caseta de căutare din mijloc
   e albă. E cel mai vizibil element de pe pagina de înregistrare domenii. */
body .domain-checker-container {
  background: var(--lp-panel);
  background-image: var(--lp-edge);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
}

body .domain-checker-bg {
  background-image: none;
  padding: 44px 0;
}

body .domain-checker-container .input-group-box {
  background-color: var(--lp-base);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-sm);
}

/* Casuța de căutare e un `<textarea id="message">` FĂRĂ clasă (vezi DOM), deci
   nicio regulă a temei n-o prindea: rămânea la stilul implicit al browserului,
   alb cu placeholder #757575. Foaia order-formului îi dă doar dimensiuni. */
body #order-standard_cart .domain-checker-advanced textarea,
body .domain-checker-container.domain-checker-advanced textarea {
  background-color: var(--lp-base);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-sm);
  color: var(--lp-text);
  padding: 11px 14px;
}

body #order-standard_cart .domain-checker-advanced textarea:focus,
body .domain-checker-container.domain-checker-advanced textarea:focus {
  border-color: var(--lp-line-strong);
  outline: none;
}

body #order-standard_cart .domain-checker-advanced textarea::placeholder,
body .domain-checker-container.domain-checker-advanced textarea::placeholder {
  color: var(--lp-text-faint);
}

/* „Includeți TLD-uri" / „Lungime maximă" (bootstrap-multiselect) sunt
   `color:#111827` — se vedeau doar cât timp panoul era alb. */
body #order-standard_cart .domain-checker-advanced .multiselect,
body #order-standard_cart .domain-checker-advanced .multiselect:hover,
body #order-standard_cart .domain-checker-advanced .multiselect:focus,
body #order-standard_cart .domain-checker-advanced .multiselect:active,
body .domain-checker-container.domain-checker-advanced .multiselect {
  background-color: transparent;
  color: var(--lp-text-soft);
}

body #order-standard_cart .domain-checker-advanced .multiselect .caret {
  border-top-color: var(--lp-text-muted);
}

/* `.domain-checker-advanced label{color:#333}` — „Căutare sigură" și
   etichetele din dropdownul de TLD-uri. */
body #order-standard_cart .domain-checker-advanced label,
body #order-standard_cart .domain-checker-advanced .multiselect-container label {
  color: var(--lp-text-soft);
}

/* Aceeași regulă forța și `background:#fff` pe bifa nativă, peste
   `accent-color` din 21.1. */
body #order-standard_cart .domain-checker-advanced input[type="checkbox"] {
  background: transparent;
  accent-color: #fff;
}

/* Tabelul de prețuri TLD. Capul are `background-color:#efefef` / `#f5f5f5` cu
   textul temei peste (~1.6:1) și o bară albastră Bootstrap de 6px dedesubt
   (`border-bottom:6px solid #97b5d2`, respectiv `border-color:#369`). Regulile
   există în AMBELE foi, deci `body` e obligatoriu. */
body .domain-pricing .tld-pricing-header .col-sm-2,
body .domain-pricing .tld-pricing-header .col-sm-4,
body .domain-pricing .tld-pricing-header .col-md-4,
body .domain-pricing .tld-pricing-header .col-xs-2,
body .domain-pricing .tld-pricing-header .col-xs-4,
body .domain-pricing .tld-pricing-header div:nth-child(odd) {
  background-color: var(--lp-raised);
  border-bottom: 1px solid var(--lp-line-strong);
  border-radius: var(--lp-radius-sm) var(--lp-radius-sm) 0 0;
  color: var(--lp-text-muted);
}

/* Zebra pe rânduri: `.tld-row.highlighted{background:#f3f9fd}` (albastru foarte
   deschis) cu extensia albă și prețurile #d1d5db peste => rânduri întregi la
   1.1:1. Clasa e pusă de JS pe rândurile vizibile alternante. */
body .domain-pricing .tld-row {
  border-bottom: 1px solid var(--lp-line);
}

body .domain-pricing .tld-row.highlighted {
  background: var(--lp-panel);
}

/* Pastilele de categorii TLD erau badge-uri Bootstrap: prima verde (#5cb85c),
   restul gri (#777), cu colțuri de 2px. Regulile au element (`a`) în față,
   deci fixul are și el. Activa preia convenția temei pentru „selectat": alb. */
body .tld-filters a {
  border-radius: 999px;
  padding: 5px 12px;
}

body .tld-filters a.badge-secondary {
  background-color: transparent;
  border: 1px solid var(--lp-line-strong);
  color: var(--lp-text-soft);
}

body .tld-filters a.badge-secondary[href]:hover,
body .tld-filters a.badge-secondary[href]:focus {
  background-color: rgb(255 255 255 / 0.06);
  color: var(--lp-text);
}

body .tld-filters a.badge-success {
  background-color: #fff;
  border: 1px solid #fff;
  color: #000;
}

body .tld-filters a.badge-success[href]:hover,
body .tld-filters a.badge-success[href]:focus {
  background-color: #f3f4f6;
  border-color: #f3f4f6;
  color: #000;
}

/* Rezultatele căutării: containerul „spotlight" e `#f8f8f8` cu cartonașe albe
   (`.spotlight-tld{background-color:#fff;border:1px solid #ddd;color:#555}`). */
body .spotlight-tlds {
  background-color: transparent;
  padding: 0;
}

body .spotlight-tld {
  background-color: var(--lp-panel);
  background-image: var(--lp-edge);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-sm);
  color: var(--lp-text);
}

body .spotlight-tld span { color: var(--lp-text-muted); }

body .spotlight-tld .invalid,
body .spotlight-tld .unavailable {
  background-color: var(--lp-raised);
  border-color: var(--lp-line);
  color: var(--lp-text-faint);
}

/* Ambele liste de rezultate au același buton hardcodat (`background-color:#555;
   border-color:#333;border-radius:3px`) și aceeași funcție — „adaugă în coș".
   Sunt acțiuni mici, repetate de ~10 ori pe ecran, deci primesc pastila cu
   contur a temei, nu pastila albă (aia rămâne pentru acțiunea unică de pe
   card sau de pe pas). */
body .spotlight-tld .btn:not(.domain-contact-support),
body .suggested-domains .btn:not(.domain-contact-support) {
  background-color: transparent;
  border: 1px solid var(--lp-line-strong);
  border-radius: 999px;
  color: var(--lp-text-soft);
  padding: 4px 14px;
  font-weight: 500;
}

body .spotlight-tld .btn:not(.domain-contact-support):hover,
body .spotlight-tld .btn:not(.domain-contact-support):focus,
body .suggested-domains .btn:not(.domain-contact-support):hover,
body .suggested-domains .btn:not(.domain-contact-support):focus {
  background-color: rgb(255 255 255 / 0.08);
  border-color: var(--lp-line-strong);
  color: var(--lp-text);
}

/* Stările de încărcare / fără rezultate ale casetei „Domenii sugerate" sunt
   `background-color:#f8f8f8` cu `opacity:.7`, peste textul deschis al temei. */
body .suggested-domains .domain-lookup-suggestions-loader,
body .suggested-domains .domain-lookup-suggestions-message {
  background-color: var(--lp-raised);
  color: var(--lp-text-muted);
  opacity: 1;
}

/* Capetele blocurilor de rezultate aveau o linie verde Bootstrap de 2px
   (`border-bottom:2px solid #62cb31`). */
body #DomainSearchResults .primary-domain-header,
body .suggested-domains .card-header,
body .suggested-domains .panel-heading {
  border-bottom: 1px solid var(--lp-line-strong);
  color: var(--lp-text);
}

/* NU e din lista de audit — găsit verificând fixurile de mai sus. Cele două
   casete promo de sub tabelul de prețuri („Adaugă Găzduire Web" /
   „Transferați domeniul dumneavoastră cu noi") sunt
   `.domain-promo-box{background-color:#f9f9f9;border:1px solid #ddd;color:#333}`.
   Rămâneau albe lângă tot ce reparăm aici, cu titlul alb pe alb. */
body .domain-promo-box {
  background-color: var(--lp-panel);
  background-image: var(--lp-edge);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  color: var(--lp-text-soft);
}

body .domain-promo-box h3 { color: var(--lp-text); }
body .domain-promo-box i { color: var(--lp-text-faint); }
body .domain-promo-box .small { color: var(--lp-text-muted); }


/* Mesajele de rezultat foloseau verdele și roșul Bootstrap (#367c36 = 2.5:1,
   #cd322d = 3.4:1 pe negru). Tema are deja token-uri calibrate pentru negru:
   --lp-up 9.6:1, --lp-down 7.5:1. Fiecare culoare apare în două variante în
   foaia order-formului, în și în afara coșului. */
body .domain-checker-available,
body #order-standard_cart .domain-checker-available {
  color: var(--lp-up);
}

body .domain-checker-invalid,
body .domain-checker-unavailable,
body #order-standard_cart .domain-checker-invalid,
body #order-standard_cart .domain-checker-unavailable {
  color: var(--lp-down);
}


/* -------------------------------------------------------------------------
   21.8 biblioteca de cunoștințe și anunțuri
   ------------------------------------------------------------------------- */

/* `.kb-rate-article{background-color:#eff7ff;color:#4d7cab;font-weight:200}` —
   un panou bleu-pal pe toată lățimea, cu butoanele „Da" / „Nu" (`.btn-link`,
   deci `--lp-text-soft` din temă) la ~1.2:1. Utilizatorul nu vedea că poate
   vota. Butoanele nu au nevoie de regulă proprie: `.btn-link` și hover-ul lui
   sunt deja corecte în temă, doar fundalul era greșit. */
body .kb-rate-article {
  background-color: var(--lp-panel);
  background-image: var(--lp-edge);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  color: var(--lp-text-soft);
  font-size: 15px;
  font-weight: 400;
  line-height: 32px;
}

/* `.kbarticles a .glyphicon{color:#8ce}` — singurele pete de culoare din
   pagina de listare, un rest de temă albastră. */
body .kbarticles a .glyphicon,
body .kbarticles a .glyphicon-file {
  color: var(--lp-text-muted);
}

body .kbarticles a:hover .glyphicon,
body .kbarticles a:focus .glyphicon {
  color: var(--lp-text);
}

/* `.kb-search>.input-group-btn>.btn{border-radius:0 3px 3px 0}` (0,3,0) bate
   `.input-group-btn .btn{border-radius:999px}` din temă (0,2,0) — butonul și
   câmpul de lângă el ieșeau din seturi diferite. */
body .kb-search > .input-group-btn > .btn {
  border-radius: 0 var(--lp-radius-sm) var(--lp-radius-sm) 0;
}

body .kb-search .form-control {
  border-radius: var(--lp-radius-sm) 0 0 var(--lp-radius-sm);
}

/* Placeholderul e singura etichetă a câmpului principal de căutare din KB (nu
   există <label> vizibil), dar token-ul general de placeholder (`--lp-text-dim`,
   custom.css:764) dă 2.8:1. Aici e conținut, nu decor. */
body .kb-search .form-control::placeholder {
  color: var(--lp-text-muted);
  opacity: 1;
}

/* `.kb-article-content{font-size:1.2em;line-height:1.2em;font-weight:200}` —
   cel mai lung text de citit din portal, la weight 200 pe negru (se subțiază
   și „înflorește"), cu interliniaj 1.2 pe rânduri de ~1200px. */
body .kb-article-content {
  color: var(--lp-text-soft);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.7;
  max-width: 72ch;
}

body .kb-article-content p { margin: 0 0 1.1em; }


/* -------------------------------------------------------------------------
   21.9 editorul de mesaje (contact.php, submitticket.php)
   -------------------------------------------------------------------------
   Secțiunea 20 din custom.css a scris deja regulile corecte, dar pierde:
   bootstrap-markdown din Six își pune `!important` pe fundaluri. Singurul loc
   din acest bloc unde folosim `!important` — pentru că originalul îl are.    */

/* `.md-editor>.md-preview,.md-editor>textarea.markdown-editor{background-color:
   #fff!important}`. Consecință: textul tichetului se scria alb pe alb. */
body .md-editor > textarea,
body .md-editor > textarea.markdown-editor,
body .md-editor > textarea.markdown-editor:focus {
  background-color: var(--lp-base) !important;
  border-top: 1px solid var(--lp-line) !important;
  border-bottom: 1px solid var(--lp-line) !important;
  color: var(--lp-text);
}

body .md-editor > .md-preview {
  background-color: var(--lp-base) !important;
  border-top: 1px solid var(--lp-line) !important;
  border-bottom: 1px solid var(--lp-line) !important;
  color: var(--lp-text-soft);
}

/* `.md-editor>.btn-toolbar{background-color:#fff!important}` — bara de unelte
   rămânea albă deasupra câmpului negru, iar `.md-footer` (care NU e prins de
   regula cu `!important`) era deja negru: widgetul arăta spart în două. */
body .md-editor > .md-header,
body .md-editor > .btn-toolbar {
  background-color: var(--lp-panel) !important;
}

/* Modul pe tot ecranul: `background:#fff!important` pe container, pe `.md-input`
   și pe `.md-preview`. Din tema neagră se ieșea într-un ecran alb. */
body .md-editor.md-fullscreen-mode {
  background: var(--lp-base) !important;
}

body .md-editor.md-fullscreen-mode .md-input,
body .md-editor.md-fullscreen-mode .md-input:focus,
body .md-editor.md-fullscreen-mode .md-input:hover {
  background: var(--lp-base) !important;
  color: var(--lp-text);
}

body .md-editor.md-fullscreen-mode .md-preview {
  background: var(--lp-base) !important;
  color: var(--lp-text-soft);
}

body .md-editor.md-fullscreen-mode .md-header {
  background: transparent !important;
}

/* Rândul „Tipuri de fișiere acceptate: ..." spune ce ai voie să încarci, deci
   e conținut. `.text-muted` (custom.css:138) îi dă `--lp-text-faint`, iar
   `.ticket-attachments-message{font-size:.8em}` îl coboară la ~11px => 4.33:1. */
body .ticket-attachments-message.text-muted {
  color: var(--lp-text-muted);
  font-size: 12px;
}
```

```css
/* =========================================================================
   RESPINSE / MODIFICATE FAȚĂ DE CE AU PROPUS AUDITORII
   =========================================================================

   1. domainchecker.php — ERR_TOO_MANY_REDIRECTS.
      Respins ca problemă de CSS: nu există selector de reparat, pagina nu se
      încarcă deloc și lanțul se reproduce și fără `systpl`. Rămân două acțiuni
      separate, în afara acestui bloc: (a) investigat redirectul WHMCS
      `/domainchecker.php -> / -> /domainchecker.php` (nu e în .htaccess, nu e
      hook local); (b) până atunci, `templates/lowpings-dark/header.tpl`
      liniile 143 și 206 să trimită la `cart.php?a=add&domain=register`.

   2. submitticket.php?step=1 — „Invalid Entity Requested".
      Respins: nu e un bug, e un URL de audit greșit. `step=1` nu există în
      WHMCS 9; paginile reale sunt `submitticket.php` (alegerea
      departamentului) și `submitticket.php?step=2&deptid=1`.

   3. reCAPTCHA — `filter: invert(1) hue-rotate(180deg)` pe cardul Google.
      Respinsă varianta cu filtru, păstrată varianta minimă (ramă + colțuri).
      Motiv: inversăm o interfață de consimțământ a unui terț — logo-ul și
      starea bifei ajung randate greșit, iar provocarea cu imagini se deschide
      într-un iframe `fixed` atașat la <body>, deci oricum nu e acoperită de
      filtru. Reparația corectă nu e CSS: în
      `templates/lowpings-dark/js/scripts.js` (~15753, plus `scripts.min.js`
      regenerat) apelul `grecaptcha.render(el, {sitekey, size, callback})`
      trebuie să primească în plus `theme: 'dark'`.

   4. `body #order-standard_cart .domain-input-group .btn-primary
      { border-color: var(--lp-line-strong) }`.
      Respinsă: auditorul însuși o dă ca opțională, iar butonul „Verificați" se
      rezolvă complet din fixul pe `.domain-selection-options .option` (21.6).
      Un contur pe o pastilă albă contrazice restul butoanelor principale ale
      temei, care n-au niciunul.

   5. Logotipul — `„Hosting"` la `rgb(255 255 255 / 0.4)` (3.66:1).
      Respinsă: e jumătatea unui wordmark, nu text de conținut. Pragul de
      4.5:1 din brief se aplică textului citibil, nu mărcii. Se schimbă doar
      dacă brandul o cere explicit, și atunci în `lp/chrome.css`, nu aici.

   6. „Butonul «Verificați» se pierde pe panoul alb" — nu primește regulă.
      Deduplicat: e un simptom al panoului `.option` alb, nu o problemă
      separată. Dispare odată cu 21.6.

   7. Butoanele din sugestiile de domenii — propunerea era pastilă ALBĂ.
      Modificat în pastilă cu contur, și unificat cu `.spotlight-tld .btn`
      (ambele au exact același stil hardcodat în sursă și aceeași funcție).
      Motiv: sunt acțiuni mici repetate de ~10 ori într-o listă; pastila albă
      e rezervată în temă acțiunii unice de pe card / de pe pas, altfel devine
      zgomot. Contrastul rămâne peste prag (`--lp-text-soft` pe `--lp-panel`).

   8. `body .kb-rate-article .btn-link` (normal și :hover).
      Respinsă ca redundantă: `.btn-link{color:var(--lp-text-soft)}` și
      `.btn-link:hover{color:var(--lp-text)}` există deja la custom.css:686 și
      :684. Problema era exclusiv fundalul bleu-pal.

   9. Duplicate fuzionate, o singură regulă fiecare:
      - `.panel-sidebar > .panel-heading` / `.panel-footer` / `.panel-title`
        (raportat de 3 auditori: register, knowledgebase, serverstatus);
      - `.panel-sidebar a.list-group-item.active` cu `#465054` (3 auditori);
      - `.list-group-item .badge` (2 auditori, aceeași regulă Six);
      - `.domain-checker-available/-invalid/-unavailable` (variantele din și
        din afara `#order-standard_cart`, într-un singur bloc);
      - butonul dezactivat de paginare și `.btn-checkout` dezactivat (aceeași
        cauză: `.btn.disabled{opacity:0.4}` din custom.css:589).
      Notă: referințele auditorilor la `styles.css` și la `all.css` țintesc
      aceleași reguli — `head.tpl` încarcă doar `all.min.css`, care le conține
      pe amândouă compilate.

  10. Curățenie opțională la aplicare (blocul funcționează și fără ea):
      după 21.4 rămân moarte `#order-standard_cart .products{display:flex...}`
      (custom.css:1047) și grila de pe `.products > .row`
      (custom.css:1895-1902). Pot fi șterse; sunt suprascrise oricum.

  11. Adăugat, deși NU era în lista de audit: `.domain-promo-box` (21.7).
      Găsit la verificarea vizuală a fixurilor de pe
      `cart.php?a=add&domain=register`: două casete `#f9f9f9` cu titlu alb pe
      alb, chiar sub tabelul reparat. Ar fi rămas singurele pete albe de pe o
      pagină altfel complet reparată.
   ========================================================================= */
```

Verificat pe server, nu doar pe hârtie: capturi înainte/după în `/tmp/claude-0/-home-lowpings-public-html-clienti-lowpings-ro/d9aa5a38-24da-433b-bf07-efe60df14881/scratchpad/audit/consolidator/` (`store.png` vs `store_patched.png` — grila de produse trece de la două coloane în scară de 320px la două coloane pline, egale; `dom_patched.png` — bannerul galben, tabelul TLD, pastilele de categorii și textarea de căutare). CSS-ul e și în `patch.css` în același director: 135 blocuri, acolade echilibrate, zero culori inventate (singurele literale sunt `#fff` / `#000` / `#f3f4f6`, deja convenția temei pentru butonul principal).

/* =========================================================================
   23. ce a rămas după verificare
   =========================================================================
   Verificarea finală n-a mai găsit nimic blocant. Ce urmează sunt cele 14
   observații cosmetice rămase, fiecare cu cauza ei.
   ========================================================================= */

/* `styles.css:3923` desenează o bară verticală albastru-pal între coloanele
   tabelului de prețuri TLD — ~25 de liniuțe luminoase pe fond negru. */
body .domain-pricing .two-row-center {
  border-right-color: var(--lp-line);
}

/* Six poziționează absolut butonul de căutare peste casetă
   (`.advanced-input .input-group-btn { position:absolute }`). În hero am
   anulat-o deja; în coș containerul e altul, deci regula se aplica din nou —
   pe mobil butonul acoperea textul tastat. */
body #order-standard_cart .advanced-input {
  background-color: transparent;
}

body #order-standard_cart .advanced-input .input-group-btn {
  position: static;
  right: auto;
  top: auto;
  width: auto;
}

@media (max-width: 767px) {
  body #order-standard_cart .input-group.advanced-input {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  body #order-standard_cart .advanced-input .input-group-btn,
  body #order-standard_cart .advanced-input .input-group-btn .btn {
    width: 100%;
  }
}

/* Bifa „Căutare sigură" rămăsese controlul nativ: pătrat alb plin. */
body #order-standard_cart input[type="checkbox"],
body section#home-banner input[type="checkbox"],
.home-widget input[type="checkbox"] {
  accent-color: #fff;
}

/* DataTables colorează coloana sortată cu un gri propriu, care apărea ca două
   benzi verticale mai deschise peste rândurile temei. Sortarea se vede oricum
   din iconiță. */
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable tbody tr > .sorting_1,
table.dataTable tbody tr > .sorting_2,
table.dataTable tbody tr > .sorting_3 {
  background-color: transparent;
}

/* Perechea de butoane din panoul de facturi scadente: „Adăugare fonduri" se
   rupea pe două rânduri și ieșea mai înalt decât vecinul. */
.panel-sidebar .panel-footer .btn,
.panel .panel-footer .btn + .btn {
  white-space: nowrap;
}

/* Câmpul de domeniu din widgetul de pe tabloul de bord era negru pe negru:
   se citea ca un gol, nu ca un câmp. */
.home-widget .form-control,
#frmDomainChecker .form-control {
  background-color: var(--lp-base);
  border-color: var(--lp-line-strong);
}

.home-widget .form-control:focus,
#frmDomainChecker .form-control:focus {
  border-color: rgb(255 255 255 / 0.35);
}

/* Butucul comutatorului bootstrap-switch era negru pe negru: comutatorul
   părea o pastilă pe jumătate goală, fără mâner vizibil. */
.bootstrap-switch .bootstrap-switch-label {
  background: var(--lp-raised);
  border-left: 1px solid var(--lp-line);
  border-right: 1px solid var(--lp-line);
  color: var(--lp-text-soft);
}

.bootstrap-switch {
  border-color: var(--lp-line);
  border-radius: 999px;
  overflow: hidden;
}

@media (max-width: 767px) {
  /* Tabelele depășeau cardul pe telefon, iar fundalul coloanei sortate se
     scurgea peste colțul rotunjit. Derulare pe orizontală, în interiorul
     cardului. */
  .table-responsive,
  .panel .dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .panel,
  .panel.card {
    overflow: hidden;
  }

  /* Selectul de monedă ieșea din cardul „Alege moneda" și plutea nelegat. */
  .sidebar-collapsed form,
  .sidebar-collapsed .form-inline,
  #currencyChooserForm {
    float: none;
    width: 100%;
    margin: 0;
  }

  .sidebar-collapsed .form-control,
  #currencyChooserForm .form-control {
    width: 100%;
  }
}

/* =========================================================================
   24. capul de pagină pe telefon
   =========================================================================
   Six împarte antetul în două secțiuni: `#header` (brand + limbă + cont + coș)
   și `#main-menu` (doar hamburgerul, pe mobil). Pe un ecran de 390px ieșeau
   patru rânduri de antet înainte de conținut, iar „Coșul meu" ajungea singur
   pe al treilea rând.

   Aici totul intră pe un rând: brand, coș, meniu. Nu se pierde nimic —
   Autentificare și Înregistrare sunt în meniu, sub „Contul meu", iar
   selectorul de limbă e în footer, lângă datele firmei.
   ========================================================================= */

.lp-mobile-toggle {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  cursor: pointer;
}

.lp-mobile-toggle:hover,
.lp-mobile-toggle:focus {
  background: rgb(255 255 255 / 0.06);
  border-color: var(--lp-line-strong);
}

.lp-mobile-toggle .icon-bar {
  display: block;
  width: 16px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--lp-text-soft);
}

/* 991px este pragul la care Six arată hamburgerul (`all.css`, max-width:991px). */
@media (max-width: 991px) {
  .lp-mobile-toggle {
    display: inline-flex;
  }

  section#header .container {
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 10px;
    flex-wrap: nowrap;
  }

  .lp-brand a {
    font-size: 16px;
  }

  /* Limbă, Autentificare, Înregistrare — toate există în altă parte. */
  section#header .top-nav > li.lp-secondary {
    display: none;
  }

  /* Ordinea pe telefon: brand la stânga, apoi coșul, iar butonul de meniu
     ultimul, în colțul din dreapta — unde îl caută degetul. */
  .lp-brand { order: 0; }
  section#header .top-nav { order: 1; }
  .lp-mobile-toggle { order: 2; }

  section#header .top-nav {
    margin-left: auto;
    flex-wrap: nowrap;
  }

  section#header .top-nav > li > a.btn {
    padding: 8px 16px;
    font-size: 13px;
  }

  /* Banda hamburgerului rămâne goală acum; îi scoatem chenarul ca să nu lase
     o dungă suspendată sub antet. Bordura revine când meniul e deschis. */
  section#main-menu {
    border-bottom: 0;
  }

  section#main-menu .navbar-header {
    display: none;
  }

  section#main-menu .navbar-main {
    min-height: 0;
    border: 0;
  }

  section#main-menu .navbar-collapse.in,
  section#main-menu .navbar-collapse.collapsing {
    border-bottom: 1px solid var(--lp-line);
    padding-bottom: 10px;
  }
}

/* Logat, rândul are cu două elemente mai mult: „Alerte" și „Ieșire". La 390px
   butonul de meniu ieșea din ecran, așa că strângem tot ce se poate strânge. */
@media (max-width: 420px) {
  section#header .container {
    padding-left: 16px;
    padding-right: 16px;
    gap: 6px;
  }

  .lp-brand a {
    font-size: 15px;
  }

  section#header .top-nav > li > a {
    padding: 6px 7px;
    font-size: 12.5px;
  }

  section#header .top-nav > li > a.btn {
    padding: 7px 12px;
    font-size: 12.5px;
  }

  section#header .top-nav > li.primary-action {
    padding-left: 8px;
    margin-left: 2px;
  }

  .lp-mobile-toggle {
    width: 38px;
    height: 38px;
  }
}

/* =========================================================================
   25. pagina de start a portalului
   =========================================================================
   Structura vine din `header.tpl` (eroul, banda de stare, scurtăturile) și
   `homepage.tpl` (catalog, domenii, ajutor). Datele vin din hook-ul
   `lp_homepage.php` — niciun preț nu e scris în șablon.
   ========================================================================= */

/* --------------------------------------------------------------- eroul -- */

section#home-banner.lp-home {
  padding: 64px 0 0;
}

.lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: start;
  text-align: left;
}

.lp-hero-copy h1 {
  margin: 0 0 16px;
  font-size: clamp(2rem, 4.2vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--lp-text);
}

.lp-hero-copy > p {
  margin: 0 0 24px;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--lp-text-muted);
}

.lp-hero-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.lp-hero-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  color: var(--lp-text-soft);
}

/* Bifa e desenată, nu o glifă de font: rămâne aliniată la orice mărime. */
.lp-hero-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--lp-text);
  border-bottom: 1.5px solid var(--lp-text);
  transform: rotate(-45deg);
  opacity: 0.55;
}

/* ------------------------------------------------ formularul de intrare -- */

.lp-hero-form {
  padding: 28px;
  background: var(--lp-panel);
  background-image: var(--lp-edge);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
}

.lp-field {
  margin-bottom: 16px;
}

.lp-field label {
  display: block;
  margin-bottom: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--lp-text-muted);
}

.lp-hero-form .form-control {
  height: 46px;
  background: var(--lp-base);
  border: 1px solid var(--lp-line-strong);
  border-radius: var(--lp-radius-sm);
  color: var(--lp-text);
  font-size: 14px;
}

.lp-hero-form .form-control:focus {
  border-color: rgb(255 255 255 / 0.35);
  box-shadow: none;
}

.lp-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 400;
  color: var(--lp-text-muted);
  cursor: pointer;
}

.lp-check input {
  margin: 0;
  accent-color: #fff;
}

.lp-captcha {
  margin-bottom: 18px;
}

/* Widgetul Google are lățime fixă; îl lăsăm să se micșoreze pe ecrane mici
   în loc să împingă panoul în afara paginii. */
.lp-captcha .g-recaptcha {
  transform-origin: 0 0;
}

.lp-btn,
.btn.lp-btn {
  display: inline-block;
  width: 100%;
  padding: 13px 24px;
  background: #fff;
  border: 0;
  border-radius: 999px;
  color: #000;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.lp-btn:hover,
.lp-btn:focus,
.btn.lp-btn:hover,
.btn.lp-btn:focus {
  background: #f3f4f6;
  color: #000;
}

.lp-hero-copy .lp-btn {
  width: auto;
  padding-left: 30px;
  padding-right: 30px;
}

.lp-login-links {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--lp-text-faint);
  text-align: center;
}

.lp-login-links a {
  color: var(--lp-text-muted);
}

.lp-login-links a:hover {
  color: var(--lp-text);
}

.lp-login-links span {
  margin: 0 8px;
  opacity: 0.5;
}

/* ------------------------------------------------------ banda de stare -- */

.lp-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 56px 0 0;
  padding: 16px 0;
  border-top: 1px solid var(--lp-line);
  font-size: 13.5px;
  color: var(--lp-text-muted);
}

.lp-status strong {
  color: var(--lp-text);
  font-weight: 600;
}

.lp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lp-up);
  box-shadow: 0 0 0 3px rgb(52 211 153 / 0.12);
}

.lp-dot.is-warn {
  background: var(--lp-warn);
  box-shadow: 0 0 0 3px rgb(251 191 36 / 0.12);
}

.lp-status-note {
  color: var(--lp-text-faint);
  font-size: 12.5px;
}

.lp-status a {
  margin-left: auto;
  color: var(--lp-text-muted);
  white-space: nowrap;
}

.lp-status a:hover {
  color: var(--lp-text);
}

/* ------------------------------------------------------- scurtăturile -- */

.home-shortcuts.lp-shortcuts {
  padding: 0;
  background: var(--lp-base);
  border-top: 0;
  border-bottom: 1px solid var(--lp-line);
}

.lp-shortcuts .container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.lp-shortcuts-label {
  margin: 0;
  font-size: 13px;
  color: var(--lp-text-faint);
}

.lp-shortcuts ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-shortcuts ul li {
  border: 0;
  margin: 0;
  padding: 0;
}

.lp-shortcuts ul li a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  background: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  font-size: 14px;
  color: var(--lp-text-soft);
}

.lp-shortcuts ul li a:hover {
  color: var(--lp-text);
}

.lp-shortcuts ul li a span {
  display: inline;
  color: var(--lp-text-faint);
}

/* ------------------------------------------- corpul: catalog și restul -- */

.lp-home-body > section {
  padding: 52px 0;
  border-bottom: 1px solid var(--lp-line);
}

.lp-home-body > section:first-child {
  padding-top: 48px;
}

.lp-catalog-head h2,
.lp-domains h2,
.lp-help h2,
.lp-news h2 {
  margin: 0 0 8px;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--lp-text);
}

.lp-catalog-head p {
  margin: 0 0 32px;
  max-width: 60ch;
  font-size: 14px;
  color: var(--lp-text-muted);
}

.lp-catalog-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 44px;
}

.lp-catalog-col h3 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lp-text-faint);
}

.lp-catalog-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-catalog-col li + li {
  border-top: 1px solid var(--lp-line);
}

/* Rândul: nume și precizare la stânga, preț la dreapta. Prețurile în cifre
   tabulare, ca să se alinieze pe verticală între ele. */
.lp-catalog-col li a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 10px 13px 0;
  margin: 0 -10px 0 0;
  border-radius: var(--lp-radius-sm);
  color: var(--lp-text-soft);
}

.lp-catalog-col li a:hover {
  background: rgb(255 255 255 / 0.04);
  padding-left: 10px;
  margin-left: -10px;
  color: var(--lp-text);
}

.lp-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lp-item-name {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--lp-text);
}

.lp-item-note {
  font-size: 12.5px;
  color: var(--lp-text-faint);
}

.lp-item-price {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--lp-text-muted);
  white-space: nowrap;
}

.lp-trial {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--lp-line);
}

.lp-trial p {
  flex: 1 1 240px;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--lp-text-muted);
}

.lp-btn-ghost,
.btn.lp-btn-ghost {
  display: inline-block;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--lp-line-strong);
  border-radius: 999px;
  color: var(--lp-text-soft);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
}

.lp-btn-ghost:hover,
.lp-btn-ghost:focus,
.btn.lp-btn-ghost:hover,
.btn.lp-btn-ghost:focus {
  background: rgb(255 255 255 / 0.06);
  border-color: rgb(255 255 255 / 0.32);
  color: var(--lp-text);
}

/* ------------------------------------------------------------ domenii -- */

.lp-domains {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 32px;
  justify-content: space-between;
}

.lp-domains-text p {
  margin: 0;
  max-width: 56ch;
  font-size: 14px;
  color: var(--lp-text-muted);
}

.lp-domains-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.lp-domains-price {
  margin-right: 6px;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--lp-text-muted);
}

.lp-domains-price strong {
  color: var(--lp-text);
  font-weight: 600;
}

/* -------------------------------------------------------------- ajutor -- */

.lp-help {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 44px;
  align-items: start;
}

.lp-help-main p {
  margin: 0 0 20px;
  max-width: 58ch;
  font-size: 14px;
  line-height: 1.65;
  color: var(--lp-text-muted);
}

.lp-help-contact {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-help-contact li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  font-size: 14px;
}

.lp-help-contact li + li {
  border-top: 1px solid var(--lp-line);
}

.lp-help-contact span {
  font-size: 12.5px;
  color: var(--lp-text-faint);
}

.lp-help-contact a,
.lp-help-contact strong {
  color: var(--lp-text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.lp-help-contact a:hover {
  color: var(--lp-text);
  text-decoration: underline;
}

/* ------------------------------------------------------- anunțuri etc -- */

.lp-news-item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  color: var(--lp-text-soft);
}

.lp-news-item + .lp-news-item {
  border-top: 1px solid var(--lp-line);
}

.lp-news-date {
  flex: 0 0 auto;
  font-family: var(--lp-font-mono);
  font-size: 12.5px;
  color: var(--lp-text-faint);
}

.lp-identity {
  margin: 0;
  padding: 28px 0 0;
  font-size: 12.5px;
  color: var(--lp-text-faint);
}

/* --------------------------------------------------------------- mobil -- */

@media (max-width: 991px) {
  .lp-hero {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .lp-help {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 767px) {
  section#home-banner.lp-home {
    padding-top: 40px;
  }

  .lp-hero-form {
    padding: 22px;
  }

  .lp-status {
    margin-top: 36px;
    align-items: flex-start;
  }

  .lp-status a {
    margin-left: 0;
    width: 100%;
  }

  .lp-shortcuts .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .lp-home-body > section {
    padding: 40px 0;
  }

  .lp-catalog-cols {
    gap: 34px;
  }

  .lp-domains-actions,
  .lp-trial {
    width: 100%;
  }

  .lp-domains-actions .lp-btn-ghost,
  .lp-trial .lp-btn-ghost {
    flex: 1 1 auto;
    text-align: center;
  }
}

@media (max-width: 380px) {
  /* Widgetul reCAPTCHA are 304px lățime fixă și ar depăși panoul. */
  .lp-captcha .g-recaptcha {
    transform: scale(0.88);
    margin-bottom: -8px;
  }
}

/* Six picteaza TOATE butoanele din erou cu alb:
   `all.css` → `section#home-banner .btn { color: #fff }`, adica (0,1,1,1),
   peste `.btn.lp-btn` (0,0,2,0). Pe pastila alba, textul devenea invizibil.
   Egalam greutatea in loc sa fortam cu !important. */
section#home-banner .btn.lp-btn,
section#home-banner .btn.lp-btn:hover,
section#home-banner .btn.lp-btn:focus {
  color: #000;
}

section#home-banner .btn.lp-btn-ghost {
  color: var(--lp-text-soft);
}

section#home-banner .btn.lp-btn-ghost:hover,
section#home-banner .btn.lp-btn-ghost:focus {
  color: var(--lp-text);
}

/* =========================================================================
   26. cardurile de navigație
   =========================================================================
   Un singur component, folosit pe pagina de start, pe autentificare, în contul
   de client și la alegerea departamentului de suport. Marcajul vine din
   `includes/lp-shortcuts.tpl`.

   Ținta de click e tot cardul, nu lățimea textului — pe telefon asta e
   diferența dintre „nimeresc" și „nu nimeresc".
   ========================================================================= */

.lp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 12px;
}

.lp-card {
  position: relative;
  display: block;
  padding: 18px 20px;
  background: var(--lp-panel);
  background-image: var(--lp-edge);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  color: var(--lp-text-soft);
  text-decoration: none;
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.lp-card:hover,
.lp-card:focus {
  background-color: rgb(255 255 255 / 0.045);
  border-color: var(--lp-line-strong);
  color: var(--lp-text-soft);
  text-decoration: none;
  transform: translateY(-1px);
}

.lp-card:focus-visible {
  outline: 2px solid rgb(255 255 255 / 0.45);
  outline-offset: 2px;
}

.lp-card-icon {
  display: block;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1;
  color: var(--lp-text-faint);
  transition: color 0.18s ease;
}

.lp-card:hover .lp-card-icon {
  color: var(--lp-text-muted);
}

.lp-card-title {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lp-text);
}

.lp-card-note {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--lp-text-faint);
}

/* Săgeata se mișcă la hover: singurul semn de mișcare din card, și e un
   răspuns la gestul omului, nu decor. */
.lp-card-go {
  position: absolute;
  top: 17px;
  right: 18px;
  font-size: 16px;
  line-height: 1;
  color: var(--lp-text-dim);
  transition: transform 0.18s ease, color 0.18s ease;
}

.lp-card:hover .lp-card-go {
  transform: translateX(3px);
  color: var(--lp-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .lp-card,
  .lp-card-go,
  .lp-card-icon {
    transition: none;
  }

  .lp-card:hover {
    transform: none;
  }

  .lp-card:hover .lp-card-go {
    transform: none;
  }
}

/* ------------------------------------------- unde apare componentul ----- */

/* Pagina de start: banda de sub erou. */
.lp-shortcuts .container {
  display: block;
  padding-top: 26px;
  padding-bottom: 30px;
}

.lp-shortcuts-label {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--lp-text-faint);
}

/* Pagina de autentificare. */
.lp-after-login {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--lp-line);
}

/* Alegerea departamentului de suport: rânduri mai late, textul e scurt. */
.lp-cards-dept {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 24px;
}

.lp-dept-intro {
  margin: 0;
  max-width: 70ch;
  color: var(--lp-text-muted);
}

/* ------------------------------- plăcile din contul de client ----------- */

/* Aceleași reguli de interacțiune ca la carduri: plăcile erau deja panouri,
   dar nu aratau ca ceva pe care se poate apasa. */
.tiles .tile {
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.tiles .tile:hover {
  background-color: rgb(255 255 255 / 0.045);
  border-color: var(--lp-line-strong);
  transform: translateY(-1px);
}

.tiles .tile:focus-within {
  outline: 2px solid rgb(255 255 255 / 0.45);
  outline-offset: 2px;
}

.tiles .tile:hover .icon {
  color: var(--lp-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .tiles .tile {
    transition: none;
  }

  .tiles .tile:hover {
    transform: none;
  }
}

@media (max-width: 767px) {
  .lp-cards {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
  }

  .lp-card {
    padding: 15px 16px;
  }

  .lp-card-note {
    display: none;
  }

  .lp-card-go {
    top: 15px;
    right: 15px;
  }
}

/* Departamentele nu au descriere în bază, deci cardul rămânea cu un gol între
   iconiță și titlu. Fără al doilea rând de text, iconița stă lângă titlu. */
.lp-cards-dept .lp-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 40px;
}

.lp-cards-dept .lp-card-icon {
  margin: 0;
  flex: 0 0 auto;
  font-size: 14px;
}

.lp-cards-dept .lp-card-go {
  top: 50%;
  transform: translateY(-50%);
}

.lp-cards-dept .lp-card:hover .lp-card-go {
  transform: translateY(-50%) translateX(3px);
}

/* =========================================================================
   27. înregistrare: tip client și preluarea datelor de la ANAF
   ========================================================================= */

.lp-client-type {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

/* Radio-ul ramane vizibil, nu ascuns si inlocuit cu `:has()`: daca selectorul
   nu e suportat, alegerea trebuie sa se vada oricum. */
.lp-type-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 3px 12px;
  margin: 0;
  padding: 16px 18px;
  background: var(--lp-panel);
  background-image: var(--lp-edge);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  cursor: pointer;
  font-weight: 400;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.lp-type-card:hover {
  border-color: var(--lp-line-strong);
}

.lp-type-card input[type="radio"] {
  grid-row: 1 / span 2;
  margin: 3px 0 0;
  accent-color: #fff;
  width: 16px;
  height: 16px;
}

.lp-type-card:has(input:checked) {
  border-color: rgb(255 255 255 / 0.38);
  background-color: rgb(255 255 255 / 0.045);
}

.lp-type-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--lp-text);
}

.lp-type-note {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--lp-text-faint);
}

/* ------------------------------------------------- identificatorul fiscal */

.lp-fiscal {
  margin-bottom: 8px;
  padding: 20px;
  background: var(--lp-raised);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
}

.lp-fiscal-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.lp-fiscal-field {
  flex: 1 1 240px;
  min-width: 0;
}

.lp-fiscal + .sub-heading,
.lp-fiscal-field + .lp-fiscal-field,
.lp-fiscal > .lp-fiscal-field {
  margin-top: 14px;
}

.lp-fiscal label {
  display: block;
  margin-bottom: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--lp-text-muted);
}

.lp-fiscal .form-control {
  width: 100%;
  height: 44px;
  background: var(--lp-base);
  border: 1px solid var(--lp-line-strong);
  border-radius: var(--lp-radius-sm);
  color: var(--lp-text);
}

.lp-fiscal .form-control:focus {
  border-color: rgb(255 255 255 / 0.35);
  box-shadow: none;
}

.lp-fiscal .field-help-text {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--lp-text-faint);
}

#lpAnafBtn {
  flex: 0 0 auto;
  height: 44px;
  margin-bottom: 24px;
}

#lpAnafBtn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* Raspunsul de la ANAF: verde cand firma e in regula, chihlimbariu cand e
   inactiva sau cand n-am putut prelua. Niciodata rosu — nu e o eroare a
   omului care completeaza. */
.lp-anaf-status {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--lp-text-muted);
}

.lp-anaf-status:empty {
  display: none;
}

.lp-anaf-status.is-ok {
  color: var(--lp-up);
}

.lp-anaf-status.is-warn {
  color: var(--lp-warn);
}

@media (max-width: 575px) {
  #lpAnafBtn {
    width: 100%;
    margin-bottom: 0;
  }
}

/* Atributul `hidden` inseamna `display:none` din foaia browserului, deci orice
   `display` scris de noi il bate — butonul „Preia datele firmei" ramanea vizibil
   la persoana fizica. Il facem sa invinga, cum se astepta oricine. */
[hidden] {
  display: none !important;
}

/* =========================================================================
   28. înregistrare — trecerea de estetică
   =========================================================================
   Formularul era o coloană de câmpuri fără etichete, despărțite de linii
   subțiri, pe negru. Aici capătă: etichete reale, secțiuni grupate în panouri,
   și o ierarhie care se citește de sus în jos.
   ========================================================================= */

#registration {
  max-width: 860px;
}

/* Titlurile de secțiune erau linii cu textul centrat peste ele. Într-un
   formular, un titlu aliniat la stânga spune mai clar unde începe grupul. */
#registration .sub-heading {
  height: auto;
  margin: 34px 0 12px;
  padding: 0;
  border: 0;
  text-align: left;
}

#registration .sub-heading:first-of-type {
  margin-top: 0;
}

#registration .sub-heading span {
  position: static;
  top: auto;
  display: block;
  padding: 0;
  background: transparent;
  color: var(--lp-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Fiecare secțiune devine un panou. Fără nicio modificare de marcaj: rândul
   care urmează după titlu e exact grupul de câmpuri. */
#registration .sub-heading + .row {
  margin: 0;
  padding: 22px 20px 6px;
  background: var(--lp-panel);
  background-image: var(--lp-edge);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
}

#registration .sub-heading + .row > [class*="col-"] {
  padding-left: 10px;
  padding-right: 10px;
}

/* ------------------------------------------------------ câmpurile ------ */

#registration .form-group {
  margin-bottom: 18px;
}

/* Eticheta cu iconiță devine o etichetă normală, deasupra câmpului. */
#registration .lp-labelled {
  position: relative;
}

#registration .lp-labelled > label.field-icon {
  position: static;
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: auto;
  margin: 0 0 7px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--lp-text-muted);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  pointer-events: auto;
}

#registration .lp-labelled > label.field-icon i {
  width: 14px;
  font-size: 12px;
  color: var(--lp-text-dim);
  text-align: center;
}

.lp-lbl {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.lp-opt {
  font-size: 11.5px;
  font-style: normal;
  color: var(--lp-text-dim);
}

.lp-req {
  color: var(--lp-text-dim);
  font-style: normal;
}

#registration .lp-labelled .field,
#registration .lp-labelled .form-control,
#registration .form-group > .control > .form-control,
#registration select.field {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  background: var(--lp-base);
  border: 1px solid var(--lp-line-strong);
  border-radius: var(--lp-radius-sm);
  color: var(--lp-text);
  font-size: 14px;
  box-shadow: none;
}

#registration .lp-labelled .field:focus,
#registration .lp-labelled .form-control:focus,
#registration select.field:focus {
  border-color: rgb(255 255 255 / 0.35);
  box-shadow: none;
  outline: none;
}

/* Câmpul de telefon e împachetat de intl-tel-input; steagul stă în interior. */
#registration .iti {
  width: 100%;
}

/* ------------------------------------------------ parola și puterea ei -- */

#registration .password-strength-meter {
  padding-top: 26px;
}

#registration .password-strength-meter .progress {
  height: 4px;
  margin-bottom: 8px;
  background: rgb(255 255 255 / 0.08);
  border-radius: 999px;
  box-shadow: none;
}

#registration .password-strength-meter p {
  margin: 0;
  text-align: left;
  font-size: 12.5px;
  color: var(--lp-text-faint);
}

#registration .generate-password {
  margin-top: 26px;
  background: transparent;
  border: 1px solid var(--lp-line-strong);
  border-radius: 999px;
  color: var(--lp-text-soft);
  font-size: 13px;
  padding: 9px 18px;
}

#registration .generate-password:hover {
  background: rgb(255 255 255 / 0.06);
  color: var(--lp-text);
}

/* ------------------------------------ marketing, termeni, trimitere ----- */

.lp-optin,
.lp-tos {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 20px 0 0;
  padding: 16px 18px;
  background: var(--lp-raised);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  font-weight: 400;
  cursor: pointer;
}

.lp-optin input[type="checkbox"],
.lp-tos input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
  accent-color: #fff;
}

.lp-optin-text {
  display: block;
}

.lp-optin-text strong {
  display: block;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lp-text);
}

.lp-optin-text span {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--lp-text-faint);
}

.lp-tos {
  align-items: center;
  font-size: 13.5px;
  color: var(--lp-text-soft);
}

.lp-tos a {
  color: var(--lp-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#registration .recaptcha-container,
#registration .text-center.row {
  margin-top: 22px;
}

.lp-submit {
  margin-top: 26px;
  text-align: center;
}

.lp-submit .lp-btn {
  width: auto;
  min-width: 240px;
}

.lp-submit-note {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--lp-text-faint);
}

@media (max-width: 575px) {
  #registration .sub-heading + .row {
    padding: 18px 14px 2px;
  }

  .lp-submit .lp-btn {
    width: 100%;
    min-width: 0;
  }
}

/* `StatesDropdown.js` insereaza o A DOUA eticheta cu iconita pentru judet
   (aceeasi, cu `for="stateinput"`), cand schimba campul intre input si select.
   Ramanea o iconita orfana care impingea campul mai jos decat vecinii lui. */
#registration .lp-labelled > label.field-icon + label.field-icon {
  display: none;
}

/* Sectiunea cu un singur camp nu are nevoie de inaltimea uneia cu patru. */
#registration .sub-heading + .row:has(> [class*="col-"]:only-child) {
  padding-bottom: 4px;
}