/* =====================================================
   HostON WHMCS Theme — custom.css
   Variabile design identice cu hoston.ro
   Extrase din tailwind.config.ts + globals.css
   NU modifica all.css / theme.css / all.min.css
   ===================================================== */

/* Import fonturi identice cu hoston.ro */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Variabile CSS ─────────────────────────────────── */
:root {
  /* Culori — din tailwind.config.ts hoston.ro */
  --hn-primary:        #0057FF;
  --hn-primary-dark:   #0044CC;
  --hn-primary-light:  #EBF2FF;
  --hn-primary-glow:   rgba(0, 87, 255, 0.08);

  --hn-text:           #0F172A;
  --hn-text-2:         #475569;
  --hn-muted:          #94A3B8;

  --hn-border:         #E2E8F0;
  --hn-bg:             #F8FAFC;
  --hn-white:          #FFFFFF;
  --hn-dark:           #0F172A;

  --hn-success:        #10B981;
  --hn-success-bg:     #ECFDF5;
  --hn-warning:        #F59E0B;
  --hn-warning-bg:     #FFFBEB;
  --hn-danger:         #EF4444;
  --hn-danger-bg:      #FEF2F2;

  /* Tipografie — din globals.css hoston.ro */
  --hn-font-heading:   'Plus Jakarta Sans', sans-serif;
  --hn-font-body:      'DM Sans', sans-serif;

  /* Geometrie — din tailwind.config.ts */
  --hn-radius:         12px;
  --hn-radius-sm:      8px;
  --hn-radius-btn:     8px;
  --hn-radius-modal:   16px;

  /* Umbre */
  --hn-shadow:         0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --hn-shadow-hover:   0 10px 40px rgba(0,0,0,0.12);
  --hn-shadow-modal:   0 25px 50px rgba(0,0,0,0.25);
}

/* ── Body și tipografie ────────────────────────────── */
body {
  font-family: var(--hn-font-body) !important;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--hn-font-heading) !important;
  font-weight: 800 !important;
}

/* ── Butoane primare ───────────────────────────────── */
.btn-primary, .btn-primary:focus {
  background-color: var(--hn-primary) !important;
  border-color: var(--hn-primary) !important;
  border-radius: var(--hn-radius-btn) !important;
  font-family: var(--hn-font-body) !important;
  font-weight: 600 !important;
}
.btn-primary:hover {
  background-color: var(--hn-primary-dark) !important;
  border-color: var(--hn-primary-dark) !important;
}

/* ── Formulare ─────────────────────────────────────── */
.form-control {
  border-radius: var(--hn-radius-sm) !important;
  border-color: var(--hn-border) !important;
  font-family: var(--hn-font-body) !important;
}
.form-control:focus {
  border-color: var(--hn-primary) !important;
  box-shadow: 0 0 0 3px var(--hn-primary-glow) !important;
}

/* ── Links ─────────────────────────────────────────── */
a { color: var(--hn-primary); }
a:hover { color: var(--hn-primary-dark); }

/* ── Panels / Cards ────────────────────────────────── */
.panel, .panel-default {
  border-radius: var(--hn-radius) !important;
  border-color: var(--hn-border) !important;
  box-shadow: var(--hn-shadow) !important;
}
.panel-heading {
  font-family: var(--hn-font-heading) !important;
  font-weight: 700 !important;
  border-radius: var(--hn-radius) var(--hn-radius) 0 0 !important;
}

/* ── Badges status ─────────────────────────────────── */
.label-success, .badge-success { background-color: var(--hn-success) !important; }
.label-danger,  .badge-danger  { background-color: var(--hn-danger) !important; }
.label-warning, .badge-warning { background-color: var(--hn-warning) !important; }
.label-primary, .badge-primary { background-color: var(--hn-primary) !important; }
.label, .badge {
  border-radius: 99px !important;
  font-family: var(--hn-font-body) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
}

/* ── Sidebar meniu ─────────────────────────────────── */
.list-group-item {
  border-color: var(--hn-border) !important;
  font-family: var(--hn-font-body) !important;
}
.list-group-item.active {
  background-color: var(--hn-primary) !important;
  border-color: var(--hn-primary) !important;
}

/* ── Paginare ───────────────────────────────────────── */
.pagination > li > a { color: var(--hn-primary) !important; }
.pagination > .active > a {
  background-color: var(--hn-primary) !important;
  border-color: var(--hn-primary) !important;
}

