/* =========================================================
   MaPaKov.hu 2026 Premium Design Layer
   Safe override file loaded after style.css
   ========================================================= */

:root {
  --premium-bg-1: #020617;
  --premium-bg-2: #07122a;
  --premium-bg-3: #0f1f3d;

  --premium-card: rgba(255,255,255,0.10);
  --premium-card-strong: rgba(255,255,255,0.16);
  --premium-border: rgba(255,255,255,0.18);

  --premium-text: #e5f0ff;
  --premium-muted: #a9b8d4;

  --premium-blue: #38bdf8;
  --premium-blue-2: #2563eb;
  --premium-purple: #7c3aed;
  --premium-gold: #facc15;

  --premium-radius: 26px;
  --premium-shadow: 0 24px 70px rgba(0,0,0,0.36);
}

/* háttér */
body {
  background:
    radial-gradient(circle at top left, rgba(56,189,248,0.20), transparent 34%),
    radial-gradient(circle at top right, rgba(124,58,237,0.20), transparent 32%),
    linear-gradient(135deg, var(--premium-bg-1), var(--premium-bg-2) 45%, var(--premium-bg-3));
  color: var(--premium-text);
}

/* felső sáv */
header.top,
header {
  background: rgba(2,6,23,0.72);
  color: var(--premium-text);
  border-bottom: 1px solid var(--premium-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

header h1 {
  color: var(--premium-text);
}

.lang a {
  color: var(--premium-muted);
}

.lang a.active,
.lang a:hover {
  color: var(--premium-blue);
}

/* promo bar */
#sk-promo-bar {
  background: rgba(15,23,42,0.86) !important;
  border-bottom: 1px solid var(--premium-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.promo-btn {
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--premium-blue), var(--premium-blue-2)) !important;
  box-shadow: 0 12px 30px rgba(37,99,235,0.34);
}

/* hero */
.hero {
  background:
    radial-gradient(circle at 18% 12%, rgba(56,189,248,0.32), transparent 30%),
    radial-gradient(circle at 78% 20%, rgba(124,58,237,0.34), transparent 34%),
    linear-gradient(135deg, rgba(15,23,42,0.96), rgba(30,41,59,0.78));
  border-bottom: 1px solid var(--premium-border);
  padding: 64px 20px;
}

.hero-inner {
  background: rgba(255,255,255,0.075);
  border: 1px solid var(--premium-border);
  border-radius: 34px;
  box-shadow: var(--premium-shadow);
  padding: 34px;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.hero-content h1 {
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.03;
  letter-spacing: -0.045em;
}

.hero-content p {
  color: var(--premium-muted);
  font-size: 18px;
  line-height: 1.65;
}

.tech-badges span {
  background: rgba(255,255,255,0.12) !important;
  color: #dff7ff !important;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

/* ajánlott csomag */
.hero-recommend {
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
  border: 1px solid var(--premium-border);
  box-shadow: 0 22px 55px rgba(0,0,0,0.32);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.rec-icon {
  background: linear-gradient(135deg, rgba(56,189,248,0.28), rgba(124,58,237,0.28));
  border: 1px solid rgba(255,255,255,0.22);
}

.rec-price {
  color: var(--premium-gold);
}

/* gombok */
.btn-primary,
.order-btn,
.card button,
.order-card button {
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--premium-blue), var(--premium-blue-2), var(--premium-purple)) !important;
  color: #fff !important;
  box-shadow: 0 16px 34px rgba(37,99,235,0.34);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn-primary:hover,
.order-btn:hover,
.card button:hover,
.order-card button:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 20px 42px rgba(37,99,235,0.46);
}

.btn-secondary {
  border-radius: 999px !important;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}

/* szekciók */
section:not(.hero) {
  color: var(--premium-text);
}

section:not(.hero) h2,
section:not(.hero) h3 {
  color: var(--premium-text);
}

section:not(.hero) p,
section:not(.hero) li {
  color: var(--premium-muted);
}

/* kártyák */
.card,
.config-card,
.order-card,
.backup-card,
.radio-card,
.os-card-inner {
  background: var(--premium-card) !important;
  color: var(--premium-text) !important;
  border: 1px solid var(--premium-border) !important;
  border-radius: var(--premium-radius) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,0.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.card:hover,
.card.active,
.backup-card:hover,
.radio-card:hover,
.os-card-inner:hover {
  transform: translateY(-4px);
  background: var(--premium-card-strong) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,0.38);
}

.card h3,
.card strong,
.card-price,
.order-card h3,
.order-card h4 {
  color: #fff !important;
}

.card-price {
  color: var(--premium-gold) !important;
}

/* űrlapok */
input,
select,
textarea {
  background: rgba(255,255,255,0.10) !important;
  color: var(--premium-text) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 16px !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(226,232,240,0.58) !important;
}

select option {
  color: #111827;
}

/* footer */
.site-footer {
  background: rgba(2,6,23,0.60);
  color: var(--premium-muted);
  border-top: 1px solid var(--premium-border);
}

.footer-links a {
  color: var(--premium-blue);
}

/* mobil */
@media (max-width: 700px) {
  header {
    padding: 18px 16px;
  }

  .hero {
    padding: 28px 12px;
  }

  .hero-inner {
    padding: 22px;
    border-radius: 26px;
  }

  .hero-content h1 {
    font-size: 34px;
  }

  .hero-content p {
    font-size: 15px;
  }

  .card,
  .config-card,
  .order-card {
    border-radius: 22px !important;
  }
}

/* ===== FIX 1: alsó részek túl világosak voltak ===== */

#packages,
#configurator,
.config,
.order-card,
.config-card {
  background: rgba(15,23,42,0.72) !important;
  color: #e5f0ff !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}

#packages .grid,
#configurator .config,
#configurator form,
.order-card form {
  background: transparent !important;
}

.card,
.config-card,
.order-card {
  background:
    linear-gradient(180deg, rgba(30,41,59,0.88), rgba(15,23,42,0.82)) !important;
}

.card p,
.card li,
.config-card p,
.config-card label,
.config-card small,
.order-card p,
.order-card label,
.order-card small,
.order-card div,
.order-card span {
  color: #cbd5e1 !important;
}

.card h3,
.config-card h3,
.order-card h3,
.order-card h4,
#configurator h2,
#packages h2 {
  color: #ffffff !important;
}

/* input mezők olvashatóság */
input,
select,
textarea {
  background: rgba(2,6,23,0.62) !important;
  color: #ffffff !important;
  border: 1px solid rgba(148,163,184,0.38) !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 4px rgba(56,189,248,0.16) !important;
}

/* csúszkák */
input[type="range"] {
  background: transparent !important;
  accent-color: #38bdf8;
}

/* konfigurátor nagy fehér hátterének leütése */
#configurator {
  border-radius: 32px !important;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 34px !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.34);
}

/* csomag rész */
#packages {
  border-radius: 32px !important;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 34px !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.34);
}

/* ÁSZF/GDPR linkek */
.order-card a,
.site-footer a {
  color: #38bdf8 !important;
}

/* túl halvány szövegek javítása */
.backup-card,
.radio-card,
.os-card-inner {
  color: #e5f0ff !important;
}

.backup-card *,
.radio-card *,
.os-card-inner * {
  color: inherit !important;
}


/* ===== FIX 2: Egyedi konfigurátor színes dashboard stílus ===== */

#configurator {
  position: relative;
  overflow: hidden;
}

#configurator::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(circle at 15% 20%, rgba(56,189,248,0.18), transparent 28%),
    radial-gradient(circle at 85% 18%, rgba(168,85,247,0.18), transparent 30%),
    radial-gradient(circle at 50% 95%, rgba(34,197,94,0.10), transparent 26%);
  pointer-events: none;
}

#configurator > * {
  position: relative;
  z-index: 1;
}

