:root {
  --szin-hatter: #1e2128;
  --szin-panel: #2a2e37;
  --szin-panel-vilagosabb: #333844;
  --szin-szoveg: #e8e9ec;
  --szin-halvany-szoveg: #9aa0ab;
  --szin-rez: #b8874a;
  --szin-rez-vilagos: #d3a465;
  --szin-keret: #3a3f4b;
  --szin-piros: #e05c5c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--szin-hatter);
  color: var(--szin-szoveg);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.app {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.fejlec h1 {
  font-size: 22px;
  margin: 4px 0 20px;
  color: var(--szin-szoveg);
}

.lang-link {
  display: block;
  margin: -14px 0 20px;
  background: none;
  border: none;
  padding: 0;
  font-size: 12.5px;
  color: var(--szin-halvany-szoveg);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.lang-link:hover { color: var(--szin-rez-vilagos); }

.kartya {
  background: var(--szin-panel);
  border: 1px solid var(--szin-keret);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

.szekcio-cim {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--szin-rez-vilagos);
  margin: 0 0 12px;
  font-weight: 700;
}

.sajat-adatok-szoveg {
  font-size: 14px;
  line-height: 1.5;
  color: var(--szin-szoveg);
  margin-bottom: 12px;
  white-space: pre-line;
}

.mezo {
  display: block;
  margin-bottom: 12px;
}
.mezo:last-child { margin-bottom: 0; }

.mezo span {
  display: block;
  font-size: 12px;
  color: var(--szin-halvany-szoveg);
  margin-bottom: 4px;
}

.mezo input, .mezo select {
  width: 100%;
  background: var(--szin-panel-vilagosabb);
  border: 1px solid var(--szin-keret);
  border-radius: 6px;
  color: var(--szin-szoveg);
  font-size: 15px;
  padding: 10px 10px;
  font-family: inherit;
}

.mezo input:focus, .mezo select:focus {
  outline: none;
  border-color: var(--szin-rez);
}

.ketoszlop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Gombok */
.gomb {
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.gomb-teljes { width: 100%; margin-top: 4px; }

.gomb-akcent {
  background: var(--szin-rez);
  color: #1a1300;
}
.gomb-akcent:active { background: var(--szin-rez-vilagos); }

.gomb-masodlagos {
  background: var(--szin-panel-vilagosabb);
  color: var(--szin-szoveg);
  border: 1px solid var(--szin-keret);
}
.gomb-masodlagos:active { background: var(--szin-keret); }

.gomb-piros {
  background: var(--szin-piros);
  color: white;
  padding: 8px 10px;
  font-size: 13px;
}

/* Tételek */
.tetel-kartya {
  background: var(--szin-panel-vilagosabb);
  border: 1px solid var(--szin-keret);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}
.tetel-fejlec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.tetel-fejlec span {
  font-size: 12px;
  font-weight: 700;
  color: var(--szin-rez-vilagos);
  text-transform: uppercase;
}
.tetel-sor2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tetel-sor3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.tetel-szamitott {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--szin-keret);
  font-size: 13px;
  color: var(--szin-halvany-szoveg);
}
.tetel-szamitott b { color: var(--szin-szoveg); }

/* ÁFA radio */
.radio-sor { display: flex; flex-direction: column; gap: 10px; }
.radio-cimke {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.radio-cimke input { accent-color: var(--szin-rez); width: 18px; height: 18px; }

/* Eredmény */
.eredmeny-doboz {
  background: #20242c;
  border: 1px solid var(--szin-keret);
  border-radius: 8px;
  padding: 14px;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-line;
  color: var(--szin-szoveg);
}

.fo-gombsor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.lablec-megjegyzes {
  text-align: center;
  font-size: 11px;
  color: var(--szin-halvany-szoveg);
  margin-top: 20px;
}

.vegeredmeny-kartya {
  margin-top: 24px;
  text-align: center;
}
.vegeredmeny-megjegyzes {
  font-size: 12.5px;
  font-style: italic;
  color: var(--szin-halvany-szoveg);
  margin: 0 0 14px;
  line-height: 1.5;
}
.vegeredmeny-kep {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--szin-keret);
  display: block;
}
.vegeredmeny-jegyzet {
  font-size: 11px;
  color: var(--szin-halvany-szoveg);
  margin: 10px 0 0;
}

/* Modal */
.modal-hatter {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
}
.modal-hatter.aktiv { display: flex; }
#mozaitBanner { align-items: center; }

.modal {
  background: var(--szin-panel);
  border-top: 1px solid var(--szin-keret);
  border-radius: 16px 16px 0 0;
  padding: 20px 16px 28px;
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
}
.modal h3 {
  margin: 0 0 16px;
  font-size: 16px;
}
.modal-gombsor {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.modal-gombsor .gomb { flex: 1; }

.korabbi-lista { display: flex; flex-direction: column; gap: 8px; }
.korabbi-elem {
  background: var(--szin-panel-vilagosabb);
  border: 1px solid var(--szin-keret);
  border-radius: 8px;
  padding: 12px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.korabbi-elem .korabbi-info { line-height: 1.5; }
.korabbi-elem .korabbi-nev { font-weight: 700; }
.korabbi-elem .korabbi-reszlet { color: var(--szin-halvany-szoveg); font-size: 12px; }
.korabbi-ures { color: var(--szin-halvany-szoveg); font-size: 13px; text-align: center; padding: 20px 0; }

/* Checkbox címke (kedvezmény, egyéb költség) */
.checkbox-cimke {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}
.checkbox-cimke input { accent-color: var(--szin-rez); width: 18px; height: 18px; flex-shrink: 0; }

.rejtett { display: none !important; }
.beljebb { margin-top: 12px; padding-left: 2px; }

.alszekcio {
  border-top: 1px dashed var(--szin-keret);
  padding-top: 12px;
  margin-top: 12px;
}
.alszekcio:first-child { border-top: none; padding-top: 0; margin-top: 0; }

.kedvezmeny-sor {
  background: var(--szin-panel-vilagosabb);
  border: 1px solid var(--szin-keret);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.kedvezmeny-sor.kedvezmeny-egeszre {
  border-color: var(--szin-rez);
  margin-top: 12px;
}
.kedvezmeny-sor-mezok {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.kedvezmeny-sor-mezok input {
  width: 100%;
  background: var(--szin-panel);
  border: 1px solid var(--szin-keret);
  border-radius: 6px;
  color: var(--szin-szoveg);
  font-size: 14px;
  padding: 8px 10px;
  font-family: inherit;
}

/* MozaIT kapcsolat banner (demo-korlátozás) — szándékosan más arculat, mint az app többi része */
.mozait-modal {
  background: linear-gradient(160deg, #0d0f24, #12142c);
  border: 1px solid rgba(138, 63, 245, 0.4);
  border-radius: 18px;
  padding: 30px 24px;
  width: 100%;
  max-width: 420px;
  max-height: 80vh;
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 24px 60px -20px rgba(61, 123, 255, 0.45);
  font-family: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.mozait-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #63c9ff;
  border: 1px solid rgba(99, 201, 255, 0.35);
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
}
.mozait-modal h3 {
  font-family: 'Space Grotesk', sans-serif;
  color: #eef1fb;
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 12px;
  line-height: 1.35;
}
.mozait-modal p {
  color: #8790b8;
  font-size: 13.5px;
  line-height: 1.65;
  margin: 0 0 22px;
}
.mozait-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  border-radius: 9px;
  background: linear-gradient(120deg, #3d7bff, #8a3ff5 60%, #e34fd6);
  color: #ffffff;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  margin-bottom: 10px;
  box-shadow: 0 8px 24px -8px rgba(138, 63, 245, 0.55);
}
.mozait-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 20px;
  border-radius: 9px;
  background: transparent;
  color: #8790b8;
  font-size: 13px;
  border: 1px solid rgba(138, 63, 245, 0.3);
  cursor: pointer;
  font-family: inherit;
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: var(--szin-rez);
  color: #1a1300;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: 90%;
  text-align: center;
  z-index: 200;
}
.toast.aktiv {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}