/* Mikamránk — téma-védett, letisztult felület.
   Minden szabály #okamra-app alá scope-olva. A téma globális
   button/input szabályait reset + !important semlegesíti. */

/* --- HARD RESET: a téma öröksége ne szivárogjon be --- */
#okamra-app, #okamra-app * {
  box-sizing: border-box !important;
}
#okamra-app button,
#okamra-app input,
#okamra-app select,
#okamra-app textarea {
  all: revert;
  box-sizing: border-box !important;
  font-family: inherit !important;
  margin: 0;
  outline: none;
}
#okamra-app button { -webkit-appearance: none !important; appearance: none !important; cursor: pointer; }

#okamra-app {
  --bg:#f7f4ef; --surface:#ffffff; --surface-2:#f1ede6; --line:#e8e2d7; --line-2:#d6cfc1;
  --ink:#2b2925; --ink-soft:#675f56; --muted:#9d968a; --accent:#bd6a36;
  --accent-soft:#f6e7da; --accent-ink:#8a4a22; --green:#5a8a57; --green-soft:#e7f0e5;
  --red:#bf5239; --red-soft:#f8e3dc; --gold:#c89a45;
  --r:18px; --r-sm:12px;
  --shadow:0 1px 3px rgba(43,41,37,.05),0 6px 20px rgba(43,41,37,.07);
  --shadow-lg:0 12px 40px rgba(43,41,37,.16);
  --font:ui-sans-serif,-apple-system,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  display:block !important;
  max-width:600px !important; margin:0 auto !important;
  background:var(--bg) !important; color:var(--ink) !important;
  font-family:var(--font) !important; font-size:15px !important; line-height:1.5 !important;
  min-height:78vh; border-radius:var(--r) !important; overflow:hidden !important;
  box-shadow:var(--shadow); -webkit-tap-highlight-color:transparent;
}

#okamra-app .okamra-loading,
#okamra-app .okamra-err { padding:44px 24px; color:var(--muted); text-align:center; font-size:14px; }
#okamra-app .okamra-err { color:var(--red); }
#okamra-app .pad { padding:18px 20px; }
#okamra-app .xs { font-size:12px; }
#okamra-app .mono { font-family:var(--mono); }
#okamra-app .big { font-size:20px; letter-spacing:.1em; }
#okamra-app .okamra-muted { color:var(--muted); font-size:13px; line-height:1.55; }

#okamra-app .okamra-onboard { padding:46px 24px 38px; text-align:center; }
#okamra-app .okamra-brand { font-size:30px; font-weight:800; letter-spacing:-.03em; color:var(--accent) !important; }
#okamra-app .okamra-brand.sm { font-size:17px; font-weight:700; letter-spacing:-.02em; }
#okamra-app .okamra-sub { color:var(--ink-soft); margin:14px 0 30px; line-height:1.6; }
#okamra-app .okamra-or { margin:24px 0; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.22em; position:relative; }
#okamra-app .okamra-or::before,
#okamra-app .okamra-or::after { content:""; position:absolute; top:50%; width:30%; height:1px; background:var(--line-2); }
#okamra-app .okamra-or::before { left:0; }
#okamra-app .okamra-or::after { right:0; }

#okamra-app .okamra-card {
  background:var(--surface) !important; border:1px solid var(--line) !important;
  border-radius:var(--r) !important; padding:22px !important; text-align:left;
  margin-bottom:12px; box-shadow:var(--shadow);
}
#okamra-app .okamra-card.tight { padding:16px !important; margin:16px 20px; }
#okamra-app .okamra-card h3 { margin:0 0 6px; font-size:16px; font-weight:700; color:var(--ink); }

#okamra-app .okamra-input {
  display:block; width:100% !important; padding:14px 15px !important; margin:8px 0 !important;
  background:var(--surface) !important; border:1.5px solid var(--line-2) !important;
  border-radius:var(--r-sm) !important; color:var(--ink) !important; font-size:16px !important;
  line-height:1.4 !important; transition:border-color .15s, box-shadow .15s;
}
#okamra-app .okamra-input::placeholder { color:var(--muted) !important; }
#okamra-app .okamra-input:focus { border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-soft) !important; }
#okamra-app .okamra-input.sm { padding:10px 12px !important; font-size:14px !important; margin:4px 0 !important; }
#okamra-app .okamra-input.qty { max-width:96px !important; text-align:center; }
#okamra-app .okamra-input.mono { font-family:var(--mono) !important; }
#okamra-app select.okamra-input { -webkit-appearance:menulist !important; appearance:menulist !important; }
#okamra-app textarea.okamra-input { resize:vertical; }