/* OS, backup, radio opciók színesebb kártyák */
.os-card-inner,
.backup-card,
.radio-card {
  background: linear-gradient(145deg, rgba(15,23,42,0.92), rgba(30,41,59,0.78)) !important;
  border: 1px solid rgba(148,163,184,0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 28px rgba(0,0,0,0.25);
}

/* kiválasztott állapot */
.os-card input:checked + .os-card-inner,
.backup-card:has(input:checked),
.radio-card:has(input:checked) {
  background: linear-gradient(145deg, rgba(37,99,235,0.34), rgba(168,85,247,0.28)) !important;
  border-color: rgba(56,189,248,0.95) !important;
  box-shadow:
    0 0 0 1px rgba(56,189,248,0.45),
    0 0 32px rgba(56,189,248,0.22),
    0 18px 42px rgba(0,0,0,0.34);
}

/* backup első zöld jelleg */
.backup-card.none:has(input:checked) {
  border-color: rgba(34,197,94,0.95) !important;
  box-shadow:
    0 0 0 1px rgba(34,197,94,0.45),
    0 0 30px rgba(34,197,94,0.18);
}

/* slider sáv modern színes */
input[type="range"] {
  height: 8px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #38bdf8, #8b5cf6, #f97316) !important;
  border: 0 !important;
  box-shadow: 0 0 18px rgba(56,189,248,0.20);
}

input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid #38bdf8;
  box-shadow: 0 0 24px rgba(56,189,248,0.65);
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid #38bdf8;
  box-shadow: 0 0 24px rgba(56,189,248,0.65);
  cursor: pointer;
}

/* ár kiemelése */
#price,
.price,
.total-price,
.order-total {
  color: #ffffff !important;
  text-shadow: 0 0 24px rgba(56,189,248,0.55);
}

/* Megrendelő adatai blokk szebb */
.order-card {
  background:
    radial-gradient(circle at 8% 10%, rgba(56,189,248,0.14), transparent 28%),
    radial-gradient(circle at 90% 0%, rgba(168,85,247,0.14), transparent 30%),
    linear-gradient(180deg, rgba(15,23,42,0.92), rgba(15,23,42,0.78)) !important;
}

/* inputok színes fókusz nélkül is */
.order-card input,
.order-card textarea,
.order-card select,
.config-card input,
.config-card textarea,
.config-card select {
  background: rgba(2,6,23,0.72) !important;
  border-color: rgba(56,189,248,0.35) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* megjegyzés doboz ne legyen fehér */
.notice,
.note,
.info,
.config-note,
.backup-note {
  background: rgba(15,23,42,0.76) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(56,189,248,0.28) !important;
  border-radius: 18px !important;
}

/* apró glow a konfigurátor címen */
#configurator h2 {
  text-shadow: 0 0 24px rgba(56,189,248,0.24);
}



/* ===== FIX 4: Élő rendelés összegzése panel ===== */

#configurator form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}

.live-summary-card {
  position: sticky;
  top: 18px;
  align-self: start;
  background:
    radial-gradient(circle at 15% 10%, rgba(56,189,248,0.22), transparent 32%),
    radial-gradient(circle at 95% 0%, rgba(168,85,247,0.22), transparent 32%),
    linear-gradient(180deg, rgba(15,23,42,0.96), rgba(2,6,23,0.88));
  border: 1px solid rgba(56,189,248,0.28);
  border-radius: 30px;
  padding: 24px;
  color: #e5f0ff;
  box-shadow:
    0 24px 70px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.summary-kicker {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(56,189,248,0.14);
  border: 1px solid rgba(56,189,248,0.28);
  color: #7dd3fc;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.live-summary-card h3 {
  margin: 0 0 18px;
  color: #fff !important;
  font-size: 24px;
  letter-spacing: -0.03em;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(148,163,184,0.16);
}

.summary-row span {
  color: #94a3b8;
}

.summary-row strong {
  color: #fff;
  text-align: right;
}

.summary-divider {
  height: 1px;
  margin: 18px 0;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,0.55), transparent);
}

.summary-price {
  font-size: 48px;
  line-height: 1;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.06em;
  text-shadow: 0 0 34px rgba(56,189,248,0.48);
}

.summary-price small {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  color: #94a3b8;
}

.summary-total {
  margin-top: 12px;
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.45;
}

.summary-total strong {
  color: #facc15;
}

.summary-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.summary-badges span {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #dbeafe;
  font-size: 12px;
  font-weight: 700;
}

.live-summary-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(56,189,248,0.32), transparent 36%, rgba(168,85,247,0.28));
  opacity: .38;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding: 1px;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

@media (max-width: 950px) {
  #configurator form {
    grid-template-columns: 1fr;
  }

  .live-summary-card {
    position: relative;
    top: auto;
}
}

@media (max-width: 600px) {
  .summary-price {
    font-size: 40px;
  }

  .live-summary-card {
    padding: 20px;
    border-radius: 24px;
  }
}

/* ===== FIX 5: Slider értékbuborékok + színes ikonok ===== */

#configurator .config label {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
  margin-bottom: 10px;
  color: #e5f0ff !important;
  font-weight: 800;
  letter-spacing: -0.01em;
}

#configurator .config label::before {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: auto;
  font-size: 18px;
  box-shadow: 0 12px 26px rgba(0,0,0,0.28);
}

/* CPU */
#configurator .config label:nth-of-type(1)::before {
  content: "🧠";
  background: linear-gradient(135deg, rgba(56,189,248,0.28), rgba(37,99,235,0.28));
  border: 1px solid rgba(56,189,248,0.42);
}

/* RAM */
#configurator .config label:nth-of-type(2)::before {
  content: "💾";
  background: linear-gradient(135deg, rgba(168,85,247,0.30), rgba(124,58,237,0.26));
  border: 1px solid rgba(168,85,247,0.42);
}

/* SSD */
#configurator .config label:nth-of-type(3)::before {
  content: "⚡";
  background: linear-gradient(135deg, rgba(249,115,22,0.30), rgba(250,204,21,0.20));
  border: 1px solid rgba(251,146,60,0.45);
}

#configurator .config label > span {
  margin-left: auto;
  padding: 8px 14px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(56,189,248,0.18), rgba(168,85,247,0.16));
  border: 1px solid rgba(56,189,248,0.30);
  color: #ffffff !important;
  font-weight: 900;
  box-shadow:
    0 0 24px rgba(56,189,248,0.16),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

#configurator .config input[type="range"] {
  margin-bottom: 12px;
}

/* ár nagyobb és prémiumabb a bal konfigurátorban */
#configurator .config h3 {
  margin-top: 28px;
  padding: 18px 20px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 10% 10%, rgba(56,189,248,0.18), transparent 30%),
    linear-gradient(135deg, rgba(15,23,42,0.92), rgba(30,41,59,0.70));
  border: 1px solid rgba(56,189,248,0.24);
  color: #e5f0ff !important;
}

#configurator .config h3 #price {
  display: inline-block;
  font-size: 34px;
  color: #facc15 !important;
  letter-spacing: -0.04em;
  margin-left: 8px;
}

/* ajánlott csomag doboz szebb */
.recommend {
  margin-top: 18px !important;
  padding: 16px 18px !important;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(37,99,235,0.20), rgba(124,58,237,0.16)) !important;
  border: 1px solid rgba(56,189,248,0.24) !important;
  color: #cbd5e1 !important;
}

.recommend strong {
  color: #ffffff !important;
}

.recommend .hint {
  color: #94a3b8 !important;
}

@media (max-width: 600px) {
  #configurator .config label {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #configurator .config label > span {
    width: auto;
  }

  #configurator .config h3 #price {
    font-size: 30px;
  }
}


/* ===== FIX 6: Konfigurátor layout rendezés ===== */

#configurator form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 360px !important;
  gap: 24px !important;
  align-items: start !important;
}

/* minden fő bal oldali blokk bal oszlopba */
#configurator form > .os-selector,
#configurator form > .backup-selector,
#configurator form > .config,
#configurator form > .note-box,
#configurator form > .order-card,
#configurator form > hr {
  grid-column: 1 / 2 !important;
}