/* ── Taburi PF / PJ ────────────────────────────────── */
.hn-type-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.hn-type-tab {
  border: 2px solid var(--hn-border);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--hn-white);
}
.hn-type-tab.active,
.hn-type-tab:hover {
  border-color: var(--hn-primary);
  background: var(--hn-primary-light);
}
.hn-type-tab .tab-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--hn-text);
}
.hn-type-tab.active .tab-title { color: var(--hn-primary); }
.hn-type-tab .tab-sub {
  font-size: 12px;
  color: var(--hn-muted);
}
.hn-company-fields { display: none; }
.hn-company-fields.visible { display: block; }

/* ── ANAF verificare ───────────────────────────────── */
.hn-anaf-row { display: flex; gap: 8px; }
.hn-anaf-row input { flex: 1; }
.hn-anaf-btn {
  height: 38px;
  padding: 0 14px;
  background: var(--hn-primary);
  color: #fff;
  border: none;
  border-radius: var(--hn-radius-sm);
  font-family: var(--hn-font-body);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.hn-anaf-btn:hover { background: var(--hn-primary-dark); }
.hn-anaf-result {
  background: var(--hn-success-bg);
  border: 1px solid #A7F3D0;
  border-radius: var(--hn-radius-sm);
  padding: 10px 14px;
  margin-top: 8px;
  font-size: 13px;
  color: #065F46;
  display: none;
}
.hn-anaf-result.visible { display: block; }
.hn-anaf-result.error {
  background: var(--hn-danger-bg);
  border-color: #FECACA;
  color: #991B1B;
}

/* ── Banner recomandări ────────────────────────────── */
.hn-referral-banner {
  background: linear-gradient(135deg, var(--hn-primary-light) 0%, #F0EEFF 100%);
  border: 1px solid #c7d7ff;
  border-radius: var(--hn-radius);
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.hn-referral-code {
  font-family: var(--hn-font-heading);
  font-size: 18px;
  font-weight: 800;
  color: var(--hn-primary);
  letter-spacing: 2px;
  background: var(--hn-white);
  padding: 6px 14px;
  border-radius: var(--hn-radius-sm);
  cursor: pointer;
}

/* ── Câmp recomandare la checkout/register ─────────── */
.hn-referral-field {
  background: var(--hn-warning-bg);
  border: 1.5px solid #FDE68A;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.hn-referral-field-title {
  font-size: 12px;
  font-weight: 700;
  color: #B45309;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 6px;
}

/* ── Descrieri produse — features-grid system ─────────── */

.product-description {
  font-family: var(--hn-font-body);
  line-height: 1.6;
}

/* Grid cards */
.features-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}

.feature-section {
  flex: 1;
  min-width: 260px;
  background: var(--hn-white);
  border: 1px solid var(--hn-border);
  border-radius: var(--hn-radius);
  padding: 0;
  box-shadow: var(--hn-shadow);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.feature-section:hover {
  box-shadow: 0 6px 24px rgba(0,87,255,0.10);
  transform: translateY(-1px);
}

/* Card header */
.feature-section-title {
  font-family: var(--hn-font-heading);
  font-size: 11px;
  font-weight: 700;
  color: var(--hn-primary);
  background: var(--hn-primary-light);
  padding: 10px 14px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid rgba(0,87,255,0.12);
  display: flex;
  align-items: center;
  gap: 7px;
}
.feature-section-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 13px;
  background: var(--hn-primary);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Feature rows */
.feature-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid var(--hn-border);
  font-size: 13px;
  cursor: help;
  transition: background 0.1s;
}
.feature-row:last-child { border-bottom: none; }
.feature-row:hover { background: var(--hn-bg); }

/* Left: icon + label */
.feature-key {
  color: var(--hn-text-2);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.feature-key i {
  color: var(--hn-primary);
  width: 15px;
  text-align: center;
  font-size: 12px;
  opacity: 0.8;
  flex-shrink: 0;
}

/* Right: value pill */
.feature-val {
  font-weight: 700;
  font-size: 12px;
  color: var(--hn-primary);
  background: var(--hn-primary-light);
  padding: 2px 10px;
  border-radius: 99px;
  white-space: nowrap;
  line-height: 1.6;
}

/* Unavailable feature */
.val-no {
  color: var(--hn-danger)  !important;
  background: var(--hn-danger-bg) !important;
}

/* Row marked as disabled */
.hx-off { opacity: 0.55; }
.hx-off .feature-key { color: var(--hn-muted) !important; }
.hx-off .feature-val { color: var(--hn-muted) !important; background: var(--hn-bg) !important; }

/* Extra bullets list below the grid */
.product-description > ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 0 !important;
  background: var(--hn-bg);
  border: 1px solid var(--hn-border);
  border-radius: var(--hn-radius-sm);
  padding: 10px 14px !important;
}
.product-description > ul > li {
  padding: 4px 0;
  font-size: 13.5px;
  color: var(--hn-text-2);
  border-bottom: none !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.product-description > ul > li::before { display: none !important; }
.product-description > ul > li i.text-success,
.product-description > ul > li .fas.text-success,
.product-description > ul > li .fa.text-success { color: var(--hn-success) !important; }

/* Alert override */
.product-description .alert {
  border-radius: var(--hn-radius-sm) !important;
  font-size: 13px !important;
  margin-top: 14px !important;
}
.product-description .alert-info {
  background: #EFF8FF !important;
  border-color: #BFDBFE !important;
  color: #1E40AF !important;
}

@media (max-width: 600px) {
  .features-grid { flex-direction: column; }
  .feature-section { min-width: unset; }
}

/* ── hx-features: culori ────────────────────────────── */
:root {
  --hx-brand:    #a46eff;
  --hx-purple:   #7441c8;
  --hx-green:    #22c55e;
  --hx-red:      #ef4444;
  --hx-c-purple: #7441c8;
  --hx-c-red:    #ef4444;
  --hx-c-green:  #22c55e;
  --hx-c-orange: #f59e0b;
  --hx-c-blue:   #3b82f6;
  --hx-c-navy:   #1e3a8a;
}

/* variante culoare iconuri */
.hx-k i { color: inherit !important; }
.hx-k i.hx-ic-purple { color: var(--hx-c-purple) !important; }
.hx-k i.hx-ic-red    { color: var(--hx-c-red)    !important; }
.hx-k i.hx-ic-green  { color: var(--hx-c-green)  !important; }
.hx-k i.hx-ic-orange { color: var(--hx-c-orange) !important; }
.hx-k i.hx-ic-blue   { color: var(--hx-c-blue)   !important; }
.hx-k i.hx-ic-navy   { color: var(--hx-c-navy)   !important; }
.hx-section.hx-ic-purple .hx-k i { color: var(--hx-c-purple) !important; }
.hx-section.hx-ic-red    .hx-k i { color: var(--hx-c-red)    !important; }
.hx-section.hx-ic-green  .hx-k i { color: var(--hx-c-green)  !important; }
.hx-section.hx-ic-orange .hx-k i { color: var(--hx-c-orange) !important; }
.hx-section.hx-ic-blue   .hx-k i { color: var(--hx-c-blue)   !important; }
.hx-section.hx-ic-navy   .hx-k i { color: var(--hx-c-navy)   !important; }

/* variante culoare titlu sectiune */
.hx-section.hx-t-purple .hx-title { background: var(--hx-c-purple) !important; box-shadow: 0 10px 22px rgba(116,65,200,.22) !important; }
.hx-section.hx-t-red    .hx-title { background: var(--hx-c-red)    !important; box-shadow: 0 10px 22px rgba(239,68,68,.22)   !important; }
.hx-section.hx-t-green  .hx-title { background: var(--hx-c-green)  !important; box-shadow: 0 10px 22px rgba(34,197,94,.22)   !important; }
.hx-section.hx-t-orange .hx-title { background: var(--hx-c-orange) !important; box-shadow: 0 10px 22px rgba(245,158,11,.22)  !important; }
.hx-section.hx-t-blue   .hx-title { background: var(--hx-c-blue)   !important; box-shadow: 0 10px 22px rgba(59,130,246,.22)  !important; }
.hx-section.hx-t-navy   .hx-title { background: var(--hx-c-navy)   !important; box-shadow: 0 10px 22px rgba(30,58,138,.22)   !important; }
.hx-title.hx-t-purple { background: var(--hx-c-purple) !important; box-shadow: 0 10px 22px rgba(116,65,200,.22) !important; }
.hx-title.hx-t-red    { background: var(--hx-c-red)    !important; box-shadow: 0 10px 22px rgba(239,68,68,.22)   !important; }
.hx-title.hx-t-green  { background: var(--hx-c-green)  !important; box-shadow: 0 10px 22px rgba(34,197,94,.22)   !important; }
.hx-title.hx-t-orange { background: var(--hx-c-orange) !important; box-shadow: 0 10px 22px rgba(245,158,11,.22)  !important; }
.hx-title.hx-t-blue   { background: var(--hx-c-blue)   !important; box-shadow: 0 10px 22px rgba(59,130,246,.22)  !important; }
.hx-title.hx-t-navy   { background: var(--hx-c-navy)   !important; box-shadow: 0 10px 22px rgba(30,58,138,.22)   !important; }

/* variante culoare valori */
.hx-section { --hx-val: var(--hx-purple); }
.hx-section .hx-v { color: var(--hx-val) !important; }
.hx-section.hx-val-purple { --hx-val: var(--hx-c-purple); }
.hx-section.hx-val-red    { --hx-val: var(--hx-c-red); }
.hx-section.hx-val-green  { --hx-val: var(--hx-c-green); }
.hx-section.hx-val-orange { --hx-val: var(--hx-c-orange); }
.hx-section.hx-val-blue   { --hx-val: var(--hx-c-blue); }
.hx-section.hx-val-navy   { --hx-val: var(--hx-c-navy); }
.hx-section .hx-v.hx-no   { color: var(--hx-red) !important; }

/* ── hx-features: layout ────────────────────────────── */
.hx-features { margin-top: 12px; }
.hx-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.hx-title {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--hx-brand);
  color: #fff;
  font-weight: 850;
  font-size: 12px;
  letter-spacing: .35px;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 12px;
  box-shadow: 0 10px 22px rgba(116,65,200,.22);
  position: relative;
}
.hx-title:before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  display: inline-block;
  flex: 0 0 10px;
}
.hx-title:after {
  content: "";
  position: absolute;
  left: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  transform: scale(.6);
  opacity: 0;
  animation: hx-pulse 1.8s ease-in-out infinite;
}
@keyframes hx-pulse {
  0%   { transform: scale(.6); opacity: 0; }
  40%  { opacity: .6; }
  100% { transform: scale(2.0); opacity: 0; }
}
.hx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.07);
  background: rgba(255,255,255,.70);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  line-height: 1.15;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  cursor: help;
}
.hx-row:hover {
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.hx-k {
  font-weight: 650;
  opacity: .95;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.hx-k i {
  width: 18px;
  text-align: center;
  opacity: .85;
}
.hx-v {
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
  color: var(--hx-purple);
  background: transparent;
  border: none;
  padding: 0;
}
.hx-v.hx-yes { color: var(--hx-green) !important; }
.hx-v.hx-no  { color: var(--hx-red)   !important; }
.hx-row.hx-off { opacity: .72; filter: saturate(.9); }
.hx-row.hx-off .hx-v { color: var(--hx-red) !important; text-decoration: line-through; }
.hx-row.hx-no-line { opacity: .72 !important; filter: saturate(.9) !important; }
.hx-row.hx-no-line .hx-v { color: var(--hx-red) !important; text-decoration: none !important; }

@media (max-width: 680px) {
  .hx-grid { grid-template-columns: 1fr; }
  .hx-v { white-space: normal; }
}

/* ── Sync API: ascunde "Cont Client" când userul e logat ── */
body.hn-loggedin .hn-btn-client { display: none !important; }

/* ══════════════════════════════════════════════════════════
   PRODUCT LISTING CARDS (store pages)
   ══════════════════════════════════════════════════════════ */

/* Suppress <br> tags injected by WHMCS newline conversion */
.product-description br,
.features-grid br,
.feature-section br,
.feature-row br,
.feature-section-title br,
.hx-features br,
.hx-grid br,
.product-desc br,
.hn-bullets br,
.hn-note br {
  display: none !important;
}
/* Hide empty hn-bullets (when WHMCS extracted children) */
.hn-bullets:empty { display: none !important; }

/* Ascunde lista WHMCS features (li#productX-featureY) — conținut în features-grid */
.product-desc > ul > li[id*="-feature"],
.product-desc > ul:has(li[id*="-feature"]) {
  display: none !important;
}
/* Fallback pentru browsere fara :has() */
.product li[id*="-feature"] { display: none !important; }

/* Product grid layout */
.products-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch;
}
.product {
  background: #fff;
  border-radius: 16px;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 2px 12px rgba(30,64,175,.06), 0 1px 3px rgba(0,0,0,.04);
  display: flex;
  flex-direction: column;
  overflow: visible;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
}
.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(30,64,175,.13), 0 2px 8px rgba(0,0,0,.06);
  border-color: var(--hn-primary, #1D4ED8);
}

/* Product header — name + badge */
.product > header,
.product .panel-heading {
  background: linear-gradient(135deg, var(--hn-primary, #1D4ED8) 0%, #2563EB 100%);
  padding: 22px 22px 18px;
  position: relative;
  overflow: hidden;
}
.product > header::before,
.product .panel-heading::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
}
.product > header span,
.product .panel-heading h3,
.product .panel-heading .product-name {
  font-family: var(--hn-font-heading, 'DM Sans', sans-serif);
  font-size: 1.18rem;
  font-weight: 700;
  color: #fff;
  display: block;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -.01em;
}

/* Product description area — override orderform all.min.css (float:left;width:60%;font-size:.8em) */
.product-desc,
#order-standard_cart .products .product div.product-desc {
  flex: 1 !important;
  float: none !important;
  width: 100% !important;
  padding: 16px !important;
  font-size: 1em !important;
  background: #f8fafc;
  overflow: visible;
  box-sizing: border-box;
}

/* Hide garbled WHMCS auto-generated features list (parsed from HTML description) */
.product-desc > ul.list-unstyled,
.product-desc > ul:not(.product-description ul) {
  display: none;
}

/* Product footer — price + CTA — override orderform float:right;width:40% */
.product > footer,
.product .panel-footer,
#order-standard_cart .products .product footer {
  background: #fff;
  border-top: 1.5px solid #e2e8f0;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
}