#okamra-app .okamra-btn {
  display:flex !important; align-items:center; justify-content:center;
  width:100% !important; padding:14px 20px !important; margin-top:12px !important;
  background:var(--surface) !important; color:var(--ink) !important;
  border:1.5px solid var(--line-2) !important; border-radius:var(--r-sm) !important;
  font-size:15px !important; font-weight:600 !important; cursor:pointer;
  transition:all .15s; text-align:center; text-decoration:none !important; gap:8px;
  line-height:1.3 !important; text-transform:none !important;
}
#okamra-app .okamra-btn:hover { border-color:var(--accent) !important; color:var(--accent-ink) !important; }
#okamra-app .okamra-btn:active { transform:translateY(1px); }
#okamra-app .okamra-btn:disabled { opacity:.5; cursor:default; transform:none; }
#okamra-app .okamra-btn.primary {
  background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important;
  box-shadow:0 3px 10px rgba(189,106,54,.3);
}
#okamra-app .okamra-btn.primary:hover { background:var(--accent-ink) !important; color:#fff !important; border-color:var(--accent-ink) !important; }
#okamra-app .okamra-btn.ghost { background:transparent !important; border-color:transparent !important; color:var(--ink-soft) !important; box-shadow:none; }
#okamra-app .okamra-btn.ghost:hover { background:var(--surface-2) !important; color:var(--ink) !important; }

#okamra-app .okamra-header {
  display:flex !important; justify-content:space-between; align-items:center;
  padding:18px 20px 16px !important; background:var(--surface) !important;
  border-bottom:1px solid var(--line) !important;
}
#okamra-app .okamra-hh { color:var(--muted); font-size:12px; font-weight:500; }
#okamra-app .okamra-tabs {
  display:flex !important; background:var(--surface) !important;
  border-bottom:1px solid var(--line) !important;
  overflow-x:auto; scrollbar-width:thin; padding:0 8px !important;
  flex-wrap:wrap;
}
/* Asztali nézeten a fülek tördelődjenek két sorba, hogy ne lógjon ki
 * semmi (a háztartás-fül eddig elérhetetlen volt görgetés nélkül). */
@media (min-width: 720px) {
  #okamra-app .okamra-tabs { overflow-x:visible; flex-wrap:wrap; row-gap:2px; }
}
/* Mobilon marad a vízszintes csúsztatás, de látható scrollbar-ral. */
@media (max-width: 719px) {
  #okamra-app .okamra-tabs { flex-wrap:nowrap; scrollbar-width:none; }
  #okamra-app .okamra-tabs::-webkit-scrollbar { display:none; }
}
#okamra-app .okamra-tab {
  flex:0 0 auto; padding:14px 14px 12px !important; background:none !important;
  border:none !important; border-bottom:2.5px solid transparent !important;
  color:var(--muted) !important; font-size:13px !important; font-weight:600 !important;
  cursor:pointer; transition:color .15s; white-space:nowrap; text-transform:none !important;
  border-radius:0 !important; box-shadow:none !important;
}
#okamra-app .okamra-tab:hover { color:var(--ink-soft) !important; }
#okamra-app .okamra-tab.active { color:var(--accent) !important; border-bottom-color:var(--accent) !important; }
#okamra-app .okamra-body { padding:4px 0 28px; min-height:56vh; }

#okamra-app .okamra-loc {
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 20px 9px; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.13em; color:var(--accent-ink);
}
#okamra-app .okamra-loc .okamra-locact { display:flex; gap:6px; }
#okamra-app .okamra-item,
#okamra-app .okamra-sitem {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px !important; margin:0 14px 7px; background:var(--surface) !important;
  border:1px solid var(--line) !important; border-radius:var(--r-sm) !important;
  transition:border-color .12s, transform .12s; gap:12px;
}
#okamra-app .okamra-item { cursor:pointer; }
#okamra-app .okamra-item:hover { border-color:var(--line-2) !important; transform:translateX(2px); }
#okamra-app .okamra-sitem { align-items:flex-start; }
#okamra-app .okamra-item-n { font-size:15px; font-weight:500; color:var(--ink); }
#okamra-app .okamra-qty {
  color:var(--ink-soft); font-size:14px; font-variant-numeric:tabular-nums;
  background:var(--surface-2); padding:4px 12px; border-radius:999px; white-space:nowrap;
}
#okamra-app .okamra-qty.low { color:var(--red); background:var(--red-soft); font-weight:700; }

