:root{ --bg:#22272B; --panel:#1F2428; --panel2:#2A3036; --panel3:#252B31; --border:#3A424A; --green:#2E7D32; --text:#FFFFFF; --danger:#C0514F; --accent:#fbbf24; --overlay: rgba(0,0,0,.45); --warn:#F59E0B; }
  *{box-sizing:border-box}
  html, body{height:100%; margin:0; background:var(--bg); color:var(--text); font:14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; overflow:hidden;}
  .app{width:100vw; height:100vh; display:flex; flex-direction:column;}
  .top{flex:0 0 54px; display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--panel3); border-bottom:1px solid var(--border); position:relative; z-index:80;}
  .btnTop{background:var(--panel2); border:1px solid var(--border); border-radius:10px; height:36px; padding:0 12px; display:grid; place-items:center; cursor:pointer; color:var(--text); font-size:14px}
  .btnIcon{width:44px; padding:0; font-size:20px}
  .search{flex:1; display:flex; gap:10px; background:var(--panel2); border:1px solid var(--border); border-radius:10px; padding:10px; align-items:center; color:var(--text)}
  .search input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:15px}
  .fs{height:36px; padding:0 12px; border-radius:8px; background:var(--panel2); border:1px solid var(--border); cursor:pointer; color:var(--text)}
  .workspace{flex:1 1 auto; width:100%; height:calc(100vh - 54px); padding:14px; overflow:hidden; position:relative; z-index:10;}
  .flex{height:100%; display:flex; gap:14px; width:100%; min-width: 980px;}
  .left{background:var(--panel); border:1px solid var(--border); border-radius:8px; flex:1 1 auto; min-width:360px; display:flex; flex-direction:column; overflow:hidden;}
  .tablewrap{flex:1 1 auto; min-height:0; overflow:auto;}
  table{width:100%; border-collapse:collapse; font-size:15px}
  thead{position:sticky; top:0; background:var(--panel2); color:#EAEFF5; z-index:1}
  th,td{padding:10px 12px; border-bottom:1px solid #293039}
  .empty{height:100%; display:grid; place-items:center; color:#cfd6dd}
  .foot{flex:0 0 auto; background:var(--panel); border-top:1px solid var(--border); padding:12px 14px; display:grid; grid-template-columns:1fr 320px; font-size:16px}
  .sumrow{display:flex;justify-content:space-between}
  .sumrow.big{border-top:1px dashed #4c5560; margin-top:10px; padding-top:10px; font-size:24px; font-weight:800}
  .right{width:560px; flex:0 0 560px; display:grid; grid-template-rows:auto auto 1fr auto auto; gap:10px}
  .grid{display:grid; gap:10px}
  .grid.cols4{grid-template-columns:repeat(4,1fr)}
  .grid.cols3{grid-template-columns:repeat(3,1fr)}
  button, .tile, .rowbtn, .small, .tall{ color: var(--text); }
  .tile,.rowbtn,.small,.tall{background:var(--panel2);border:1px solid var(--border);border-radius:12px; position:relative}
  .kbd{position:absolute; left:10px; top:8px; font-size:clamp(11px, 1.5vh, 12px); color:#E0E6EC; opacity:.9}
  .tile{height:140px; padding:16px 14px; font-size:clamp(14px, 1.8vh, 16px)}
  .tile .ico{font-size:clamp(30px, 3.2vh, 36px);opacity:.95;margin-bottom:8px}
  .tile .label{font-weight:600; font-size:1em}
  .rowbtn{height:76px; padding:12px; display:flex; align-items:center; justify-content:space-between; font-size:clamp(14px, 1.9vh, 16px)}
  .rowbtn .leftwrap{display:flex; align-items:center; gap:10px}
  .rowbtn .icon{font-size:1.4em; line-height:1}
  .rowbtn .label{font-weight:700; font-size:1em}
  .small{height:64px; padding:12px; display:flex; align-items:center; justify-content:space-between; font-size:clamp(14px, 1.8vh, 16px)}
  .small .leftwrap{display:flex; align-items:center; gap:10px}
  .small .icon{font-size:1.25em; line-height:1}
  .tall{height:112px; display:grid; place-items:center; text-align:center; font-size:clamp(15px, 2vh, 17px)}
  .pay{background:var(--green); border:1px solid #1f4; display:grid; place-items:center; color:#fff !important; border-radius:12px; font-size:40px; font-weight:900; cursor:pointer}
  .pay small{display:block; font-size:13px; font-weight:600}
  .pill{background:var(--danger); color:#fff !important; border:none; border-radius:12px; font-weight:700}
  .spacer{min-height:0;}
  .grid.cols4 > *{width:100%; min-width:0;}
  .icon.percent{ color: var(--accent); font-weight:900; text-shadow: 0 0 6px rgba(251,191,36,0.25); }
  .qty{display:inline-grid; grid-template-columns:32px 60px 32px; align-items:center; gap:8px}
  .qty button{height:32px; width:32px; border-radius:8px; background:var(--panel3); color:var(--text); border:1px solid var(--border); cursor:pointer}
  .qty input{height:32px; border-radius:8px; width:60px; text-align:center; background:var(--panel3); color:var(--text); border:1px solid var(--border)}
  td.text-right{text-align:right}
  .overlay{position:fixed; inset:0; background:var(--overlay); display:none; z-index:70}
  .overlay.open{display:block}
  .drawer{position:fixed; top:0; left:0; height:100%; width:760px; max-width:92vw; background:var(--panel); border-right:1px solid var(--border); box-shadow:10px 0 30px rgba(0,0,0,.35); transform:translateX(-100%); transition:transform .25s ease; z-index:71;}
  .drawer.open{ transform:translateX(0); }
  .drawer .head{display:flex; align-items:center; justify-content:space-between; padding:14px; background:var(--panel3); border-bottom:1px solid var(--border);}
  .drawer .body{position:relative; display:grid; grid-template-columns:260px 1fr; height:calc(100% - 60px); overflow:hidden;}
  .drawer .nav{border-right:1px solid var(--border); overflow:auto}
  .drawer .nav h4{margin:16px 12px 6px; opacity:.75; font-size:12px; letter-spacing:.04em; text-transform:uppercase}
  .drawer .nav button{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:transparent; border:none; color:var(--text); padding:10px 12px; cursor:pointer}
  .drawer .nav button:hover{background:var(--panel2)}
  .drawer .content{padding:16px; overflow:auto}
  .list{display:grid; gap:8px}
  .item{display:flex; justify-content:space-between; align-items:center; background:var(--panel2); border:1px solid var(--border); border-radius:10px; padding:10px 12px}
  .item .left{display:flex; gap:10px; align-items:center}
  .muted{opacity:.8}
  .subpanel{position:absolute; top:0; right:0; height:100%; width:420px; max-width:80vw; background:var(--panel2); border-left:1px solid var(--border); transform:translateX(100%); transition:transform .25s ease, opacity .2s ease; z-index:5; display:flex; flex-direction:column; opacity:0; pointer-events:none;}
  .subpanel.open{transform:translateX(0); opacity:1; pointer-events:auto;}
  .subpanel header{display:flex; align-items:center; justify-content:space-between; padding:14px; background:var(--panel3); border-bottom:1px solid var(--border); font-weight:800}
  .subpanel .actions{padding:14px; display:grid; gap:10px}
  .action{background:var(--panel3); border:1px solid var(--border); border-radius:12px; padding:14px; display:flex; align-items:center; justify-content:space-between; cursor:pointer}
  .action .left{display:flex; gap:12px; align-items:center}
  .action .icon{font-size:22px}
  .action .label strong{display:block; font-size:16px}
  .action .label small{opacity:.85}
  .layer{position:fixed; inset:54px 0 0 0; background:var(--bg); display:none; z-index:60;}
  .layer.open{display:block;}
  .layer .header{display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--panel3); border-bottom:1px solid var(--border); position:sticky; top:0;}
  .layer .header .title{font-weight:800; font-size:16px; margin-right:10px;}
  .toolbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
  .toolbar .btn{background:var(--panel2); border:1px solid var(--border); border-radius:8px; height:36px; padding:0 12px; cursor:pointer; color:var(--text)}
  .toolbar input, .toolbar select{height:36px; border-radius:8px; border:1px solid var(--border); background:var(--panel2); color:var(--text); padding:0 10px}
  .layer .body{padding:14px; height:calc(100% - 58px); overflow:auto}
  .table{width:100%; border-collapse:collapse}
  .table th, .table td{padding:10px; border-bottom:1px solid var(--border); text-align:left}
  .table th{background:var(--panel2); position:sticky; top:0}
  .chip{display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid var(--border); background:#2b3138; font-size:12px; opacity:.9}
  .badge{display:inline-block; padding:2px 8px; border-radius:8px; font-size:12px; border:1px solid #5f3b3b; background:#3b2323; color:#ffd4d4}
  .badge.warn{border-color:#8a5a17;background:#3a2a14;color:#ffdca8}
  .actions{display:flex; gap:6px}
  .link{cursor:pointer; text-decoration:underline; opacity:.9}
  .modalWrap{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.5); z-index:85;}
  .modalWrap.open{display:flex;}
  .modal{width:820px; max-width:94vw; background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.35);}
  .modal header{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:var(--panel3); border-bottom:1px solid var(--border); font-weight:800}
  .modal .content{padding:14px; display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .modal footer{display:flex; justify-content:flex-end; gap:8px; padding:12px 14px; border-top:1px solid var(--border)}
  .field{display:flex; flex-direction:column; gap:6px}
  .field label{font-size:12px; opacity:.85}
  .field input, .field select{height:36px; border-radius:8px; border:1px solid var(--border); background:var(--panel2); color:var(--text); padding:0 10px}
  .indent-1{padding-left:24px; opacity:.95}
  .a11y-hint{opacity:.75; font-size:12px}
  :focus{outline:2px solid var(--accent); outline-offset:2px}
  .row{display:flex; gap:8px; flex-wrap:wrap}
  .grow{flex:1}
  .t-right{text-align:right}
  .note{opacity:.85; font-size:12px; margin-top:8px}

/* Reports view */
.report-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:12px;}
.report-card{background:var(--panel2);border-radius:10px;padding:8px 10px;}
.report-card .lbl{font-size:11px;opacity:.7;margin-bottom:4px;}
.report-card .val{font-size:16px;font-weight:600;}
.report-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:4px;}
.report-table th,.report-table td{padding:4px 6px;border-bottom:1px solid rgba(255,255,255,.06);}
.report-table th{text-align:left;opacity:.7;font-weight:500;}
.report-table td.num{text-align:right;font-variant-numeric:tabular-nums;}
/* Reports view */
.report-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-end;
  margin-bottom:10px;
}
.report-toolbar label{
  font-size:12px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.report-toolbar input[type="date"]{
  background:var(--panel2);
  border-radius:6px;
  border:1px solid rgba(255,255,255,.12);
  padding:4px 6px;
  color:#f9fafb;
  font-size:12px;
}
.report-toolbar button{
  border-radius:6px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
  border:none;
}
.report-toolbar button#repApply{
  background:var(--accent);
}
.report-toolbar button#repCsv{
  background:transparent;
  border:1px solid rgba(255,255,255,.25);
}

.report-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px;
  margin-bottom:12px;
}
.report-card{
  background:var(--panel2);
  border-radius:10px;
  padding:8px 10px;
}
.report-card .lbl{
  font-size:11px;
  opacity:.7;
  margin-bottom:4px;
}
.report-card .val{
  font-size:16px;
  font-weight:600;
}
.report-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  margin-top:4px;
}
.report-table th,
.report-table td{
  padding:4px 6px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.report-table th{
  text-align:left;
  opacity:.7;
  font-weight:500;
}
.report-table td.num{
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.cashbox{
  margin-top:8px;
  padding:8px 10px;
  border-radius:10px;
  background:var(--panel2);
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
}
.cashbox label{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.cashbox input[type="number"]{
  background:var(--bg);
  border-radius:6px;
  border:1px solid rgba(255,255,255,.18);
  padding:4px 6px;
  color:#f9fafb;
  font-size:12px;
}
.cash-val{
  font-weight:600;
}
.cash-diff{
  font-weight:600;
}
.cash-diff.ok{
  color:#4ade80; /* zöld, ha stimmel */
}
.cash-diff.bad{
  color:#f97373; /* piros, ha eltérés van */
}
.cash-diff.neutral{
  opacity:.8;
}
.shift-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  margin-top:6px;
}
.shift-table th,
.shift-table td{
  padding:4px 6px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.shift-table th{
  text-align:left;
  opacity:.7;
  font-weight:500;
}
.shift-table td.num{
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.shift-actions{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-end;
}
.shift-actions label{
  font-size:12px;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.shift-actions input[type="text"]{
  background:var(--bg);
  border-radius:6px;
  border:1px solid rgba(255,255,255,.18);
  padding:4px 6px;
  color:#f9fafb;
  font-size:12px;
}
.shift-actions button{
  border-radius:6px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
  border:none;
  background:var(--accent);
}

/* eltérés színezés a műszak táblázatban */
.shift-diff.ok{
  color:#4ade80;
}
.shift-diff.bad{
  color:#f97373;
}
.shift-diff.neutral{
  opacity:.8;
}

/* Categories filter */
.catFilter{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-end;
  margin-bottom:8px;
}
.catFilter input[type="text"]{
  background:var(--panel2);
  border-radius:6px;
  border:1px solid rgba(255,255,255,.18);
  padding:4px 6px;
  color:#f9fafb;
  font-size:12px;
}
.catFilter label.row{
  font-size:11px;
}
td.catname.sub .muted{
  opacity:.6;
  font-size:11px;
  margin-right:4px;
}
.catToggle{
  display:inline-block;
  width:1.2em;
  text-align:center;
  cursor:pointer;
  margin-right:4px;
}
.catToggle.empty{
  visibility:hidden;
}
/* ==== Products table tweaks ==== */
#productsLayer .table td.num{
  text-align:right;
  font-variant-numeric:tabular-nums;
}

#productsLayer .table td.small{
  font-size:12px;
}

#productsLayer .table td.strong{
  font-weight:600;
}

/* alacsony készletű sor kiemelése */
#productsLayer tbody tr.low-row{
  background:#3b2323;
}

/* hover kiemelés a sorokon */
#productsLayer tbody tr:hover{
  background:rgba(255,255,255,.04);
}
/* ==== Kategóriák panel – vizuális hierarchia ==== */
#categoriesLayer #catTable tbody tr.cat-row.parent{
  background:rgba(255,255,255,.02);
}

#categoriesLayer #catTable tbody tr.cat-row.child{
  background:transparent;
}