/* összegzés jobb oldalon, végig látható */
#configurator form > .live-summary-card {
  grid-column: 2 / 3 !important;
  grid-row: 1 / span 8 !important;
  position: sticky !important;
  top: 90px !important;
}

/* felesleges hr ne törje meg a layoutot */
#configurator form > hr {
  width: 100%;
  opacity: 0.18;
  margin: 8px 0 !important;
}

/* Megjegyzés doboz vissza bal oldalra, ne lebegjen jobbra */
.note-box {
  width: 100% !important;
  margin: 18px 0 !important;
  padding: 18px 20px !important;
  background:
    linear-gradient(135deg, rgba(15,23,42,0.88), rgba(30,41,59,0.72)) !important;
  border: 1px solid rgba(56,189,248,0.28) !important;
  border-radius: 22px !important;
  color: #cbd5e1 !important;
}

/* megrendelő adatok teljes bal szélességben */
.order-card {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* űrlap kényelmesebb */
.order-card .form-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px 18px !important;
}

.order-card .field-full,
.order-card textarea,
.order-card .billing-box,
.order-card .billing-info,
.order-card .order-submit,
.order-card .legal-links {
  grid-column: 1 / -1 !important;
}

/* textarea legyen sötét, ne fehér */
.order-card textarea,
.note-box textarea,
textarea[name="customer_note"] {
  background: rgba(2,6,23,0.78) !important;
  color: #ffffff !important;
  border: 1px solid rgba(56,189,248,0.35) !important;
}

/* mobilon egy oszlop */
@media (max-width: 950px) {
  #configurator form {
    grid-template-columns: 1fr !important;
  }

  #configurator form > .live-summary-card,
  #configurator form > .os-selector,
  #configurator form > .backup-selector,
  #configurator form > .config,
  #configurator form > .note-box,
  #configurator form > .order-card,
  #configurator form > hr {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  #configurator form > .live-summary-card {
    position: relative !important;
    top: auto !important;
}
}

@media (max-width: 650px) {
  .order-card .form-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== FIX 7b: Céges adatok company-box célzott javítás ===== */

.order-card .company-box,
#company-fields.company-box {
  margin-top: 20px !important;
  padding: 20px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 8% 10%, rgba(56,189,248,0.14), transparent 30%),
    linear-gradient(135deg, rgba(15,23,42,0.92), rgba(30,41,59,0.76)) !important;
  border: 1px solid rgba(56,189,248,0.28) !important;
  color: #e5f0ff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 18px 44px rgba(0,0,0,0.24);
}

.order-card .company-box h4,
#company-fields.company-box h4 {
  color: #ffffff !important;
  margin-top: 0 !important;
}

.order-card .company-box label,
#company-fields.company-box label {
  color: #cbd5e1 !important;
}

.order-card .company-box input,
#company-fields.company-box input {
  background: rgba(2,6,23,0.78) !important;
  color: #ffffff !important;
  border: 1px solid rgba(56,189,248,0.35) !important;
}


/* ===== FIX 8: Jobb oldali üres sáv kitöltése ===== */

.live-summary-card {
  min-height: 620px;
}

.summary-v2-info {
  margin-top: 22px;
  display: grid;
  gap: 12px;
}

.summary-info-card {
  padding: 14px 15px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(56,189,248,0.10), rgba(168,85,247,0.10));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.summary-info-card strong {
  display: block;
  color: #ffffff;
  font-size: 14px;
  margin-bottom: 5px;
}

.summary-info-card span {
  display: block;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.4;
}

/* összegző kártya picit magasabb és prémiumabb */
.live-summary-card {
  background:
    radial-gradient(circle at 15% 8%, rgba(56,189,248,0.28), transparent 32%),
    radial-gradient(circle at 100% 4%, rgba(168,85,247,0.28), transparent 35%),
    radial-gradient(circle at 70% 100%, rgba(34,197,94,0.10), transparent 30%),
    linear-gradient(180deg, rgba(15,23,42,0.98), rgba(2,6,23,0.90)) !important;
}

/* mobilon ne legyen túl magas */
@media (max-width: 950px) {
  .live-summary-card {
    min-height: auto;
  }
}


/* ===== FIX 9: Extra trust / premium részletek ===== */

.summary-v2-info::after {
  white-space: pre-line;
  display: block;
  margin-top: 8px;
  padding: 16px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(34,197,94,0.12), rgba(56,189,248,0.10));
  border: 1px solid rgba(34,197,94,0.26);
  color: #d1fae5;
  font-size: 13px;
  line-height: 1.7;
  font-weight: 700;
}

/* Megrendelés gomb prémiumabb */
.order-submit {
  position: relative;
  overflow: hidden;
  min-height: 52px;
  font-size: 16px !important;
  letter-spacing: .01em;
}

.order-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-110%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transition: transform .7s ease;
}

.order-submit:hover::before {
  transform: translateX(110%);
}

/* űrlap blokk finom alsó glow */
.order-card {
  position: relative;
  overflow: hidden;
}

.order-card::after {
  content: "";
  position: absolute;
  inset: auto 8% -40px 8%;
  height: 80px;
  background: radial-gradient(circle, rgba(56,189,248,0.20), transparent 70%);
  pointer-events: none;
}

/* konfigurátor belső távolság */
#configurator {
  padding-bottom: 48px !important;
}


/* ===== FIX 10: Szélesebb megrendelő adatok ===== */

.order-card{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
}

.order-card .form-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:18px 22px !important;
}

.order-card .field{
    width:100% !important;
}

.order-card input,
.order-card select,
.order-card textarea{
    width:100% !important;
}

.order-card textarea{
    min-height:140px !important;
}

/* A bal oldali konfigurátor blokk is teljes szélességet kapjon */
#configurator .config-card{
    width:100% !important;
    max-width:none !important;
}


/* ===== FIX 10: Szélesebb megrendelő adatok ===== */

.order-card{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
}

.order-card .form-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:18px 22px !important;
}

.order-card .field{
    width:100% !important;
}

.order-card input,
.order-card select,
.order-card textarea{
    width:100% !important;
}

.order-card textarea{
    min-height:140px !important;
}

/* A bal oldali konfigurátor blokk is teljes szélességet kapjon */
#configurator .config-card{
    width:100% !important;
    max-width:none !important;
}


/* ===== FIX 11: Bal oszlop tágítása, megrendelő adatok szélesítése ===== */

#configurator form {
  grid-template-columns: minmax(760px, 1fr) 300px !important;
  gap: 30px !important;
}

#configurator form > .order-card {
  min-width: 760px !important;
}

#configurator form > .live-summary-card {
  width: 300px !important;
  max-width: 300px !important;
}

@media (max-width: 1180px) {
  #configurator form {
    grid-template-columns: 1fr !important;
  }

  #configurator form > .order-card {
    min-width: 0 !important;
  }

  #configurator form > .live-summary-card {
    width: 100% !important;
    max-width: none !important;
  }
}


/* ===== FIX 12: Megrendelő adatai teljes szélességben az alsó részen ===== */

#configurator form > .order-card {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  width: 100% !important;
  margin-top: 10px !important;
}

#configurator form > .note-box,
#configurator form > hr {
  grid-column: 1 / -1 !important;
}

#configurator form > .live-summary-card {
  grid-row: 1 / span 4 !important;
}

.order-card .form-grid {
  grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
}

.order-card {
  padding: 30px !important;
}