#okamra-app .okamra-predict {
  margin:16px; background:linear-gradient(135deg,var(--accent-soft),#fff);
  border:1px solid var(--gold); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow);
}
#okamra-app .okamra-predict-h {
  padding:13px 18px; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; color:var(--accent-ink); border-bottom:1px solid rgba(200,154,69,.4);
}
#okamra-app .okamra-predict-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 18px; font-size:14px; }

#okamra-app .okamra-ac-wrap { position:relative; }
#okamra-app .okamra-ac-list {
  position:absolute; left:0; right:0; top:calc(100% - 4px); z-index:50;
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-sm); box-shadow:var(--shadow-lg); max-height:240px; overflow-y:auto;
}
#okamra-app .okamra-ac-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 14px; cursor:pointer; border-bottom:1px solid var(--line); font-size:14px;
}
#okamra-app .okamra-ac-item:last-child { border-bottom:none; }
#okamra-app .okamra-ac-item:hover,
#okamra-app .okamra-ac-item.sel { background:var(--accent-soft); }
#okamra-app .okamra-ac-cat { font-size:11px; color:var(--muted); }
#okamra-app .okamra-ac-own { font-size:10px; color:var(--green); background:var(--green-soft); padding:2px 7px; border-radius:999px; margin-left:6px; }

#okamra-app .okamra-appr {
  padding:14px 18px; margin:0 14px 7px; background:var(--surface);
  border:1px solid var(--line); border-left:3px solid var(--line-2); border-radius:var(--r-sm);
}
#okamra-app .okamra-appr.clarify { border-left-color:var(--red); background:var(--red-soft); }
#okamra-app .okamra-appr.dict { border-left-color:var(--gold); }
#okamra-app .okamra-appr-row { display:flex; gap:8px; align-items:center; }
#okamra-app .okamra-appr-row .okamra-input { flex:1; }
#okamra-app .okamra-appr-meta { display:flex; gap:8px; align-items:center; margin-top:6px; flex-wrap:wrap; }
#okamra-app .okamra-tag {
  display:inline-block; padding:3px 9px; margin-left:6px; background:var(--surface-2);
  border-radius:999px; font-size:11px; color:var(--ink-soft); vertical-align:middle; font-weight:500;
}
#okamra-app .okamra-tag.red { background:var(--red-soft); color:var(--red); }
#okamra-app .okamra-tag.gold { background:var(--accent-soft); color:var(--accent-ink); }
#okamra-app .okamra-tag.green { background:var(--green-soft); color:var(--green); }
#okamra-app .okamra-warn {
  margin:16px 20px; padding:13px 16px; background:var(--red-soft);
  border-radius:var(--r-sm); color:var(--red); font-size:13px; line-height:1.5;
}
#okamra-app .okamra-status { padding:18px 20px; color:var(--ink-soft); font-size:14px; }
#okamra-app .okamra-file { display:none !important; }

#okamra-app .okamra-mic {
  display:flex !important; align-items:center; justify-content:center;
  width:96px !important; height:96px !important; margin:32px auto 16px !important;
  border-radius:50% !important; font-size:36px; cursor:pointer;
  background:var(--surface) !important; border:1.5px solid var(--line-2) !important;
  color:var(--accent) !important; transition:all .2s; box-shadow:var(--shadow);
}
#okamra-app .okamra-mic:hover { border-color:var(--accent) !important; }
#okamra-app .okamra-mic:active { transform:scale(.94); }
#okamra-app .okamra-mic.rec { background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; animation:okamra-pulse 1.2s infinite; }
@keyframes okamra-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(189,106,54,.45);} 50%{box-shadow:0 0 0 18px rgba(189,106,54,0);} }
#okamra-app .okamra-mic-hint { text-align:center; color:var(--muted); font-size:12.5px; padding:0 24px 6px; min-height:18px; }
#okamra-app .okamra-transcript { text-align:center; color:var(--ink-soft); padding:8px 24px 20px; min-height:26px; font-size:15px; font-style:italic; }
#okamra-app .okamra-transcript.has { color:var(--ink); font-weight:500; }