#categoriesLayer #catTable tbody tr.cat-row.empty-cat td.catname{
  opacity:.85;
  font-style:italic;
}

#categoriesLayer #catTable tbody tr.cat-row.empty-cat td.num{
  background:rgba(248,113,113,.16);
  border-radius:999px;
  padding:2px 8px;
}

/* szülő/gyerek vizuálisan elkülönítve */
#categoriesLayer #catTable td.catname{
  font-weight:600;
}

#categoriesLayer #catTable td.catname.sub{
  font-weight:400;
  font-size:13px;
  padding-left:18px;
}

/* kis breadcrumb a gyerek neve előtt (szülő / gyerek) már megvan, ezt csak finomítjuk */
#categoriesLayer #catTable td.catname.sub .muted{
  opacity:.65;
  font-size:11px;
}

/* termékszám jobbra rendezve, stabil oszlop */
#categoriesLayer #catTable td.num{
  text-align:right;
  font-variant-numeric:tabular-nums;
}
/* ==== Kategóriák panel – kompakt sorok ==== */

/* kisebb padding a táblában */
#categoriesLayer .table th,
#categoriesLayer .table td{
  padding:4px 8px;
  font-size:13px;
}

/* a kategória táblában a .small gombok legyenek tényleg kicsik :) */
#categoriesLayer .small{
  height:auto;
  padding:3px 8px;
  border-radius:8px;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* nyilak kicsi távolsággal egymás alatt/fölött */