@media (min-width: 1150px) {
  .order-card .form-grid {
    grid-template-columns: repeat(4, minmax(180px, 1fr)) !important;
  }

  .order-card .field-full {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 750px) {
  .order-card .form-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ===== PREMIUM V3 STEP 1 START - Clean hero glow ===== */

.hero {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 78% 28%, rgba(34,211,238,.22), transparent 32%),
    radial-gradient(circle at 18% 70%, rgba(168,85,247,.18), transparent 34%),
    linear-gradient(135deg, #020617 0%, #07111f 48%, #020617 100%) !important;
}

.hero-inner {
  position: relative !important;
  border: 1px solid rgba(34,211,238,.28) !important;
  background:
    linear-gradient(135deg, rgba(15,23,42,.82), rgba(2,6,23,.62)) !important;
  box-shadow:
    0 24px 75px rgba(0,0,0,.42),
    0 0 55px rgba(34,211,238,.10) !important;
}

/* ===== PREMIUM V3 STEP 1 END ===== */

/* ===== PREMIUM V3 STEP 2 - Hero Node ===== */

.hero-graphic{

    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:28px;

    border-radius:28px;

    background:
        linear-gradient(135deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.02));

    border:1px solid rgba(34,211,238,.22);

    box-shadow:
        0 30px 70px rgba(0,0,0,.35),
        0 0 40px rgba(34,211,238,.12);

    backdrop-filter:blur(16px);

    animation:heroFloat 5s ease-in-out infinite;

}

.server-icon{

    filter:
        drop-shadow(0 0 18px rgba(34,211,238,.28))
        drop-shadow(0 0 35px rgba(59,130,246,.18));

}

.server-label{

    margin-top:16px;

    padding:8px 18px;

    border-radius:999px;

    background:rgba(15,23,42,.72);

    border:1px solid rgba(34,211,238,.28);

    color:#dbeafe;

    font-weight:700;

    letter-spacing:.04em;

}

@keyframes heroFloat{

    0%   {transform:translateY(0);}
    50%  {transform:translateY(-8px);}
    100% {transform:translateY(0);}

}

/* ===== END STEP 2 ===== */


/* ===== PREMIUM V3 STEP 3 START - Server room background ===== */

.hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    linear-gradient(90deg,
      rgba(2,6,23,.98) 0%,
      rgba(2,6,23,.94) 34%,
      rgba(2,6,23,.74) 56%,
      rgba(2,6,23,.42) 100%),
    url("/assets/img/server-room-bg.png") center center / cover no-repeat !important;
}

.hero::before,
.hero::after,
.hero-inner::after {
  display: none !important;
}

.hero-inner {
  background:
    linear-gradient(90deg,
      rgba(2,6,23,.86) 0%,
      rgba(2,6,23,.66) 52%,
      rgba(2,6,23,.36) 100%) !important;
}

/* ===== PREMIUM V3 STEP 3 END ===== */

/* ===== PREMIUM V3 STEP 6 START - Hero discounts redesign ===== */

.hero-discount-box {
  width: 210px !important;
  padding: 16px !important;
  border-radius: 24px !important;
  background:
    linear-gradient(180deg, rgba(15,23,42,.72), rgba(2,6,23,.48)) !important;
  border: 1px solid rgba(34,211,238,.34) !important;
  box-shadow:
    0 18px 45px rgba(0,0,0,.34),
    0 0 28px rgba(34,211,238,.12),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(16px);
}

.discount-title {
  text-align: center !important;
  color: #e0f2fe !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  margin-bottom: 14px !important;
}