/* --- Item áthelyezés: markoló + húzás + drop-cél --- */
#okamra-app .okamra-grip {
  color:var(--line-2); font-size:14px; cursor:grab; padding:0 4px;
  user-select:none; -webkit-user-select:none; touch-action:none;
}
#okamra-app .okamra-grip:hover { color:var(--accent); }
#okamra-app .okamra-item-drag { cursor:default; }
#okamra-app .okamra-item-drag.dragging { opacity:.45; background:var(--accent-soft); }
#okamra-app .okamra-loc-fold.drop-on {
  background:var(--accent-soft); color:var(--accent-ink);
  outline:2px dashed var(--accent); outline-offset:-3px;
}

/* --- Mobil hely-választó lap (alulról felcsúszó) --- */
.okamra-modal-bg {
  position:fixed; inset:0; z-index:99999;
  background:rgba(40,34,28,.45); display:flex;
  align-items:flex-end; justify-content:center;
}
.okamra-sheet {
  width:100%; max-width:520px; box-sizing:border-box;
  background:#fdfaf5; border-radius:18px 18px 0 0;
  padding:20px 16px calc(20px + env(safe-area-inset-bottom,0));
  box-shadow:0 -8px 30px rgba(0,0,0,.18);
  animation:okamra-sheet-up .18s ease-out;
  display:flex; flex-direction:column; gap:8px;
}
@keyframes okamra-sheet-up { from { transform:translateY(40px); opacity:.6; } to { transform:translateY(0); opacity:1; } }
.okamra-sheet-h { font-size:16px; font-weight:700; color:#2b2925; padding:0 4px 2px; }
@media (min-width:560px) {
  .okamra-modal-bg { align-items:center; }
  .okamra-sheet { border-radius:18px; }
}

#okamra-app .okamra-sitem .okamra-tip { margin-top:7px; font-size:12px; color:var(--green); background:var(--green-soft); padding:8px 11px; border-radius:8px; line-height:1.45; }
#okamra-app .okamra-tip.promo { color:var(--accent-ink); background:var(--accent-soft); }
#okamra-app .okamra-mini {
  padding:8px 13px !important; background:var(--surface-2) !important;
  border:1px solid var(--line-2) !important; border-radius:8px !important;
  color:var(--ink-soft) !important; font-size:12px !important; font-weight:600 !important;
  cursor:pointer; white-space:nowrap; transition:all .12s; text-transform:none !important;
}
#okamra-app .okamra-mini:hover { border-color:var(--accent) !important; color:var(--accent-ink) !important; }
#okamra-app .okamra-card label { display:block; margin-top:10px; }

#okamra-app .okamra-invite {
  display:flex; flex-direction:column; gap:6px; margin:12px 20px; padding:16px;
  background:var(--accent-soft); border:1px dashed var(--gold); border-radius:var(--r-sm);
}
#okamra-app .okamra-invite.spent { opacity:.5; border-style:solid; background:var(--surface-2); }
#okamra-app .okamra-invite .mono.big { color:var(--accent-ink); font-weight:700; }