#categoriesLayer td > .small + .small{
  margin-left:4px;
}

/* törlés gomb finomabb piros kerettel */
#categoriesLayer .small.danger{
  border-color:rgba(239,68,68,.6);
}
/* Érték oszlop kiemelése a Termékek táblában */
#productsLayer .table td:nth-child(8),
#productsLayer .table th:nth-child(8){
  font-weight:600;
}
/* ==== POS – extra infó a sorokon ==== */
.left td .stockline{
  margin-top:2px;
  font-size:11px;
  opacity:.8;
}

.left tbody tr.pos-low{
  background:rgba(248,113,113,.12);
}

.left tbody tr.pos-low .stockline .low{
  color:#fecaca;
  font-weight:600;
}
/* ==== Fizetés panel (F10) ==== */
.modal.payModal{
  max-width:1040px;
}

.payContent{
  display:grid;
  grid-template-columns:1.7fr 1.1fr;
  gap:24px;
  align-items:stretch;
}

/* bal oldal „oszlopként” elrendezve, hogy kitöltse a magasságot */
.payLeft{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:16px;
}

/* Összeg-blokk */
.paySummary{
  padding:12px 14px;
  background:var(--panel2);
  border-radius:16px;
}

.paySummary .row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:6px;
  font-size:15px;
}