.rec-discounts {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.discount-tile {
  min-width: 0 !important;
  min-height: 76px !important;
  padding: 10px 8px !important;
  border-radius: 17px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background:
    radial-gradient(circle at top, rgba(34,211,238,.14), transparent 48%),
    rgba(15,23,42,.62) !important;
  border: 1px solid rgba(148,163,184,.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.discount-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(34,211,238,.58) !important;
  box-shadow:
    0 0 22px rgba(34,211,238,.18),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.dt-months {
  color: rgba(226,232,240,.88) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.dt-percent {
  margin-top: 5px !important;
  color: #facc15 !important;
  font-size: 21px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: 0 0 16px rgba(250,204,21,.30);
}

/* ===== PREMIUM V3 STEP 6 END ===== */

/* ===== PREMIUM V3 STEP 6B - Discounts layout fix ===== */

.hero-discount-box {
  width: 255px !important;
  padding: 18px !important;
  border-radius: 26px !important;
}

.discount-title {
  text-align: center !important;
  margin-bottom: 15px !important;
}

.discount-title-main {
  display: block !important;
  color: #f8fafc !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
}

.discount-title small {
  display: block !important;
  margin-top: 4px !important;
  color: rgba(226,232,240,.72) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.rec-discounts {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}

.discount-tile {
  min-height: 88px !important;
  padding: 12px 10px !important;
  border-radius: 18px !important;
}

.dt-months {
  white-space: nowrap !important;
  font-size: 13px !important;
}

.dt-percent {
  font-size: 24px !important;
  margin-top: 8px !important;
}

/* ===== END STEP 6B ===== */

/* ===== PREMIUM V3 STEP 6 LIST ===== */

.discount-list{

    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:12px;

}

.discount-row{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:10px 14px;

    border-radius:14px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(34,211,238,.18);

    transition:.2s;

}

.discount-row:hover{

    transform:translateX(4px);

    border-color:rgba(34,211,238,.45);

    background:rgba(34,211,238,.08);

}

.discount-month{

    color:#dbeafe;

    font-size:14px;

    font-weight:700;

}

.discount-save{

    color:#facc15;

    font-size:20px;

    font-weight:900;

    text-shadow:0 0 10px rgba(250,204,21,.35);

}

/* ===== END STEP 6 LIST ===== */


/* ===== PREMIUM V3 STEP 7 START - NVMe VPS Node ===== */

.hero-graphic {
  background:
    radial-gradient(circle at center, rgba(34,211,238,.18), transparent 48%),
    linear-gradient(180deg, rgba(15,23,42,.66), rgba(2,6,23,.38)) !important;
  border: 1px solid rgba(34,211,238,.42) !important;
  box-shadow:
    0 22px 60px rgba(0,0,0,.38),
    0 0 42px rgba(34,211,238,.20),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.server-icon rect {
  fill: rgba(15,23,42,.82) !important;
  stroke: rgba(34,211,238,.70) !important;
  stroke-width: 1.4 !important;
}

.server-icon circle {
  filter: drop-shadow(0 0 8px #22c55e);
}

.server-icon rect[fill="#c7d2fe"] {
  fill: rgba(56,189,248,.65) !important;
}

.server-label {
  background:
    linear-gradient(135deg, rgba(34,211,238,.18), rgba(168,85,247,.12)) !important;
  border: 1px solid rgba(34,211,238,.52) !important;
  color: #f8fafc !important;
  box-shadow: 0 0 24px rgba(34,211,238,.18) !important;
}

/* ===== PREMIUM V3 STEP 7 END ===== */

/* ===== PREMIUM V3 FIX - Hero grid stabil elrendezés ===== */

.hero-inner {
  display: grid !important;
  grid-template-columns: minmax(320px, 1.15fr) 260px 360px !important;
  gap: 28px !important;
  align-items: center !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}

.hero-content {
  min-width: 0 !important;
}

.hero-recommend {
  justify-self: center !important;
  width: 260px !important;
  max-width: 260px !important;
}

.hero-discount-box {
  justify-self: center !important;
}

.hero-graphic {
  justify-self: end !important;
  width: 340px !important;
  max-width: 340px !important;
  transform: none !important;
}

.hero-graphic .server-icon {
  width: 250px !important;
  max-width: 250px !important;
  height: auto !important;
}

@media (max-width: 1100px) {
  .hero-inner {
    grid-template-columns: 1fr 260px !important;
  }

  .hero-graphic {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
  }
}

@media (max-width: 760px) {
  .hero-inner {
    grid-template-columns: 1fr !important;
  }

  .hero-recommend,
  .hero-graphic {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ===== END HERO GRID FIX ===== */

/* ===== PREMIUM V3 FIX - Hero vissza flex elrendezésre ===== */

.hero-inner {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 26px !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}

.hero-content {
  flex: 1 1 360px !important;
  min-width: 300px !important;
}

.hero-recommend {
  flex: 0 0 250px !important;
  width: 250px !important;
  max-width: 250px !important;
}

.hero-discount-box {
  flex: 0 0 230px !important;
  width: 230px !important;
  max-width: 230px !important;
}

.hero-graphic {
  flex: 0 0 320px !important;
  width: 320px !important;
  max-width: 320px !important;
  transform: none !important;
}

.hero-graphic .server-icon {
  width: 240px !important;
  max-width: 240px !important;
  height: auto !important;
}

@media (max-width: 1150px) {
  .hero-inner {
    flex-wrap: wrap !important;
  }

  .hero-graphic {
    flex: 0 0 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 760px) {
  .hero-inner {
    flex-direction: column !important;
  }

  .hero-content,
  .hero-recommend,
  .hero-discount-box,
  .hero-graphic {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
  }
}

/* ===== END HERO FLEX FIX ===== */

/* ===== PREMIUM V3 FIX - Hero compact width ===== */

.hero-inner {
  gap: 18px !important;
  padding: 28px !important;
}

.hero-content {
  flex: 1 1 350px !important;
}

.hero-recommend {
  flex: 0 0 230px !important;
  width: 230px !important;
  max-width: 230px !important;
}

.hero-discount-box {
  flex: 0 0 205px !important;
  width: 205px !important;
  max-width: 205px !important;
}

.hero-graphic {
  flex: 0 0 290px !important;
  width: 290px !important;
  max-width: 290px !important;
  padding: 20px !important;
}

.hero-graphic .server-icon {
  width: 220px !important;
  max-width: 220px !important;
}

.discount-row {
  padding: 8px 10px !important;
}

.discount-month {
  font-size: 12px !important;
}

.discount-save {
  font-size: 18px !important;
}

/* ===== END HERO COMPACT FIX ===== */

/* ===== PREMIUM V3 - Hero background full visible ===== */

.hero {
  background:
    linear-gradient(
      90deg,
      rgba(2,6,23,.82) 0%,
      rgba(2,6,23,.72) 28%,
      rgba(2,6,23,.52) 56%,
      rgba(2,6,23,.38) 100%
    ),
    url("/assets/img/server-room-bg.png") center center / cover no-repeat !important;
}

.hero-inner {
  background:
    linear-gradient(
      90deg,
      rgba(2,6,23,.66) 0%,
      rgba(2,6,23,.50) 48%,
      rgba(2,6,23,.32) 100%
    ) !important;
}

.hero-content {
  background:
    radial-gradient(circle at 35% 45%, rgba(2,6,23,.28), transparent 62%) !important;
}

/* ===== END HERO BG FULL VISIBLE ===== */

/* ===== PREMIUM V3 STEP 8 START - NVMe Node animations ===== */

/* LED pulzálás */
.server-icon circle {
  animation: nodeLedPulse 1.8s ease-in-out infinite;
  transform-origin: center;
}

.server-icon circle:nth-of-type(2) {
  animation-delay: .35s;
}

.server-icon circle:nth-of-type(3) {
  animation-delay: .7s;
}

/* Rack sorok finom fényanimációja */
.server-icon rect:nth-of-type(1),
.server-icon rect:nth-of-type(2),
.server-icon rect:nth-of-type(3) {
  animation: rackSoftGlow 3.2s ease-in-out infinite;
}

.server-icon rect:nth-of-type(2) {
  animation-delay: .45s;
}

.server-icon rect:nth-of-type(3) {
  animation-delay: .9s;
}

/* Data flow csíkok */
.server-icon rect:nth-of-type(4),
.server-icon rect:nth-of-type(5),
.server-icon rect:nth-of-type(6) {
  animation: dataFlow 2.4s ease-in-out infinite;
  transform-origin: left center;
}

.server-icon rect:nth-of-type(5) {
  animation-delay: .35s;
}

.server-icon rect:nth-of-type(6) {
  animation-delay: .7s;
}

@keyframes nodeLedPulse {
  0%, 100% {
    opacity: .65;
    filter: drop-shadow(0 0 4px #22c55e);
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 14px #22c55e) drop-shadow(0 0 26px #22c55e);
  }
}

@keyframes rackSoftGlow {
  0%, 100% {
    stroke: rgba(34,211,238,.45);
    filter: drop-shadow(0 0 8px rgba(34,211,238,.18));
  }
  50% {
    stroke: rgba(34,211,238,.95);
    filter: drop-shadow(0 0 18px rgba(34,211,238,.55));
  }
}

@keyframes dataFlow {
  0%, 100% {
    opacity: .55;
    transform: scaleX(.65);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.25);
  }
}

/* ===== PREMIUM V3 STEP 8 END ===== */

/* ===== PREMIUM STEP 9 - Equal hero cards + recommended redesign ===== */

.hero-recommend,
.hero-discount-box,
.hero-graphic {
  min-height: 420px !important;
  height: 420px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  border-radius: 28px !important;
}

.hero-recommend {
  position: relative !important;
  padding: 28px !important;
  background:
    radial-gradient(circle at top left, rgba(250,204,21,.18), transparent 36%),
    linear-gradient(180deg, rgba(24,24,28,.92), rgba(10,10,16,.88)) !important;
  border: 1px solid rgba(255,196,40,.75) !important;
  box-shadow:
    0 0 0 1px rgba(255,190,40,.15),
    0 20px 60px rgba(0,0,0,.45),
    0 0 40px rgba(255,196,40,.14) !important;
}

.hero-recommend::before {
  content: "🔥 LEGNÉPSZERŰBB";
  position: absolute;
  top: 22px;
  right: 20px;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(255,196,40,.12);
  border: 1px solid rgba(255,196,40,.35);
  color: #ffd95a;
}

.rec-icon {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 28px !important;
  margin-bottom: 22px !important;
}

.rec-title {
  font-size: 19px !important;
  font-weight: 950 !important;
  text-align: center !important;
  margin-top: 22px !important;
  color: #facc15 !important;
}

.rec-specs {
  font-size: 14px !important;
  text-align: center !important;
  opacity: .95 !important;
  margin-top: 16px !important;
  line-height: 1.4 !important;
}

.rec-price {
  font-size: 48px !important;
  font-weight: 950 !important;
  margin-top: 34px !important;
  text-align: center !important;
  color: #ffcf48 !important;
  line-height: 1 !important;
}

.rec-trial {
  font-size: 17px !important;
  margin-top: 20px !important;
  text-align: center !important;
}

.rec-vat {
  margin-top: auto !important;
  text-align: center !important;
  opacity: .78 !important;
  font-size: 14px !important;
}

/* ===== END PREMIUM STEP 9 ===== */

/* ===== PREMIUM V3 STEP 9B - Recommended card final polish ===== */

.hero-recommend {
  width: 280px !important;
  max-width: 280px !important;
  padding: 28px 26px !important;
}

.hero-recommend::before {
  content: none !important;
}

.rec-top {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 34px !important;
}

.rec-icon {
  width: 66px !important;
  height: 66px !important;
  flex: 0 0 66px !important;
  font-size: 32px !important;
  margin: 0 !important;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.22), rgba(255,255,255,.06)) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow:
    0 0 24px rgba(250,204,21,.20),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.rec-badge {
  padding: 8px 13px !important;
  border-radius: 999px !important;
  color: #ffd95a !important;
  background: rgba(255,196,40,.12) !important;
  border: 1px solid rgba(255,196,40,.38) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  box-shadow: 0 0 20px rgba(250,204,21,.12) !important;
}

.rec-title {
  margin-top: 8px !important;
  font-size: 22px !important;
  letter-spacing: .02em !important;
}

.rec-specs {
  margin-top: 18px !important;
  font-size: 14px !important;
}

.rec-price {
  font-size: 58px !important;
  letter-spacing: -1.5px !important;
  text-shadow: 0 0 18px rgba(255,210,70,.28) !important;
}

.rec-trial {
  font-size: 18px !important;
}

.rec-vat {
  padding-bottom: 4px !important;
}

/* ===== END STEP 9B ===== */

/* ===== Recommended card trial spacing ===== */

.rec-price {
  margin-bottom: 18px !important;
}

.rec-trial {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: 25px !important;
  font-weight: 850 !important;
  color: #ffffff !important;
  text-align: center !important;
  line-height: 1.22 !important;
}


/* ===== Recommended card spacing fix ===== */

.hero-recommend{
    justify-content:flex-start !important;
}

.rec-specs{
    margin-bottom:18px !important;
}

.rec-price{
    margin-top:20px !important;
    margin-bottom:18px !important;
    line-height:.95 !important;
}

.rec-trial{
    margin-top:0 !important;
    margin-bottom:0 !important;
    font-size:22px !important;
    line-height:1.2 !important;
}


/* ===== FIX - Recommended card compact balance ===== */

.hero-recommend{
  overflow:hidden !important;
  padding:26px 24px !important;
}

.rec-top{
  margin-bottom:24px !important;
}

.rec-title{
  margin-top:4px !important;
  font-size:20px !important;
  line-height:1.15 !important;
}

.rec-specs{
  margin-top:14px !important;
  font-size:13px !important;
  line-height:1.35 !important;
}

.rec-price{
  margin-top:24px !important;
  margin-bottom:14px !important;
  font-size:48px !important;
  line-height:.95 !important;
}

.rec-trial{
  font-size:18px !important;
  line-height:1.18 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}

.rec-badge{
  font-size:11px !important;
  padding:7px 10px !important;
}

html[lang="sk"] .rec-badge{
  font-size:10px !important;
  padding:7px 8px !important;
}

/* ===== END FIX ===== */

/* ===== MOBILE FIX FINAL: konfigurátor sorrend javítása ===== */
@media (max-width: 950px) {
  #configurator form > .os-selector {
}

  #configurator form > .backup-selector {
}

  #configurator form > .config {
margin-bottom: 0 !important;
  }

  #configurator form > .live-summary-card {
position: relative !important;
    top: auto !important;
    margin-top: 10px !important;
  }

  #configurator form > hr {
}

  #configurator form > .note-box {
}

  #configurator form > .order-card {
}
}


/* ===== MOBILE: Összegzés közelebb a csúszkákhoz ===== */
@media (max-width: 950px) {

  #configurator form {
    gap: 12px !important;
    row-gap: 12px !important;
  }

  #configurator form > .config {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  #configurator form > .live-summary-card {
    margin-top: -12px !important;
  }

}