.okamra-modal {
  position:fixed !important; inset:0 !important;
  background:rgba(43,41,37,.5) !important;
  display:flex !important; align-items:flex-end !important; justify-content:center !important;
  z-index:99999 !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch;
  padding:0 !important;
}
/* Nagyobb képernyőn középre, kis margóval — ne tapadjon az aljához. */
@media (min-height:560px) {
  .okamra-modal { align-items:center !important; padding:24px 12px !important; }
  .okamra-modal-box { border-radius:18px !important; }
}
.okamra-modal-box {
  box-sizing:border-box !important;
  background:#f7f4ef !important; width:100% !important; max-width:600px !important;
  max-height:90vh !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch;
  padding:24px 20px calc(24px + env(safe-area-inset-bottom, 20px)) !important;
  border-radius:18px 18px 0 0 !important; animation:okamra-up .25s ease;
  font-family:ui-sans-serif,-apple-system,system-ui,sans-serif !important;
  color:#2b2925 !important; line-height:1.5 !important;
}
@keyframes okamra-up { from{transform:translateY(40px);} to{transform:translateY(0);} }
.okamra-modal-box * { box-sizing:border-box !important; }
.okamra-modal-box h3 { margin:0 0 16px !important; font-size:17px !important; color:#2b2925 !important; font-weight:700 !important; }
.okamra-modal-box label { display:block; margin-top:10px; color:#675f56 !important; }

/* A modal a body-ban él (#okamra-app-on kívül), ezért a téma-védelmet
   itt külön meg kell ismételni — különben a téma elnyomja a gombokat. */
.okamra-modal-box button,
.okamra-modal-box input,
.okamra-modal-box select,
.okamra-modal-box textarea {
  all:revert; box-sizing:border-box !important;
  font-family:inherit !important; margin:0;
}
.okamra-modal-box button { -webkit-appearance:none !important; appearance:none !important; cursor:pointer; }
.okamra-modal-box .okamra-input {
  display:block; width:100% !important; padding:14px 15px !important; margin:8px 0 !important;
  background:#fff !important; border:1.5px solid #d6cfc1 !important;
  border-radius:12px !important; color:#2b2925 !important; font-size:16px !important;
  line-height:1.4 !important;
}
.okamra-modal-box .okamra-input.sm { padding:10px 12px !important; font-size:14px !important; }
.okamra-modal-box .okamra-input.qty { max-width:96px !important; text-align:center; }
.okamra-modal-box .okamra-input:focus { border-color:#bd6a36 !important; box-shadow:0 0 0 3px #f6e7da !important; outline:none; }
.okamra-modal-box select.okamra-input { appearance:auto !important; -webkit-appearance:menulist !important; }
.okamra-modal-box textarea.okamra-input { resize:vertical; min-height:140px; }
.okamra-modal-box .okamra-btn {
  display:flex !important; align-items:center; justify-content:center;
  width:100% !important; padding:14px 20px !important; margin-top:12px !important;
  background:#fff !important; color:#2b2925 !important;
  border:1.5px solid #d6cfc1 !important; border-radius:12px !important;
  font-size:15px !important; font-weight:600 !important; cursor:pointer;
  text-align:center; text-decoration:none !important; gap:8px;
  line-height:1.3 !important; text-transform:none !important;
}
.okamra-modal-box .okamra-btn.primary {
  background:#bd6a36 !important; color:#fff !important; border-color:#bd6a36 !important;
  box-shadow:0 3px 10px rgba(189,106,54,.3);
}
.okamra-modal-box .okamra-btn.ghost { background:transparent !important; border-color:transparent !important; color:#675f56 !important; }
.okamra-modal-box .okamra-btn:disabled { opacity:.5; cursor:default; }
.okamra-modal-box .okamra-mini {
  padding:10px 14px !important; background:#f1ede6 !important;
  border:1px solid #d6cfc1 !important; border-radius:8px !important;
  color:#675f56 !important; font-size:13px !important; font-weight:600 !important;
  cursor:pointer; text-transform:none !important;
}
.okamra-modal-box .okamra-muted { color:#9d968a !important; font-size:13px; }
.okamra-modal-box .xs { font-size:12px !important; }
.okamra-log { padding:11px 0; border-bottom:1px solid #e8e2d7; font-size:13px; line-height:1.5; display:flex; flex-wrap:wrap; align-items:center; gap:4px; color:#2b2925; }

.okamra-toast {
  position:fixed !important; bottom:26px; left:50%; transform:translate(-50%,24px);
  background:#2b2925 !important; color:#fff !important; padding:14px 20px !important;
  border-radius:12px !important; font-size:14px !important; font-weight:500 !important;
  opacity:0; transition:all .3s cubic-bezier(.2,.8,.3,1); z-index:100000 !important;
  max-width:88vw; box-shadow:0 12px 40px rgba(43,41,37,.16);
}
.okamra-toast.show { opacity:1; transform:translate(-50%,0); }
.okamra-toast.err { background:#bf5239 !important; }

#okamra-app .okamra-login { padding:48px 24px; text-align:center; }
#okamra-app .okamra-login h2 { color:var(--accent) !important; font-size:24px; }
#okamra-app .okamra-empty { text-align:center; padding:50px 28px; color:var(--muted); }
#okamra-app .okamra-empty-ic { font-size:40px; margin-bottom:12px; opacity:.6; }

/* --- Összecsukható tárolási helyek (mappák) --- */
#okamra-app .okamra-loc-fold { cursor:pointer; user-select:none; transition:color .12s; }
#okamra-app .okamra-loc-fold:hover { color:var(--accent); }
#okamra-app .okamra-caret { font-size:11px; width:12px; display:inline-block; transition:transform .12s; opacity:.7; }
#okamra-app .okamra-loc-count { font-size:11px; font-weight:600; color:var(--muted); text-transform:none; letter-spacing:0; }

/* --- Készlet-kereső input (search típus) --- */
#okamra-app input[type="search"].okamra-input { -webkit-appearance:none !important; appearance:none !important; }

/* --- Hang: intent-súgó --- */
#okamra-app .okamra-voice-help {
  margin:0 20px 8px; padding:14px 16px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:12.5px; color:var(--ink-soft); line-height:1.9;
}
#okamra-app .okamra-voice-help b { color:var(--ink); }

/* --- Recept: lépések, checkboxok, fej --- */
#okamra-app .okamra-recipe-head { font-size:14px; text-transform:none; letter-spacing:0; color:var(--ink); }
#okamra-app .okamra-steps { margin:6px 22px 8px; padding-left:22px; color:var(--ink-soft); font-size:13.5px; line-height:1.65; }
#okamra-app .okamra-steps li { margin:5px 0; }
#okamra-app .okamra-check {
  width:22px !important; height:22px !important; flex:0 0 auto;
  accent-color:var(--accent); cursor:pointer;
}
#okamra-app .okamra-check-row { align-items:center; }

/* --- Recept jóváhagyó checkbox + duplikátum-sor --- */
#okamra-app .okamra-appr.dup { border-left-color:var(--gold); background:var(--accent-soft); opacity:.85; }
#okamra-app .okamra-appr-chk { display:flex; align-items:center; flex:0 0 auto; }
#okamra-app .okamra-appr-chk .okamra-check { width:20px !important; height:20px !important; }

/* --- Kedvenc csillag --- */
#okamra-app .okamra-star {
  font-size:20px; cursor:pointer; color:var(--line-2); line-height:1;
  transition:color .12s, transform .12s; user-select:none;
}
#okamra-app .okamra-star:hover { transform:scale(1.15); color:var(--gold); }
#okamra-app .okamra-star.on { color:var(--gold); }

/* --- Bevásárlólista művelet-gombok (megvettem + törlés) --- */
#okamra-app .okamra-sitem-act { display:flex; gap:6px; align-items:center; flex:0 0 auto; }
#okamra-app .okamra-mini.danger {
  background:var(--red-soft) !important; color:var(--red) !important;
  border-color:var(--red-soft) !important; padding:8px 11px !important;
}
#okamra-app .okamra-mini.danger:hover { border-color:var(--red) !important; color:var(--red) !important; }

/* --- Heti menü kártyák --- */
#okamra-app .okamra-meal {
  margin:0 14px 8px; padding:14px 16px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow);
}
#okamra-app .okamra-meal-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
#okamra-app .okamra-meal-meta { display:flex; gap:8px; align-items:center; margin-top:6px; flex-wrap:wrap; }
#okamra-app .okamra-meal-det { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
#okamra-app .okamra-meal-sub {
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--accent-ink); margin:10px 0 4px;
}