.paySummary .row span:first-child{
  opacity:.85;
}

.paySummary .row span:last-child{
  font-variant-numeric:tabular-nums;
}

/* konkrét összegek színezése */
#payTotal{
  font-size:26px;
  font-weight:700;
  color:#06fa60; /* rikító zöld */
}

#payChange{
  font-size:26px;
  font-weight:700;
  color:#e40303; /* piros */
}

.paySummary .row.big{
  margin-top:10px;
}

/* Címletek – 500..20000 egy sorban, nagyobb gombok */
.payDenoms{
  display:flex;
  flex-wrap:wrap;
  gap:2px;
  margin:14px 0;
}

#payModal .payDenoms .btn{
  flex:1 1 0;
  min-width:0;
  height:52px;
  padding:0 14px;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  background:var(--panel3);
  border:1px solid rgba(148,163,184,.7);
  color:var(--text);
  box-shadow:0 0 0 1px rgba(15,23,42,.4);
  white-space:nowrap;      /* <<< ne törje sorba a "20 000"-t */
  text-align:center;
}



#payModal .payDenoms .btn.wide{
  flex-basis:100%;
  margin-top:8px;
}

#payModal .payDenoms .btn:hover{
  border-color:var(--accent);
  background:var(--panel2);
}


/* Fizetési mód gombok – nagy, jól nyomható */
.payMethods{
  display:flex;
  gap:10px;
  margin-top:10px;
}