/* ===== PYTHON FIX: Mobil végleges sorrend ===== */
/* Mobil sorrend:
   1 OS
   2 Backup
   3 Csúszkák
   4 Rendelés összegzése
   5 többi
*/
@media (max-width: 1180px) {
  #configurator form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    row-gap: 14px !important;
  }

  #configurator form > .os-selector {
}

  #configurator form > .backup-selector {
}

  #configurator form > .config {
margin-bottom: 0 !important;
  }

  #configurator form > .live-summary-card {
position: relative !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 4px !important;
  }

  #configurator form > hr {
}

  #configurator form > .note-box {
}

  #configurator form > .order-card {
}
}

/* ===== FINAL MOBILE RESET: természetes sorrend ===== */
@media (max-width: 1180px) {
  #configurator form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    gap: 14px !important;
    row-gap: 14px !important;
  }

  #configurator form > .os-selector,
  #configurator form > .backup-selector,
  #configurator form > .config,
  #configurator form > .live-summary-card,
  #configurator form > hr,
  #configurator form > .note-box,
  #configurator form > .order-card {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  #configurator form > .live-summary-card {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 4px !important;
  }

  #configurator form > .config {
    margin-bottom: 0 !important;
  }
}


/* ===== WOW 1: Prémium slider / csúszka effekt ===== */
#configurator input[type="range"] {
  height: 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #38bdf8, #8b5cf6) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 10px 26px rgba(56,189,248,.18) !important;
  cursor: pointer !important;
}

#configurator input[type="range"]::-webkit-slider-thumb {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 4px solid #38bdf8 !important;
  box-shadow:
    0 0 0 6px rgba(56,189,248,.18),
    0 10px 26px rgba(56,189,248,.35) !important;
}

#configurator input[type="range"]::-moz-range-thumb {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 4px solid #38bdf8 !important;
  box-shadow:
    0 0 0 6px rgba(56,189,248,.18),
    0 10px 26px rgba(56,189,248,.35) !important;
}

#configurator .config label {
  margin-top: 18px !important;
}

#configurator .config label span {
  background: rgba(56,189,248,.12) !important;
  border: 1px solid rgba(56,189,248,.28) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
}


/* ===== WOW 1B: Slider végleges célzott felülírás ===== */
#configurator .config input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 14px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #38bdf8 0%, #8b5cf6 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 10px 30px rgba(56,189,248,.22) !important;
  outline: none !important;
}

#configurator .config input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 4px solid #38bdf8 !important;
  box-shadow:
    0 0 0 7px rgba(56,189,248,.20),
    0 12px 30px rgba(56,189,248,.45) !important;
}

#configurator .config input[type="range"]::-moz-range-thumb {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 4px solid #38bdf8 !important;
  box-shadow:
    0 0 0 7px rgba(56,189,248,.20),
    0 12px 30px rgba(56,189,248,.45) !important;
}


/* ===== WOW 3: Valódi SVG OS logók ===== */
.os-card-inner {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  justify-content: flex-start !important;
  padding-left: 18px !important;
  padding-right: 48px !important;
}

.os-logo {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.28) !important;
  transition: transform .25s ease, filter .25s ease !important;
}

.os-card:hover .os-logo {
  transform: scale(1.08) rotate(-2deg) !important;
  filter: drop-shadow(0 0 12px rgba(56,189,248,.45)) !important;
}

.os-card input:checked + .os-card-inner .os-logo {
  transform: scale(1.12) !important;
  filter: drop-shadow(0 0 16px rgba(56,189,248,.65)) !important;
}

.os-card input:checked + .os-card-inner::after {
  content: "✓";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, #38bdf8, #8b5cf6);
  color: #fff;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(56,189,248,.35);
}

.os-card-inner::before {
  content: none !important;
}

@media (max-width: 650px) {
  .os-logo {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }

  .os-card-inner {
    gap: 12px !important;
    padding-left: 16px !important;
    padding-right: 46px !important;
  }
}


/* ===== WOW TOP 1: mapakov.sk promo sáv prémium ===== */
#sk-promo-bar {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  padding: 8px 18px !important;
  background:
    radial-gradient(circle at 15% 50%, rgba(56,189,248,.22), transparent 34%),
    linear-gradient(90deg, rgba(2,6,23,.96), rgba(15,23,42,.92), rgba(30,41,59,.94)) !important;
  border-bottom: 1px solid rgba(56,189,248,.22) !important;
  box-shadow: 0 10px 34px rgba(2,6,23,.45) !important;
  backdrop-filter: blur(14px) !important;
}

#sk-promo-bar .sk-promo-content {
  max-width: 1180px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  color: #e5f6ff !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
}

#sk-promo-bar .sk-promo-content::before {
  content: "🇸🇰";
  font-size: 18px;
  filter: drop-shadow(0 0 10px rgba(56,189,248,.45));
}

#sk-promo-bar strong {
  color: #ffffff !important;
  font-weight: 900 !important;
}

#sk-promo-bar .promo-btn {
  margin-left: 10px !important;
  padding: 7px 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
  color: #06111f !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.20),
    0 10px 26px rgba(37,99,235,.35) !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
}

#sk-promo-bar .promo-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.28),
    0 14px 34px rgba(56,189,248,.45) !important;
}

#sk-promo-close {
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  background: rgba(15,23,42,.82) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #ffffff !important;
}