/* ---- v1.13: hang-szerkesztő ---- */
#okamra-app .okamra-voice-edit {
  width:100%; box-sizing:border-box; resize:vertical; line-height:1.5;
  font-size:15px; min-height:72px;
}

/* ---- v1.15: újratervezett bevásárlólista-tétel ----
   Kompakt kártya: 1. sor = fogantyú + név, 2. sor = stepper + műveletek.
   Cél: egy tétel egy „falat", kevés görgetés, nagy gombok. */
#okamra-app .okamra-shop-list { display:flex; flex-direction:column; gap:10px; }

#okamra-app .okamra-sitem2 {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 13px;
  display:flex; flex-direction:column; gap:9px;
}
#okamra-app .okamra-sitem2.dragging { opacity:.45; background:var(--accent-soft); }

/* 1. sor */
#okamra-app .okamra-sirow1 { display:flex; align-items:flex-start; gap:9px; }
#okamra-app .okamra-sirow1 .okamra-grip {
  cursor:grab; color:var(--muted); font-size:18px; line-height:1.3;
  padding-top:2px; flex:0 0 auto; user-select:none;
}
#okamra-app .okamra-ordcol { display:flex; flex-direction:column; gap:3px; flex:0 0 auto; }
#okamra-app .okamra-ord {
  width:30px; height:24px; border:1px solid var(--line); background:var(--surface-2);
  border-radius:7px; font-size:11px; color:var(--ink-soft); cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
}
#okamra-app .okamra-ord:active { background:var(--accent-soft); }
#okamra-app .okamra-simain { flex:1; min-width:0; }
#okamra-app .okamra-sitem2 .okamra-item-n {
  font-size:17px; font-weight:600; color:var(--ink); line-height:1.3;
  word-break:break-word; display:block;
}
#okamra-app .okamra-sitags { display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
#okamra-app .okamra-icobtn {
  flex:0 0 auto; width:34px; height:34px; border:1px solid var(--line);
  background:var(--surface-2); border-radius:9px; cursor:pointer;
  font-size:15px; color:var(--ink-soft); display:flex; align-items:center; justify-content:center;
}
#okamra-app .okamra-icobtn.danger { color:var(--red); border-color:var(--red-soft); }
#okamra-app .okamra-icobtn:active { transform:scale(.94); }