/* Fizetési mód gombok – alap forma */
#payModal .payMethods .btn{
  flex:1 1 0;
  height:100px;
  border-radius:999px;
  font-weight:600;
  font-size:16px;
  border:none;
}

/* egyedi színek a három módhoz */
#payCashModal{
  background:#61ff9b;        /* zöld */
  color:#000000;
}

#payCardModal{
  background:#3b82f6;        /* kék */
  color:#030303;
}

#payInvoiceModal{
  background:#abb2bd;        /* szürke */
  color:#000000;
}
/* ikon felül, szöveg alatta */
#payModal .payMethods .btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding-top:6px;
}

#payModal .payMethods .btn .pm-icon{
  font-size:22px;
  line-height:1;
}

#payModal .payMethods .btn .pm-label{
  font-size:14px;
}

#payModal .payMethods .btn:hover{
  filter:brightness(1.05);
}


/* Jobb oldal + keypad – nagyobb input + gombok */
.payRight .field{
  margin-bottom:12px;
}

.payRight label{
  font-size:13px;
  opacity:.8;
}

.payRight input{
  font-size:26px;
  text-align:right;
  padding:8px 12px;
  height:52px;
}
/* number input nyilak eltüntetése a fizetés panelen */
#payModal input[type=number]::-webkit-inner-spin-button,
#payModal input[type=number]::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0;
}

#payModal input[type=number]{
  -moz-appearance:textfield;
}

.payKeypad{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.payKeypad button{
  height:60px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  font-size:22px;
  cursor:pointer;
}

.payKeypad button:hover{
  border-color:var(--accent);
  background:var(--panel3);
}

.payKeypad button:active{
  transform:translateY(1px);
}


/* ==== FIX: Fizetés panel jobb oldali fix nézet ==== */
.right{
  grid-template-rows:auto 1fr auto auto;
}

/* Fizetés panel doboz */
.payPanel{
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.payPanelHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:700;
  font-size:14px;
  opacity:.9;
  margin-bottom:8px;
}

/* Paneles elrendezés: 1 oszlop, egymás alatt */
.payPanel .payContent{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:0;
  overflow-x:hidden;
}
.payPanel .payLeft{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.payPanel .payRight{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

/* Címletek – gridben, hogy ne nyomódjanak össze */
.payPanel .payDenoms{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin:10px 0 6px;
}
.payPanel .payDenoms .btn{
  height:40px;
  font-size:14px;
  border-radius:999px;
  white-space:nowrap;
}

/* Keypad nagyobb és arányos */
.payPanel .payKeypad{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}
.payPanel .payKeypad button{
  height:54px;
  font-size:20px;
  border-radius:12px;
}

/* Fizetési mód gombok – kisebb, de kéznél */
.payPanel .payMethods{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin-top:6px;
}
.payPanel .payMethods .btn{
  height:68px;
  border-radius:14px;
  font-size:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.payPanel .payMethods .btn .pm-icon{
  font-size:22px;
}

/* Régi modal specifikus szabályok panelen is éljenek */
.payPanel .payMethods .btn:hover{ filter:brightness(1.05); }
.payPanel input[type=number]::-webkit-inner-spin-button,
.payPanel input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.payPanel input[type=number]{ -moz-appearance:textfield; }