/* Pricing block */
.product-pricing {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.product-pricing .price {
  font-family: var(--hn-font-heading, 'DM Sans', sans-serif);
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--hn-primary, #1D4ED8);
  line-height: 1.1;
  letter-spacing: -.03em;
}
.product-pricing .price-term,
.product-pricing .billing-cycle {
  font-size: .78rem;
  color: #64748b;
  font-weight: 500;
}
.product-pricing .price-from {
  font-size: .75rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Order button */
.btn-order-now,
a.btn-order-now,
.product .btn-success,
.product .btn-order-now {
  background: linear-gradient(135deg, var(--hn-primary, #1D4ED8) 0%, #2563EB 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-family: var(--hn-font-heading, 'DM Sans', sans-serif);
  font-size: .9rem;
  font-weight: 700;
  padding: 10px 22px !important;
  letter-spacing: .01em;
  transition: opacity .15s ease, transform .15s ease, box-shadow .15s ease;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(29,78,216,.25);
}
.btn-order-now:hover,
a.btn-order-now:hover,
.product .btn-success:hover,
.product .btn-order-now:hover {
  opacity: .92 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(29,78,216,.35) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════
   HostON Footer — CSS complet
   ═══════════════════════════════════════════════════════ */
@keyframes hn-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}
@keyframes hn-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
/* ── Footer wrapper ───────────────────────────────────── */
#hn-footer *, #hn-footer *::before, #hn-footer *::after {
  box-sizing: border-box;
}
#hn-footer {
  background: #0F172A; color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; line-height: 1.5; width: 100%;
}
#hn-footer a { text-decoration: none; }

/* ── Tech bar / ticker ────────────────────────────────── */
.hn-techbar {
  border-bottom: 1px solid rgba(255,255,255,.05);
  padding: 16px 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
          mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.hn-techbar-track {
  display: flex;
  animation: hn-marquee 14s linear infinite;
  will-change: transform;
}
.hn-techbar-track:hover { animation-play-state: paused; }
.hn-techbar-group {
  display: flex; align-items: center;
  gap: 48px; padding-right: 48px; flex-shrink: 0;
}
.hn-techbar-item { opacity: 0.7; transition: opacity 0.15s; }
.hn-techbar-item:hover { opacity: 1; }
.hn-techbar-item img { height: 32px; width: auto; object-fit: contain; display: block; }
.hn-techbar-item img.hn-bright { filter: brightness(2); }

/* ── Grid principal ───────────────────────────────────── */
.hn-main {
  max-width: 1280px; margin: 0 auto;
  padding: 56px 32px 40px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
  gap: 24px 32px;
}
/* ── Col 1: Brand ─────────────────────────────────────── */
.hn-brand-logo { display: inline-block; margin-bottom: 20px; }
.hn-brand-logo img { height: 36px; width: auto; object-fit: contain; }
.hn-brand-desc { color: #94A3B8; font-size: 13.5px; line-height: 1.7; margin-bottom: 20px; }
.hn-contact-list { display: flex; flex-direction: column; gap: 10px; list-style: none; padding-left: 0 !important; margin: 0 !important; }
.hn-contact-list li a,
.hn-contact-list li span {
  display: flex; align-items: flex-start; gap: 8px;
  color: #94A3B8; font-size: 13px; transition: color 0.15s;
}
.hn-contact-list li a:hover { color: #fff; }
.hn-contact-icon { color: #0057FF; flex-shrink: 0; margin-top: 1px; font-style: normal; line-height: 1; }
.hn-social { display: flex; gap: 10px; margin-top: 20px; }
.hn-social a {
  width: 32px; height: 32px; background: rgba(255,255,255,.06);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: #fff; transition: background 0.15s;
}
.hn-social a:hover { background: #0057FF; }
.hn-social svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Reset button Bootstrap pentru toggle coloane ────── */
/* Desktop: button invizibil, se comportă ca un div */
.hn-col-toggle {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  width: 100%;
  text-align: left;
  color: inherit !important;
  font-family: inherit;
  display: block !important;
  cursor: default;
  pointer-events: none;
}
.hn-col-toggle .hn-col-title {
  margin-bottom: 0 !important;
}
/* Mobile: button devine clickabil cu chevron */
@media (max-width: 600px) {
  .hn-col-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
    padding: 14px 0 !important;
    margin: 0 !important;
    cursor: pointer;
    pointer-events: auto;
  }
  .hn-col-toggle .hn-col-title {
    margin-bottom: 0 !important;
    color: #fff !important;
    font-size: 12px;
  }
}

/* ── Coloane linkuri ──────────────────────────────────── */
.hn-col-title {
  font-size: 14px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: #ffffff; margin-bottom: 16px; display: block;
}
.hn-col-links { list-style: none; display: flex; flex-direction: column; gap: 8px; padding-left: 0 !important; margin: 0 !important; }
.hn-col-links li a { color: #94A3B8; font-size: 13px; display: block; padding: 2px 0; transition: color 0.15s; }
.hn-col-links li a:hover { color: #fff; }

/* ── ANPC badges ──────────────────────────────────────── */
.hn-anpc-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hn-anpc-badges a { display: block; opacity: 0.7; transition: opacity 0.15s; }
.hn-anpc-badges a:hover { opacity: 1; }
.hn-anpc-badges img { height: 32px; width: auto; object-fit: contain; }

/* ── Plăți ────────────────────────────────────────────── */
.hn-payments-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: rgba(255,255,255,.35);
  margin-top: 28px; margin-bottom: 12px; display: block;
}
.hn-netopia { display: inline-block; border-radius: 10px; overflow: hidden; margin-bottom: 12px; transition: opacity 0.15s; }
.hn-netopia:hover { opacity: 0.9; }
.hn-netopia img { height: 36px; width: auto; object-fit: contain; display: block; }
.hn-payment-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hn-payment-chip { background: rgba(255,255,255,.06); color: #94A3B8; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; }

/* ── Bottom bar ───────────────────────────────────────── */
.hn-bottombar { border-top: 1px solid rgba(255,255,255,.05); }
.hn-bottombar-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 18px 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  font-size: 11.5px; color: #94A3B8;
}
.hn-bottombar-left { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.hn-bottombar-right { display: flex; align-items: center; gap: 20px; }
.hn-status-dot { display: flex; align-items: center; gap: 6px; }
.hn-status-dot span { width: 7px; height: 7px; border-radius: 50%; background: #10B981; display: inline-block; animation: hn-pulse 2s ease-in-out infinite; }
.hn-status-dot a { color: #94A3B8; transition: color 0.15s; }
.hn-status-dot a:hover { color: #fff; }
.hn-bnr-rate { color: #94A3B8; }
.hn-bnr-rate strong { color: #94A3B8; }

/* ── Desktop/Mobile visibility ────────────────────────── */
.hn-desktop-only { display: flex; }
.hn-mobile-only  { display: none; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .hn-main { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .hn-col1 { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .hn-desktop-only { display: none; }
  .hn-mobile-only  { display: flex; }
  .hn-main { grid-template-columns: 1fr; padding: 40px 20px 32px; }
  .hn-col-toggle .hn-col-title { margin-bottom: 0 !important; color: #fff; font-size: 12px; }
  .hn-col-chevron { width: 16px; height: 16px; color: #475569; transition: transform 0.2s; }
  .hn-col-toggle.open .hn-col-chevron { transform: rotate(180deg); }
  .hn-col-links { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s; }
  .hn-col-links.open { max-height: 400px; padding-top: 12px; padding-bottom: 8px; }
  .hn-bottombar-inner { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 20px; }
  .hn-bottombar-right { flex-direction: column; gap: 8px; }
}
@media (min-width: 601px) {
  .hn-col-links { max-height: none !important; overflow: visible !important; }
  .hn-col-chevron { display: none; }
  .hn-col-toggle .hn-col-title { color: #ffffff !important; margin-bottom: 16px !important; display: block; }
}

/* ── Aliniere lățime conținut cu navbar/footer (1280px) ── */
#hn-main-wrapper > .container {
  max-width: 1280px;
  padding-left: 24px;
  padding-right: 24px;
}

/* ── Billing Cycle Cards ──────────────────────────────── */
.hn-cycle-field { margin-bottom: 20px; }
.hn-cycle-label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--hn-text-2);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hn-cycle-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.hn-cycle-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 14px;
  background: #fff;
  border: 2px solid var(--hn-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
  text-align: center;
  min-width: 0;
  overflow: visible;
}
.hn-cycle-card input[type=radio] { display: none; }
.hn-cycle-card:hover {
  border-color: var(--hn-primary);
  box-shadow: 0 0 0 3px rgba(0,87,255,.08);
}
.hn-cycle-card.hn-cycle-active {
  border-color: var(--hn-primary);
  background: var(--hn-primary-light);
  box-shadow: 0 0 0 3px rgba(0,87,255,.10);
}
.hn-cc-period {
  font-weight: 700;
  font-size: 13px;
  color: var(--hn-text);
  line-height: 1.2;
}
.hn-cycle-active .hn-cc-period { color: var(--hn-primary); }
.hn-cc-price {
  font-size: 12px;
  font-weight: 600;
  color: var(--hn-text-2);
  line-height: 1.2;
}
.hn-cc-note {
  font-size: 10px;
  color: var(--hn-muted);
  line-height: 1;
}
.hn-cc-badge {
  position: absolute;
  top: -9px;
  right: -6px;
  background: #f97316;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 99px;
  white-space: nowrap;
  line-height: 1.5;
}
.hn-cc-badge-green { background: #16a34a; }
@media (max-width: 768px) {
  .hn-cycle-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
@media (max-width: 400px) {
  .hn-cycle-card { padding: 7px 6px; gap: 1px; }
  .hn-cc-period { font-size: 11px; }
  .hn-cc-price { font-size: 10px; }
  .hn-cc-badge { font-size: 9px; top: -7px; right: -4px; }
}

/* ── Bullets & Note (înlocuiesc <ul><li> din descrieri) ── */
.hn-bullets {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hn-bullet-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88em;
  color: var(--hn-text-2);
  line-height: 1.6;
}
.hn-bullet-item i { color: var(--hn-green, #16a34a); flex-shrink: 0; }
.hn-note {
  background: #eff6ff;
  border-left: 3px solid var(--hn-primary);
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 12px;
  font-size: 0.82em;
  color: #1e40af;
}
.hn-note i { margin-right: 6px; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
  .hn-type-tabs { grid-template-columns: 1fr; }
  .hn-referral-banner { flex-direction: column; align-items: flex-start; }
  #hn-main-wrapper > .container { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 480px) {
  .product > footer,
  .product .panel-footer { flex-direction: column !important; align-items: stretch !important; }
  .btn-order-now, a.btn-order-now,
  .product .btn-success { text-align: center !important; width: 100% !important; }
}

/* ═══════════════════════════════════════════════════════
   MOBILE — optimizare completă
   ═══════════════════════════════════════════════════════ */

/* Produse listing: spacing între carduri pe mobil */
@media (max-width: 767px) {
  .products .col-md-6 { margin-bottom: 16px; }
  #order-standard_cart { overflow-x: hidden; }
}

/* Product card: header + desc + footer mai compact pe telefon */
@media (max-width: 575px) {
  .product > header span,
  .product .panel-heading h3,
  .product .panel-heading .product-name { font-size: 1rem; }
  .product > header,
  .product .panel-heading { padding: 16px 16px 14px; }
  .product-desc,
  #order-standard_cart .products .product div.product-desc { padding: 12px !important; }
  .product-pricing .price { font-size: 1.3rem; }
  .product > footer,
  .product .panel-footer { padding: 12px 14px !important; gap: 8px; }
}

/* Product footer: side-by-side pe tabletă (481px-767px) */
@media (min-width: 481px) and (max-width: 767px) {
  .product > footer,
  .product .panel-footer {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  .btn-order-now, a.btn-order-now,
  .product .btn-success { width: auto !important; white-space: nowrap; }
}

/* Order summary pe mobil: delimitat vizual sub formular */
@media (max-width: 575px) {
  #orderSummary {
    margin-top: 20px;
    border-top: 2px solid var(--hn-border);
    padding-top: 16px;
  }
}

/* hx-row: previne overflow pe ecrane foarte mici */
@media (max-width: 380px) {
  .hx-row { gap: 4px; }
  .hx-v { white-space: normal; word-break: break-word; max-width: 50%; text-align: right; }
  .hx-k { min-width: 0; }
}

/* Cycle label: letter-spacing redus pe mobil */
@media (max-width: 480px) {
  .hn-cycle-label { letter-spacing: 0; font-size: 12px; }
}

/* ── Auth pages (login, 2FA challenge, reset password) ── */
.hn-auth-wrap {
  position: relative; z-index: 1;
  height: calc(100vh - 39px); /* 38px account-bar + 1px border */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  overflow-y: auto; /* scroll intern dacă ecranul e prea mic */
}
.hn-auth-card {
  background: rgba(255,255,255,0.93);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,.22), 0 1px 4px rgba(0,0,0,.08);
  border: 1px solid rgba(255,255,255,0.7);
  width: 100%;
  max-width: 440px;
  overflow: hidden;
}
.hn-auth-header {
  padding: 36px 40px 0;
  text-align: center;
}
.hn-auth-header img { height: 36px; width: auto; margin-bottom: 24px; }
.hn-auth-header h1 {
  font-size: 22px; font-weight: 700; color: #0F172A;
  margin: 0 0 6px; font-family: 'Plus Jakarta Sans', sans-serif;
}
.hn-auth-header p { font-size: 14px; color: #64748B; margin: 0 0 28px; }
.hn-auth-body { padding: 0 40px 32px; }
.hn-auth-body .form-group { margin-bottom: 18px; }
.hn-auth-body label.form-control-label {
  font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; display: block;
}
.hn-auth-body .input-group-text { background: #F8FAFC; border-color: #E2E8F0; color: #94A3B8; }
.hn-auth-body .form-control {
  border-color: #E2E8F0; background: #F8FAFC; color: #0F172A;
  font-size: 14px; height: 42px; transition: border-color .15s, box-shadow .15s;
}
.hn-auth-body .form-control:focus {
  border-color: #0057FF; background: #fff; box-shadow: 0 0 0 3px rgba(0,87,255,.1);
}
.hn-auth-body .btn-reveal-pw { border-color: #E2E8F0; background: #F8FAFC; color: #94A3B8; }
.hn-auth-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.hn-auth-remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #64748B; }
.hn-auth-remember input { margin: 0; }
.hn-auth-forgot { font-size: 13px; color: #0057FF; text-decoration: none; font-weight: 500; }
.hn-auth-forgot:hover { color: #0044CC; text-decoration: underline; }
.hn-auth-submit {
  width: 100%; height: 44px; background: #0057FF; color: #fff; border: none;
  border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .15s, transform .1s; font-family: 'Plus Jakarta Sans', sans-serif;
}
.hn-auth-submit:hover { background: #0044CC; transform: translateY(-1px); }
.hn-auth-submit:active { transform: translateY(0); }
.hn-auth-footer {
  background: #F8FAFC; border-top: 1px solid #E2E8F0;
  padding: 18px 40px; text-align: center; font-size: 13px; color: #64748B;
}
.hn-auth-footer a { color: #0057FF; font-weight: 600; text-decoration: none; margin-left: 4px; }
.hn-auth-footer a:hover { text-decoration: underline; }

/* OTP input în challenge form */
.hn-auth-body .form-control[name="otp"] {
  font-size: 20px; letter-spacing: 4px; text-align: center;
  height: 52px; font-weight: 700; font-family: monospace;
}

@media (max-width: 480px) {
  .hn-auth-wrap { height: calc(100vh - 39px); padding: 20px 12px; align-items: flex-start; }
  .hn-auth-card { border-radius: 12px; }
  .hn-auth-header { padding: 28px 20px 0; }
  .hn-auth-header h1 { font-size: 20px; }
  .hn-auth-body { padding: 0 20px 24px; }
  .hn-auth-body .form-control { font-size: 16px !important; }
  .hn-auth-row { flex-direction: column; gap: 12px; margin-bottom: 16px; }
  .hn-auth-remember, .hn-auth-forgot { font-size: 14px; }
  .hn-auth-submit { height: 48px; font-size: 16px; }
  .hn-auth-footer { padding: 16px 20px; }
}