.elomi{ --bg:#0b1020; --card:#121833; --ink:#e9ecf8; --muted:#aab2d5; --accent:#7aa2ff; }
*{box-sizing:border-box}
.elomi{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.wrap{max-width:1200px;margin:28px auto;padding:0 16px}
.card{background:var(--card);border-radius:18px;box-shadow:0 10px 35px rgba(0,0,0,.25);padding:18px}
.title{margin:0 0 6px;font-weight:800;font-size:22px}
.subtitle{margin:0 0 16px;color:var(--muted)}
form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:6px 0 10px}
label{display:grid;gap:6px;font-size:14px;color:var(--muted)}
input,select{background:var(--card);color:var(--ink);border:1px solid var(--border);border-radius:10px;padding:10px 12px;outline:none;width:100%}
input:focus,select:focus{border-color:var(--accent)}
.checks{grid-column:span 3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.checks label{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px}
.kpi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:10px}
.kpi .box{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px}
.box h3{margin:0 0 6px;font-size:14px;color:var(--muted)}
.big{font-size:26px;font-weight:900}
.list{margin-top:14px;display:grid;gap:12px}
.item{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px}
.item h4{margin:0 0 6px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;font-size:14px;color:var(--muted)}
.btn{background:var(--accent);border:none;border-radius:12px;padding:12px 14px;color:#0b1020;font-weight:800;cursor:pointer;width:100%}
details{margin-top:10px;border-top:1px dashed var(--border);padding-top:8px}
summary{cursor:pointer;color:var(--accent);font-weight:700;list-style:none}
summary::-webkit-details-marker{display:none}
.badge{background:var(--card);border:1px solid var(--border);border-radius:999px;padding:2px 8px;color:#aab2d5;font-size:12px;margin-left:6px}
@media (max-width:900px){form{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){form{grid-template-columns:1fr} .grid{grid-template-columns:1fr} .kpi{grid-template-columns:1fr} .checks{grid-template-columns:1fr}}
.err{color:var(--error);margin-top:4px;font-size:13px}

/* === Theme: Bankmonitor PIROS dominant (warm light bg), responsive, checkbox polish === */
.elomi{
  --accent:#FA4616;
  --bg:#F4EEE9; /* warm light background to avoid sterile white */
  --card:#FFFFFF;
  --ink:#211F1E;
  --muted:rgba(33,31,30,.75);
  --border:color-mix(in srgb, var(--accent) 35%, transparent);
}
.elomi{ background:var(--bg); color:var(--ink); }
.container, main{ background:transparent; }

/* Form base */
form{
  display:grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap:12px;
}
label{ display:grid; gap:6px; font-size:14px; color:var(--muted); line-height:1.25; }
input,select,textarea{
  width:100%; min-height:42px; border-radius:10px;
  background:#fff; color:var(--ink);
  border:1.5px solid var(--border);
  padding:10px 12px;
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }

/* Switch rows for boolean checks */
.checks{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.checks label{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:#fff; border:1px solid var(--border); border-radius:10px; min-height:44px; color:var(--ink); }

/* Checkbox custom */
input[type="checkbox"]{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  width:18px; height:18px; border:1.5px solid var(--muted); border-radius:4px; background:transparent; position:relative; flex-shrink:0; margin:0;
}
input[type="checkbox"]:focus{ outline:2px solid var(--accent); outline-offset:2px; }
input[type="checkbox"]:checked{ background:var(--accent); border-color:var(--accent); }
input[type="checkbox"]:checked::after{
  content:""; position:absolute; top:2px; left:5px; width:4px; height:8px; border:2px solid var(--checkmark, #fff); border-top:0; border-left:0; transform:rotate(45deg);
}

/* Cards grid */
.grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:14px; }
.card h3, .card h4{ color:var(--ink); }
.card .pill{ background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--ink); }

/* Summary / result panels styled to harmonize with inputs */
.result-card{ background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.result-card header{ background:color-mix(in srgb, var(--accent) 12%, transparent); padding:10px 12px; font-weight:600; color:var(--ink); }
.result-card .body{ padding:12px; }

/* Buttons */
button,.btn, .primary-btn{
  background:var(--accent); color:#fff; border:none; border-radius:10px; min-height:44px;
}
button:hover,.btn:hover{ filter:brightness(0.95); }
button:active,.btn:active{ transform:translateY(1px); }

/* Badges */
.badge{ display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:999px; padding:6px 10px; font-size:12px; color:var(--ink); background:#fff; white-space:nowrap; }

/* Responsive */
@media (max-width:1200px){
  .grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  form{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .checks{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:700px){
  .grid{ grid-template-columns:1fr; }
  form{ grid-template-columns:1fr; }
  .checks{ grid-template-columns:1fr; }
  .checks label{ min-height:48px; }
}


/* === Pastel theme override (design-only) === */
.elomi{
  --elo-bg:#FAFAF7; --elo-ink:#2C3E50; --elo-muted:#5B6B7C; 
  --elo-peach:#F6E0D7; --elo-peach-border:#EBC8BC;
  --accent:#76C7C5; --accent-dark:#5FB7B5;
  --elo-card:#FFFFFF; --elo-border:#E8EDF2;
}
body{background:var(--elo-bg);color:var(--elo-ink);}
.card{background:#fff;border:1px solid var(--elo-border);border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.title{color:var(--elo-ink)} .subtitle{color:color-mix(in srgb, var(--elo-ink) 70%, white)}
#f{gap:16px} #f label{color:var(--elo-ink)} #f .err{color:#B00020;font-weight:600}
#f input[type="text"],#f input[type="number"],#f select,#f textarea{
  background:var(--elo-peach);border:1px solid var(--elo-peach-border);color:var(--elo-ink);
  border-radius:14px;padding:10px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)
}
#f input:focus,#f select:focus,#f textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%, transparent)}
#f input[type="checkbox"]{inline-size:18px;block-size:18px;accent-color:var(--accent)}
.btn,button#calc,#calc.btn{background: var(--btnbg);color: var(--btntext);border:none;border-radius:12px;padding:12px 18px;font-weight:700}
.btn:hover,button#calc:hover,#calc.btn:hover{background:var(--accent-dark)}
.list .elo-bank-result,.list .result-card{background:#fff;border:1px solid var(--elo-border);border-radius:16px;box-shadow:0 1px 6px rgba(0,0,0,.06)}
details.elo-accordion{border:1px solid var(--elo-border);border-radius:12px;background:#fff}
details.elo-accordion>summary{background:#fff;color:var(--elo-ink)}
input[type="range"]{accent-color:var(--accent)}
.muted,.help,.hint{color:var(--elo-muted)}
/* === HIDE per user request (visual only) === */
.subtitle{display:none!important;}            /* JTM magyarázó sor */
.kpi .box + .box{display:none!important;}     /* Megjegyzés kártya */
.list .item h4 .badge{display:none!important;}/* „Terméktérkép” címke */
.list .item .grid>div:first-child{display:none!important;} /* chips-sor (Nincs meglévő hitel, Megélhetési) */


/* ===== Strong input color enforcement (scoped to .elomi) ===== */
.elomi input[type="text"],
.elomi input[type="number"],
.elomi input[type="tel"],
.elomi input[type="email"],
.elomi input[type="search"],
.elomi input[type="date"],
.elomi select,
.elomi textarea {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: 10px;
  outline: none;
}
.elomi input::placeholder,
.elomi textarea::placeholder { color: var(--muted) !important; opacity: 1; }
.elomi select { -webkit-appearance:none; -moz-appearance:none; appearance:none; background-image:none !important; }
.elomi .checks label { background: var(--card) !important; border:1px solid var(--border) !important; color:var(--ink) !important; }

/* Button base + hover */
.elomi .btn{ background: var(--btnbg); color: var(--btntext); }
.elomi .btn:hover{
  background: var(--btnbg-hover, var(--btnbg)) !important;
  color: var(--btntext-hover, var(--btntext)) !important;
}
@supports (background: color-mix(in srgb, #000 10%, #fff 90%)) {
  .elomi .btn:hover{
    background: var(--btnbg-hover, color-mix(in srgb, var(--btnbg) 85%, #000 15%)) !important;
  }
}



/* PATCH: hover vars */
.elomi .btn:hover,
.elomi button#calc:hover,
.elomi #calc.btn:hover{
  background: var(--btnbg-hover, var(--btnbg)) !important;
  color: var(--btntext-hover, var(--btntext)) !important;
}
@supports (background: color-mix(in srgb, #000 10%, #fff 90%)) {
  .elomi .btn:hover,
  .elomi button#calc:hover,
  .elomi #calc.btn:hover{
    background: var(--btnbg-hover, color-mix(in srgb, var(--btnbg) 85%, #000 15%)) !important;
  }
}


/* PATCH: base vars */
.elomi .btn,
.elomi button#calc,
.elomi #calc.btn{
  background: var(--btnbg) !important;
  color: var(--btntext) !important;
}

/* ==========================================================================
   Mobile responsiveness and orientation fixes
   --------------------------------------------------------------------------
   The upstream plugin CSS defines multiple competing grid breakpoints.  On
   many real‑world themes these breakpoints are either overwritten by the
   surrounding theme or result in extremely narrow columns, causing long
   labels to wrap one character per line (appearing as if they were written
   vertically).  To avoid this “vertical text” bug we enforce a single
   column layout on narrower viewports and explicitly reset writing mode and
   word wrapping on all labels inside the calculator.  These rules live at
   the very end of the stylesheet to ensure they override any earlier
   declarations.
   ========================================================================= */

/* Force horizontal writing and sensible wrapping for labels */
.elomi label {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  min-width: 0 !important;
}

/* Collapse the form and result grids to a single column on narrow screens
   so that labels have enough horizontal space to wrap naturally.  At
   widths below 900 px we fall back to one column for the primary form,
   checkbox groups, KPI panels and generic grids.  This conservative
   breakpoint keeps the desktop/tablet layouts intact while eliminating
   cramped two‑column layouts on typical mobile devices. */
@media (max-width: 900px) {
  .elomi form {
    grid-template-columns: 1fr !important;
  }
  .elomi .checks {
    grid-template-columns: 1fr !important;
  }
  .elomi .kpi {
    grid-template-columns: 1fr !important;
  }
  .elomi .grid {
    grid-template-columns: 1fr !important;
  }
  /* When collapsing to a single column, ensure any elements that
     deliberately span multiple columns (via inline style) don’t force
     horizontal scrolling.  Setting the column span back to 1 keeps these
     elements within the available width. */
  .elomi form > *[style*="grid-column"] {
    grid-column: auto !important;
  }
}