@media (max-width: 700px) {
  #sk-promo-bar {
    padding: 10px 46px 10px 14px !important;
  }

  #sk-promo-bar .sk-promo-content {
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
    font-size: 13px !important;
    text-align: center !important;
  }

  #sk-promo-bar .promo-btn {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 8px 14px !important;
  }
}


/* ===== WOW TOP 2: Header prémium redesign ===== */
header.top {
  position: sticky !important;
  top: 48px !important;
  z-index: 9998 !important;
  max-width: 1180px !important;
  margin: 14px auto 18px auto !important;
  padding: 18px 22px !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(56,189,248,.24), transparent 36%),
    linear-gradient(135deg, rgba(15,23,42,.86), rgba(2,6,23,.82)) !important;
  border: 1px solid rgba(56,189,248,.22) !important;
  box-shadow:
    0 24px 70px rgba(2,6,23,.48),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter: blur(18px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

header.top h1 {
  margin: 0 !important;
  font-size: clamp(22px, 3vw, 34px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em !important;
  color: #ffffff !important;
  text-shadow: 0 12px 36px rgba(56,189,248,.22) !important;
}

header.top h1::before {
  content: "⚡ ";
  filter: drop-shadow(0 0 14px rgba(56,189,248,.55));
}

header.top h1::after {
  content: "Enterprise NVMe Hosting";
  display: block;
  margin-top: 7px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #93c5fd;
  font-weight: 800;
}

header.top .lang {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px !important;
  border-radius: 999px !important;
  background: rgba(2,6,23,.62) !important;
  border: 1px solid rgba(148,163,184,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  color: transparent !important;
}

header.top .lang a {
  min-width: 42px !important;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  color: #cbd5e1 !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease !important;
}

header.top .lang a:hover {
  color: #ffffff !important;
  background: rgba(56,189,248,.12) !important;
  transform: translateY(-1px) !important;
}

header.top .lang a.active {
  color: #06111f !important;
  background: linear-gradient(135deg, #38bdf8, #8b5cf6) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.22),
    0 12px 28px rgba(56,189,248,.28) !important;
}

@media (max-width: 700px) {
  header.top {
    top: 82px !important;
    margin: 10px 12px 16px 12px !important;
    padding: 15px 16px !important;
    border-radius: 24px !important;
    align-items: flex-start !important;
  }

  header.top h1 {
    font-size: 22px !important;
    max-width: 210px !important;
  }

  header.top h1::after {
    font-size: 10px !important;
    letter-spacing: .10em !important;
  }

  header.top .lang a {
    min-width: 36px !important;
    height: 31px !important;
    font-size: 12px !important;
  }
}


/* ===== Header alcím finom igazítás ===== */
header.top h1::after{
    padding-left: 12px !important;
    box-sizing: border-box;
}


/* ===== Enterprise alcím még beljebb ===== */
header.top h1::after{
    padding-left: 30px !important;
}


/* ===== Mobil: fejléc ne legyen sticky ===== */
@media (max-width: 700px) {
  header.top {
    position: relative !important;
    top: auto !important;
    margin: 12px 12px 20px 12px !important;
  }
}


/* ===== Mobil: hero kártyák üres rész csökkentése ===== */
@media (max-width: 700px) {
  .hero-recommend,
  .hero-discount-box,
  .hero-graphic {
    height: auto !important;
    min-height: 0 !important;
  }

  .hero-recommend {
    padding-bottom: 26px !important;
  }

  .hero-discount-box {
    padding-bottom: 28px !important;
  }

  .hero-graphic {
    padding-bottom: 30px !important;
  }
}


/* ===== Mobil: Kedvezmények kártya egy kicsit magasabb ===== */
@media (max-width: 700px) {
  .hero-discount-box {
    min-height: 360px !important;
    height: auto !important;
    padding-bottom: 36px !important;
  }
}


/* ===== Billing premium summary ===== */
.billing-premium-summary {
  margin-top: 14px !important;
  padding: 18px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 80% 20%, rgba(34,197,94,.16), transparent 35%),
    linear-gradient(135deg, rgba(2,6,23,.78), rgba(15,23,42,.92)) !important;
  border: 1px solid rgba(34,197,94,.28) !important;
  box-shadow:
    0 18px 46px rgba(2,6,23,.38),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  color: #e5e7eb !important;
}

.billing-topline,
.billing-price-row,
.billing-monthly-line {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.discount-green-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(22,163,74,.95), rgba(34,197,94,.95)) !important;
  color: #fff !important;
  font-weight: 900 !important;
  box-shadow: 0 0 22px rgba(34,197,94,.35) !important;
}

.discount-neutral-badge {
  color: #93c5fd !important;
  font-weight: 800 !important;
}

.billing-original-price {
  color: #94a3b8 !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 2px !important;
}

.billing-saving {
  color: #22c55e !important;
  font-weight: 900 !important;
}

.billing-final-box {
  margin: 14px 0 !important;
  padding: 16px 18px !important;
  border-radius: 20px !important;
  background:
    linear-gradient(135deg, rgba(22,163,74,.30), rgba(20,83,45,.72)) !important;
  border: 1px solid rgba(34,197,94,.50) !important;
  box-shadow:
    0 0 30px rgba(34,197,94,.18),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.billing-final-box span {
  color: #86efac !important;
  font-weight: 900 !important;
}

.billing-final-box strong {
  color: #4ade80 !important;
  font-size: 34px !important;
  font-weight: 1000 !important;
  text-shadow: 0 0 22px rgba(34,197,94,.35) !important;
}

.billing-monthly-line strong {
  color: #38bdf8 !important;
  font-weight: 900 !important;
}

.billing-backup-line {
  margin: 10px 0 !important;
  color: #facc15 !important;
  font-weight: 800 !important;
}

.billing-premium-summary small {
  color: #cbd5e1 !important;
}

@media (max-width: 700px) {
  .billing-topline,
  .billing-price-row,
  .billing-monthly-line,
  .billing-final-box {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .billing-final-box strong {
    font-size: 30px !important;
  }
}


/* ===== Billing info prémium CSS-only szépítés ===== */
#billingInfo {
  margin-top: 14px !important;
  padding: 18px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 85% 20%, rgba(34,197,94,.16), transparent 35%),
    linear-gradient(135deg, rgba(2,6,23,.82), rgba(15,23,42,.94)) !important;
  border: 1px solid rgba(34,197,94,.30) !important;
  box-shadow:
    0 18px 46px rgba(2,6,23,.35),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  color: #e5e7eb !important;
}

#billingInfo span[style*="green"] {
  color: #ffffff !important;
  background: linear-gradient(135deg, #16a34a, #22c55e) !important;
  border-radius: 999px !important;
}

#billingInfo strong:last-of-type {
  color: #4ade80 !important;
  font-size: 26px !important;
  text-shadow: 0 0 18px rgba(34,197,94,.35) !important;
}


/* ===== Billing megtakarítás sárga kiemelés ===== */
.billing-saving-box {
  margin: 12px 0 14px !important;
  padding: 14px 18px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(250,204,21,.18), rgba(120,53,15,.45)) !important;
  border: 1px solid rgba(250,204,21,.65) !important;
  box-shadow: 0 0 28px rgba(250,204,21,.22) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.billing-saving-box span {
  color: #fde68a !important;
  font-weight: 900 !important;
}

.billing-saving-box strong {
  color: #facc15 !important;
  font-size: 26px !important;
  font-weight: 1000 !important;
  text-shadow: 0 0 18px rgba(250,204,21,.45) !important;
}

@media (max-width: 700px) {
  .billing-saving-box {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}


/* ===== Billing eredeti ár áthúzva ===== */
.billing-original-box {
  margin: 10px 0 12px !important;
  padding: 10px 0 12px !important;
  border-bottom: 1px solid rgba(148,163,184,.28) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.billing-original-box span {
  color: #e5e7eb !important;
  font-weight: 800 !important;
}

.billing-original-box strong {
  color: #94a3b8 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 3px !important;
  text-decoration-color: rgba(248,113,113,.85) !important;
}

@media (max-width: 700px) {
  .billing-original-box {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}


/* ===== Hero node feature lista HTML verzió ===== */
.hero-node-features {
  list-style: none !important;
  margin: 18px 0 0 0 !important;
  padding: 16px 18px !important;
  border-radius: 20px !important;
  background:
    linear-gradient(135deg, rgba(22,163,74,.18), rgba(15,23,42,.68)) !important;
  border: 1px solid rgba(34,197,94,.35) !important;
  box-shadow: 0 16px 34px rgba(2,6,23,.30) !important;
  color: #dcfce7 !important;
  text-align: left !important;
}

.hero-node-features li {
  position: relative !important;
  padding-left: 26px !important;
  margin: 8px 0 !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.hero-node-features li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #4ade80 !important;
  font-weight: 1000 !important;
  text-shadow: 0 0 14px rgba(34,197,94,.6) !important;
}

@media (max-width: 700px) {
  .hero-node-features {
    margin-top: 14px !important;
    padding: 14px 16px !important;
  }

  .hero-node-features li {
    font-size: 13px !important;
  }
}


/* ===== Summary Trust ===== */

.summary-trust{
    margin-top:18px;
    padding:16px 18px;
    border-radius:18px;
    background:
      linear-gradient(135deg,
      rgba(22,163,74,.18),
      rgba(15,23,42,.72));
    border:1px solid rgba(34,197,94,.30);
}

.summary-trust div{
    display:flex;
    align-items:center;
    gap:8px;
    margin:7px 0;
    color:#dcfce7;
    font-size:13px;
    font-weight:700;
}

.summary-trust div::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 10px #22c55e;
    flex:none;
}


/* ===== LIVE NODE PANEL ===== */
.live-node-panel {
  grid-column: 1 / -1 !important;
  margin: 18px 0 10px !important;
  padding: 24px !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(34,197,94,.18), transparent 35%),
    radial-gradient(circle at 90% 20%, rgba(56,189,248,.18), transparent 38%),
    linear-gradient(135deg, rgba(2,6,23,.92), rgba(15,23,42,.88)) !important;
  border: 1px solid rgba(34,197,94,.28) !important;
  box-shadow:
    0 24px 70px rgba(2,6,23,.48),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  color: #e5f6ff !important;
}

.live-node-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 18px !important;
}

.live-node-head > div {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.live-node-head strong {
  font-size: 18px !important;
  letter-spacing: .14em !important;
  color: #ffffff !important;
}

.live-node-head small {
  color: #93c5fd !important;
  font-weight: 700 !important;
}

.live-dot {
  width: 12px !important;
  height: 12px !important;
  border-radius: 999px !important;
  background: #22c55e !important;
  box-shadow: 0 0 0 6px rgba(34,197,94,.14), 0 0 22px rgba(34,197,94,.8) !important;
  animation: livePulse 1.8s infinite ease-in-out;
}

@keyframes livePulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: .75; }
}