/* tipp (ár) */
#okamra-app .okamra-sitem2 .okamra-tip {
  font-size:12px; color:var(--green); background:var(--green-soft);
  padding:7px 10px; border-radius:8px; line-height:1.45; margin:0;
}
#okamra-app .okamra-sitem2 .okamra-tip.promo { color:var(--accent-ink); background:var(--accent-soft); }

/* 2. sor: stepper + műveletek */
#okamra-app .okamra-sirow2 {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
#okamra-app .okamra-stepper {
  display:flex; align-items:center; gap:0; flex:0 0 auto;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:var(--surface-2);
}
#okamra-app .okamra-step {
  width:40px; height:40px; border:0; background:transparent; cursor:pointer;
  font-size:21px; font-weight:600; color:var(--accent-ink); padding:0;
  display:flex; align-items:center; justify-content:center;
}
#okamra-app .okamra-step:active { background:var(--accent-soft); }
#okamra-app .okamra-qtyv {
  width:46px; height:40px; border:0; border-left:1px solid var(--line);
  border-right:1px solid var(--line); background:#fff; text-align:center;
  font-size:16px; font-weight:700; color:var(--ink); padding:0; -moz-appearance:textfield;
}
#okamra-app .okamra-qtyv:focus { outline:2px solid var(--accent); outline-offset:-2px; }
#okamra-app .okamra-qtyu {
  font-size:12px; color:var(--ink-soft); padding:0 10px; white-space:nowrap;
  align-self:center;
}
#okamra-app .okamra-siacts { display:flex; align-items:center; gap:7px; flex:1; justify-content:flex-end; }
#okamra-app .okamra-act-buy {
  flex:0 1 auto; min-height:40px; padding:0 16px; border:0; border-radius:10px;
  background:var(--accent); color:#fff; font-size:14px; font-weight:600; cursor:pointer;
}
#okamra-app .okamra-act-buy:active { filter:brightness(.94); }
#okamra-app .okamra-act-min {
  flex:0 0 auto; min-height:40px; padding:0 13px; border:1px solid var(--line);
  border-radius:10px; background:var(--surface-2); color:var(--ink-soft);
  font-size:14px; cursor:pointer;
}
#okamra-app .okamra-act-min:active { background:var(--accent-soft); }

@media (max-width:520px) {
  /* Mobilon a műveletek külön sorba kerülnek a stepper alatt, hogy
   * ne kelljen szűkítgetni semmit (5 elem nem fér egy sorba). */
  #okamra-app .okamra-sirow2 { flex-direction:column; align-items:stretch; gap:8px; }
  #okamra-app .okamra-stepper { align-self:flex-start; }
  #okamra-app .okamra-siacts { width:100%; justify-content:space-between; flex-wrap:wrap; }
  #okamra-app .okamra-pricebtn { flex:1 1 100%; max-width:none; justify-content:center; }
}

