body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;max-width:600px;margin:0 auto;padding:20px;background:#f4f6f8;color:#333}
    h1,h2{color:#0077cc;text-align:center}
    label{display:block;margin-bottom:5px;font-weight:600}
    input[type="number"]{width:100%;padding:10px;margin-bottom:20px;border:1px solid #ccc;border-radius:6px;box-sizing:border-box}
    .calculator{background:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.1);margin-bottom:30px}
    .center{text-align:center}
    a{color:#0077cc;text-decoration:none} a:hover{text-decoration:underline}
    @media (max-width:600px){ body{padding:10px} }

    .ticker{position:sticky;top:0;z-index:9999;overflow:hidden;background:linear-gradient(135deg,#0077cc,#005fa3);color:#fff;font-weight:600;padding:8px 0}
    .ticker__track{display:inline-flex;white-space:nowrap;will-change:transform;animation:ticker-scroll 25s linear infinite}
    .ticker__content{flex:0 0 auto;padding-right:2rem}
    @keyframes ticker-scroll{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-50%,0,0)}}
    @media (hover:hover){ .ticker:hover .ticker__track{animation-play-state:paused} }

    body.dark-mode{background:#121212;color:#e0e0e0}
    body.dark-mode .ticker{background:linear-gradient(135deg,#4dabf7,#1565c0);color:#fffde7}
    body.dark-mode .calculator{background:#1e1e1e;color:#e0e0e0}
    body.dark-mode input[type="number"]{background:#2c2c2c;border:1px solid #555;color:#fff}
    body.dark-mode h1,body.dark-mode h2{color:#4dabf7}

    .toggle-btn{display:inline-block;margin:8px;padding:10px 18px;font-size:1rem;border:none;border-radius:25px;background:#0077cc;color:#fff;cursor:pointer;transition:background .3s;font-weight:700}
    .toggle-btn:hover{background:#005fa3}

    .info-box{display:none;margin:10px auto;max-width:800px;padding:15px;border:1px solid #ddd;border-radius:12px;background:#f9f9f9;text-align:left}
    .info-box.active{display:block}
    body.dark-mode .info-box{background:#1e1e1e;border-color:#444;color:#e0e0e0}

    .recommend-label{color:#005fa3;font-weight:700}
    body.dark-mode .recommend-label{color:#0a2a66}

	/* --- Termék rács: mobilon 2 oszlop, középre, nem csúszik össze --- */
.product-picker{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  justify-items: stretch;   /* a kártya töltse ki a cellát */
  align-items: stretch;
  margin: 10px 0 16px;
}

/* Kártya – ne lógjon túl a cellán */
.product-card{
  box-sizing: border-box;   /* << EZ fontos */
  width: 100%;
  border: 1px solid #d0d7de;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.product-card:hover{ transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.product-card.active{ border-color:#0077cc; box-shadow:0 0 0 3px rgba(0,119,204,.12); }
.product-card img{ width:56px; height:56px; object-fit:contain; margin-bottom:6px; }
.product-card h4{ margin:4px 0 2px; font-size:14px; color:#222; }
.product-card p{ margin:0; font-size:12px; color:#555; line-height:1.3; }

/* Tablet: 3 oszlop */
@media (min-width:700px){
  .product-picker{ grid-template-columns: repeat(3, 1fr); }
}

/* Desktop: 4 oszlop (4 kártya egy sorban, középre) */
@media (min-width:1024px){
  .product-picker{ grid-template-columns: repeat(4, 1fr); }
}

/* Sötét mód maradhat */
body.dark-mode .product-card{ background:#1e1e1e; border-color:#444; }
body.dark-mode .product-card.active{ border-color:#4dabf7; box-shadow:0 0 0 3px rgba(77,171,247,.18); }
body.dark-mode .product-card h4{ color:#e0e0e0; }
body.dark-mode .product-card p{ color:#cfe8ff; }

    .product-visual{margin-top:8px;display:flex;flex-direction:column-reverse;align-items:center;gap:8px}
    .product-visual img{display:block;max-width:180px;width:100%;height:auto;border-radius:8px;border:1px solid #e0e0e0;background:#fff}
    .product-visual .caption{font-size:.95rem;font-weight:700;text-align:center}
    body.dark-mode .product-visual img{border-color:#444;background:#1e1e1e}
    body.dark-mode .product-visual .caption{color:#e0e0e0}

    #szuksegesKlor,#szuksegesPlusz,#szuksegesMinusz{display:block;text-align:center;font-weight:400;font-size:1.25rem;margin:6px 0 10px}

    #infoFab{position:fixed;right:16px;bottom:16px;width:40px;height:40px;border-radius:50%;border:none;background:linear-gradient(135deg,#0077cc,#005fa3);color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.25);cursor:pointer;z-index:10060}
    body.dark-mode #infoFab{background:linear-gradient(135deg,#4dabf7,#1565c0);color:#fff}
    #infoModal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.5);z-index:10050}
    #apkModal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.5);z-index:10050}
    #apkModal .modal-card{width:100%;max-width:480px;background:#fff;color:#222;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.3);overflow:hidden}
    body.dark-mode #apkModal .modal-card{background:#1f1f1f;color:#eaeaea}
    #apkModal .modal-card header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid #eee}
    body.dark-mode #apkModal .modal-card header{border-bottom-color:#333}
    body.dark-mode #apkModal .modal-body{color:#eaeaea}
    body.dark-mode #apkModal .modal-body h4{color:#4dabf7}
    body.dark-mode #apkModal .modal-body strong{color:#eaeaea}
    body.dark-mode #apkModal .modal-body ol,
    body.dark-mode #apkModal .modal-body p,
    body.dark-mode #apkModal .modal-body li{color:#eaeaea}
    body.dark-mode #apkModal div[style*="fff3cd"]{background:#3a2e00 !important;border-color:#a07800 !important;color:#ffe082 !important}
    body.dark-mode #apkModal div[style*="d4edda"]{background:#0a2e1a !important;border-color:#1e7e34 !important;color:#a3d9a5 !important}
    #apkModal .modal-body{padding:16px;max-height:70vh;overflow:auto;line-height:1.55}
    #infoModal .modal-card{width:100%;max-width:680px;background:#fff;color:#222;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.3);overflow:hidden}
    body.dark-mode #infoModal .modal-card{background:#1f1f1f;color:#eaeaea}
    #infoModal .modal-card header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid #eee}
    body.dark-mode #infoModal .modal-card header{border-bottom-color:#333}
    #infoModal .modal-body{padding:16px;max-height:70vh;overflow:auto;line-height:1.55}
    #closeInfo,#closeApk{background:transparent;border:none;font-size:24px;font-weight:bold;cursor:pointer;color:red}
    body.dark-mode #closeInfo,body.dark-mode #closeApk{color:white}
    #closeInfo:hover,#closeApk:hover{transform:scale(1.2)}

    /* 4 kék tipp gomb – mobilon 2 oszlopban középre */
    #actionButtons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
    #actionButtons .toggle-btn{font-weight:700;margin:0}
    @media (max-width:600px){
      #actionButtons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;justify-items:center}
      #actionButtons .toggle-btn{width:100%}
    }

    /* Bal-alsó lebegő Revolut gomb */
    #donateFab{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));width:40px;height:40px;border-radius:50%;border:none;background:linear-gradient(135deg,#0077cc,#005fa3);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.25);cursor:pointer;z-index:10060;text-decoration:none}
    #donateFab:hover{filter:brightness(1.05)}
    body.dark-mode #donateFab{background:linear-gradient(135deg,#4dabf7,#1565c0);color:#fff}

/* === Toast / Popup üzenet === */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #0077cc, #005fa3); /* alap (info) kék */
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 11000;
  font-weight: 600;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.toast.success { background: linear-gradient(135deg, #2e7d32, #1b5e20); } /* zöld */
.toast.error   { background: linear-gradient(135deg, #d32f2f, #880e4f); } /* piros */

.toast i { font-size: 18px; }
.toast .toast-close {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  margin-left: 4px;
  opacity: .9;
}
.toast .toast-close:hover { opacity: 1; transform: scale(1.05); }

body.dark-mode .toast { box-shadow: 0 8px 24px rgba(0,0,0,.45); }

/* Alap brand színek */
:root{
  --brand1:#0077cc; /* világosabb kék */
  --brand2:#005fa3; /* sötétebb kék */
  --brandDark1:#4dabf7; /* dark-mode világos */
  --brandDark2:#1565c0; /* dark-mode sötét */
}

/* Általános gomb */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  border:0;
  border-radius:9999px;              /* kapszula forma */
  font-weight:700;
  line-height:1;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease, opacity .15s ease;
}
.btn--full{ width:100%; }

/* Elsődleges (kék, mint a többi gombod) */
.btn--primary{
  color:#fff;
  background:linear-gradient(135deg,var(--brand1),var(--brand2));
}
.btn--primary:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.btn--primary:active{ transform:translateY(0); box-shadow:0 1px 4px rgba(0,0,0,.18); }
.btn:focus-visible{
  outline:3px solid rgba(0,119,204,.35);
  outline-offset:2px;
}

/* Letiltva (pl. amíg nincs pipálva az adatkezelés) */
.btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
  filter:none;
}

/* Dark mode változat */
body.dark-mode .btn--primary{
  background:linear-gradient(135deg,var(--brandDark1),var(--brandDark2));
  color:#fff;
}

/* Betöltés-állapot (spinner) */
.spinner{
  display:none;
  width:16px; height:16px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:spin .8s linear infinite;
}
.btn.is-loading .spinner{ display:inline-block; }
.btn.is-loading .label{ opacity:.9; }

@keyframes spin{ to{ transform:rotate(360deg); } }

/* Világos mód – egységes alap (ha szeretnéd, elhagyható) */
input[type="text"],
input[type="email"],
textarea{
  background:#fff;
  color:#222;
}

/* Sötét mód: ugyanaz a kinézet, mint a number inputoknál */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode textarea{
  background:#2c2c2c;
  border:1px solid #555 !important; /* felülírja az inline border-t */
  color:#fff;
}

/* Sötét mód placeholder szín */
body.dark-mode ::placeholder{ color:#bbb; opacity:1; }

/* Fókuszállapot kicsit láthatóbb */
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus{
  outline: 3px solid rgba(0,119,204,.25);
  outline-offset: 2px;
}

/* Anchor ugrás ne csússzon a sticky ticker alá */
#kapcsolat { scroll-margin-top: 80px; }










/* ==== Reset megerősítő MODAL ==== */
#confirmResetModal{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  padding:16px; background:rgba(0,0,0,.5); z-index:10070;
}
#confirmResetModal .modal-card{
  width:100%; max-width:520px;
  background:#fff; color:#222;
  border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.3); overflow:hidden;
}
body.dark-mode #confirmResetModal .modal-card{ background:#1f1f1f; color:#eaeaea; }

#confirmResetModal .modal-card header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px; border-bottom:1px solid #eee;
}
body.dark-mode #confirmResetModal .modal-card header{ border-bottom-color:#333; }

#confirmResetModal .modal-body{ padding:16px; line-height:1.55; }
#confirmResetModal .modal-actions{
  display:flex; gap:10px; justify-content:flex-end;
  padding:12px 16px; border-top:1px solid #eee;
}
body.dark-mode #confirmResetModal .modal-actions{ border-top-color:#333; }

/* fejléc bezáró X */
#closeConfirmReset{
  background:transparent; border:none; font-size:22px; font-weight:700; cursor:pointer; color:red;
}
body.dark-mode #closeConfirmReset{ color:#fff; }

/* gombstílusok — illeszkedik a már meglévő .btn-hez */
.btn--danger{
  color:#fff;
  background:linear-gradient(135deg,#d32f2f,#880e4f);
}
.btn--danger:hover{ filter:brightness(1.05); transform:translateY(-1px); }

.btn--ghost{
  background:transparent; color:inherit;
  border:1px solid #cfd8dc; border-radius:9999px; padding:10px 16px;
}
body.dark-mode .btn--ghost{ border-color:#444; }
.btn--ghost:hover{ filter:brightness(1.05); }

#installBtn {
  display: none;
}






@keyframes slideDown {
  from {
    transform: translate(-50%, -100%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}





















#scrollTopBtn {
  position: fixed;
  bottom: 80px; /* hogy ne lógjon össze az infoFab-bal */
  right: 20px;
  background: linear-gradient(135deg,#0077cc,#005fa3);
  color: white;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  display: none; /* alapból rejtve */
  z-index: 999;
}
#scrollTopBtn:hover {
  background: linear-gradient(135deg,#005fa3,#004680);
}




.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}



/* Payhip gomb – pontosan olyan kék, mint a többi gombod */
.payhip-buy-button.mg-buy-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 24px !important;
  border:0;
  border-radius:9999px !important; /* kapszula forma */
  font-weight:700;
  line-height:1;
  cursor:pointer;
  text-decoration:none !important;
  color:#fff !important;
  background:linear-gradient(135deg,#0077cc,#005fa3) !important;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease, opacity .15s ease;
}

.payhip-buy-button.mg-buy-btn:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.2);
}










.ebook-card{
  margin:10px 0 16px;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #dde;
  background:#f7f9fc;
}
.ebook-card h4{
  margin:0 0 6px;
  font-size:1rem;
}
.ebook-card p{
  margin:0 0 6px;
  font-size:.95rem;
}
.ebook-card ul{
  margin:0 0 6px 20px;
  padding:0;
  font-size:.95rem;
}
.ebook-card .mg-buy-btn{
  margin-top:6px;
}

/* Dark mode-ra egy kis finomítás */
body.dark-mode .ebook-card{
  background:#1f1f1f;
  border-color:#444;
}

.info-box {
  scroll-margin-top: 90px; /* ne csússzon be a ticker alá */
}











/* CHAT – legalul */
#mg-chat-toggle{
  bottom:20px !important;
  right:20px !important;
  z-index:999999 !important;
}

/* INFO gomb – a chat fölött */
#infoFab{
  position:fixed !important;
  bottom:80px !important; /* CHAT fölé kerül */
  right:20px !important;
  z-index:999998 !important;
}

/* Lap tetejére gomb – legfelül */
#scrollTopBtn{
  position:fixed !important;
  bottom:140px !important; /* INFO fölé kerül */
  right:20px !important;
  z-index:999997 !important;
}




body.mg-chat-open #infoFab,
body.mg-chat-open #scrollTopBtn {
  z-index: 1 !important;
  opacity: .4;
  pointer-events: none;
}

body.mg-chat-open #donateFab {
  z-index: 1 !important;
  opacity: .4;
  pointer-events: none;
}



/* Chat nyitó gomb – ugyanaz a kék stílus */
#mg-chat-toggle {
  background: linear-gradient(135deg,#0077cc,#005fa3) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 30px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  font-weight: 600;
}

/* Chat fejléc – ugyanaz a kék sáv mint a gomboknál */
#mg-chat-header {
  background: linear-gradient(135deg,#0077cc,#005fa3) !important;
  color: #fff !important;
}

/* Bezáró gomb is fehér legyen */
#mg-chat-header button {
  color: #fff !important;
}
/* ===== DARK MODE – CHAT ===== */
body.dark-mode #mg-chat-window {
  background: #0f172a !important;     /* sötét háttér */
  color: #e5e7eb !important;
  border: 1px solid rgba(255,255,255,.12);
}

body.dark-mode #mg-chat-header {
  background: linear-gradient(135deg,#1e3a8a,#1d4ed8) !important;
  color: white !important;
  border-bottom: 1px solid rgba(255,255,255,.2);
}

body.dark-mode #mg-chat-header button {
  color: white !important;
}

/* Üzenetek */
body.dark-mode #mg-chat-messages {
  background: #020617 !important;
}

body.dark-mode .mg-msg-bot {
  background: #111827 !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(255,255,255,.1);
}

body.dark-mode .mg-msg-user {
  background: #1d4ed8 !important;
  color: white !important;
  border: 1px solid rgba(255,255,255,.15);
}

/* Input sor */
body.dark-mode #mg-chat-input-row {
  background: #020617 !important;
  border-top: 1px solid rgba(255,255,255,.15);
}

body.dark-mode #mg-chat-input {
  background: #020617 !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(255,255,255,.25);
}

body.dark-mode #mg-chat-input::placeholder {
  color: #9ca3af;
}

body.dark-mode #mg-chat-send {
  background: linear-gradient(135deg,#2563eb,#1d4ed8) !important;
  color: white !important;
  border: none;
}

/* Nyitó gomb is dark mód kompatibilis szöveg */
body.dark-mode #mg-chat-toggle {
  color: white !important;
}