.live-node-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.live-node-item {
  padding: 16px !important;
  border-radius: 20px !important;
  background: rgba(15,23,42,.68) !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.live-node-item span {
  display: block !important;
  color: #cbd5e1 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
}

.live-node-item strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 1000 !important;
}

.live-bar {
  height: 8px !important;
  margin-top: 12px !important;
  border-radius: 999px !important;
  background: rgba(148,163,184,.18) !important;
  overflow: hidden !important;
}

.live-bar i {
  display: block !important;
  height: 100% !important;
  width: 0%;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #22c55e, #38bdf8) !important;
  box-shadow: 0 0 18px rgba(56,189,248,.45) !important;
  transition: width .6s ease !important;
}

@media (max-width: 900px) {
  .live-node-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .live-node-wide {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 600px) {
  .live-node-panel {
    padding: 18px !important;
  }

  .live-node-head {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .live-node-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ===== LIVE NODE FINISH ===== */
.live-node-item strong {
  font-size: 38px !important;
  line-height: 1 !important;
}

.live-node-item:nth-child(3) strong,
.live-node-item:nth-child(5) strong {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
}

.live-node-item:nth-child(3) strong span,
.live-node-item:nth-child(5) strong span {
  display: inline !important;
  margin: 0 !important;
}





.live-node-item:nth-child(3) strong,
.live-node-item:nth-child(5) strong {
  color: #4ade80 !important;
  text-shadow: 0 0 18px rgba(34,197,94,.35) !important;
}

.live-node-hint {
  margin-top: 8px !important;
  color: #86efac !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.live-node-ram-percent {
  margin-top: 6px !important;
  color: #38bdf8 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.live-node-head strong::after {
  content: "  •  MaPaKov Enterprise Infrastructure";
  font-size: 11px;
  letter-spacing: .08em;
  color: #93c5fd;
  font-weight: 800;
}

@media (max-width: 700px) {
  .live-node-item strong {
    font-size: 34px !important;
  }

  .live-node-head strong::after {
    display: block;
    margin-top: 4px;
  }
}



/* ===== LIVE NODE number fix ===== */

#liveCpu,
#liveNvme{
    font-size:42px !important;
    font-weight:900 !important;
    line-height:1 !important;
}


/* ===== LIVE NODE RAM EMPHASIS ===== */

#liveRam{
    font-size:34px !important;
    font-weight:900 !important;
    color:#ffffff !important;
    line-height:1.1 !important;
    text-shadow:0 0 18px rgba(56,189,248,.35);
}

#liveRamPercent{
    font-size:15px !important;
    font-weight:800 !important;
    color:#38bdf8 !important;
    margin-top:8px !important;
}


/* ===== RAM egy sorban ===== */

#liveRam{
    display:inline-block !important;
    white-space:nowrap !important;
    font-size:34px !important;
    line-height:1 !important;
}

.live-node-item:nth-child(4) strong{
    display:block !important;
    white-space:nowrap !important;
    font-size:34px !important;
}


/* ===== LIVE NODE final layout balance ===== */

.live-node-grid {
  grid-template-columns: .9fr .9fr .85fr 1.25fr 1.1fr !important;
}

.live-node-item:nth-child(4) {
  min-width: 210px !important;
}

.live-node-item:nth-child(5) {
  min-width: 170px !important;
}

.live-node-item:nth-child(4) .live-bar,
.live-node-item:nth-child(3) .live-bar {
  width: 100% !important;
}

#liveUpdated {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: #dcfce7 !important;
}

#liveUpdated::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #22c55e !important;
  box-shadow: 0 0 12px rgba(34,197,94,.8) !important;
  animation: livePulse 1.8s infinite ease-in-out !important;
}

@media (max-width: 900px) {
  .live-node-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .live-node-item:nth-child(4),
  .live-node-item:nth-child(5) {
    min-width: 0 !important;
  }
}

@media (max-width: 600px) {
  .live-node-grid {
    grid-template-columns: 1fr !important;
  }
}


/* LIVE NODE CPU percent spacing */
.cpu-percent{
    margin-left:2px;
}

.cpu-percent{
    display:inline-block;
    margin-left:0 !important;
    margin-right:6px;
}

.live-node-online{
    position:absolute;
    left:18px;
    bottom:16px;
    display:flex;
    align-items:center;
    gap:8px;
    color:#4ade80;
    font-size:14px;
    font-weight:700;
}

.live-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 10px #22c55e;
    animation:livePulse 1.5s infinite;
}

@keyframes livePulse{
    0%{opacity:.4;transform:scale(.8);}
    50%{opacity:1;transform:scale(1.2);}
    100%{opacity:.4;transform:scale(.8);}
}


.live-node-item{
    position:relative !important;
    min-height:150px !important;
}

.live-node-online{
    position:absolute !important;
    left:18px !important;
    bottom:16px !important;
    z-index:5 !important;
}