/* ---- v1.16: készlet gyors-műveletek + ár-összegző ---- */
#okamra-app .okamra-inv2 { flex-direction:column; align-items:stretch; gap:8px; }
#okamra-app .okamra-invtop { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
#okamra-app .okamra-qactions { display:flex; gap:6px; flex-wrap:wrap; }
#okamra-app .okamra-qbtn {
  flex:1 1 auto; min-height:36px; padding:0 12px; border:1px solid var(--line);
  border-radius:9px; background:var(--surface-2); color:var(--ink-soft);
  font-size:13px; font-weight:600; cursor:pointer;
}
#okamra-app .okamra-qbtn:active { background:var(--accent-soft); }
#okamra-app .okamra-qbtn.accent {
  background:var(--accent); color:#fff; border-color:var(--accent);
}
#okamra-app .okamra-qbtn:disabled { opacity:.5; }

#okamra-app .okamra-pricebox {
  background:var(--green-soft); border:1px solid var(--green);
  border-radius:12px; padding:12px 13px; margin-bottom:8px;
}
#okamra-app .okamra-pricebox-h { font-size:14px; color:var(--ink); margin-bottom:8px; }
#okamra-app .okamra-price-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:5px 0; border-top:1px solid rgba(0,0,0,.06); font-size:13.5px; color:var(--ink-soft);
}
#okamra-app .okamra-price-row.best { font-weight:700; color:var(--green); }
#okamra-app .okamra-price-row:first-of-type { border-top:0; }

/* ---- v1.18: bolt-szekciók, ár-ikon, ár-popover ---- */

/* Szekciók a listán (Általános + boltonként). */
#okamra-app .okamra-shop-sec { margin:6px 12px 14px; }
#okamra-app .okamra-shop-sec-h {
  font-size:13px; font-weight:700; color:var(--ink-soft);
  padding:6px 4px 8px; display:flex; align-items:center; gap:6px;
  border-bottom:1px solid var(--line); margin-bottom:8px;
}
#okamra-app .okamra-shop-sec.gen .okamra-shop-sec-h {
  color:var(--accent-ink); background:var(--accent-soft);
  padding:8px 12px; border-radius:9px; border:0;
}
#okamra-app .okamra-shop-sec-b { display:flex; flex-direction:column; gap:10px; }

/* Üres általános szekciónak nincs feje keret nélkül — elrejtjük, ha üres. */
#okamra-app .okamra-shop-sec .okamra-shop-sec-b:empty { display:none; }
#okamra-app .okamra-shop-sec:has(.okamra-shop-sec-b:empty) .okamra-shop-sec-h { display:none; }

/* Ár-ikon a tételen. */
#okamra-app .okamra-pricebtn {
  flex:0 0 auto; min-height:40px; padding:0 12px; border:1px solid var(--line);
  border-radius:10px; background:var(--green-soft); color:var(--green);
  font-size:13px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px; max-width:160px;
}
#okamra-app .okamra-pricebtn .okamra-pricebtn-l {
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#okamra-app .okamra-pricebtn:active { transform:scale(.96); }
#okamra-app .okamra-pricebtn.multi::after {
  content:' …'; opacity:.7; font-weight:400;
}

/* Ár-popover sorai. */
#okamra-app .okamra-pricerow {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:11px 13px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface-2); cursor:pointer; margin-bottom:6px;
  font-size:14px; color:var(--ink); text-align:left;
}
#okamra-app .okamra-pricerow.best { background:var(--green-soft); border-color:var(--green); }
#okamra-app .okamra-pricerow.best .okamra-pricerow-l { font-weight:700; color:var(--green); }
#okamra-app .okamra-pricerow:active { transform:scale(.98); }

/* Megtakarítás-riasztás a lista tetején. */
#okamra-app .okamra-savings-alert {
  margin:8px 12px 10px; padding:14px 16px;
  border-radius:12px; border:2px solid var(--accent);
  background:linear-gradient(135deg, var(--accent-soft), var(--surface));
  color:var(--ink);
}