/* ======================================================================
   MasterKeys - Hibrid AI kereso (mega dropdown) stilus
   Helye: child-theme/assets/css/mk-aisearch.css
   Minden a .mk-mega ala scope-olva. Font a temabol orokol.
   BeTheme reseteket, z-index es overflow fixet is tartalmaz.
   ====================================================================== */

.mk-mega{
  --mk-brand:#ff1100;
  --mk-brand-d:#d60e00;
  --mk-soft:rgba(255,17,0,.08);
  --mk-green:#00B359;
  --mk-search-navy:#0b1a36;
  --mk-search-soft:rgba(11,26,54,.08);
  --mk-search-steel:#285a85;
  --mk-search-line:#99b9d4;
  --mk-ink:#0f172a;
  --mk-muted:#64748b;
  --mk-line:#e6eaf0;
  --mk-bg:#ffffff;
  --mk-tile:#f1f5f9;
  position:relative;
  width:100%;
  max-width:100%;
  z-index:100000;
}
.mk-mega *{ box-sizing:border-box; }
.mk-mega input,
.mk-mega button,
.mk-mega select,
.mk-mega textarea{ font-family:inherit !important; }

/* A hidden attributum mindig gyozzon */
.mk-mega [hidden]{ display:none !important; }

/* Semmilyen gyari kek link */
.mk-mega a,
.mk-mega a:visited,
.mk-mega a:focus{ color:inherit !important; text-decoration:none !important; }

/* ======================================================================
   Kereso mezo
   ====================================================================== */
.mk-mega-field{
  display:flex; align-items:center; gap:10px;
  background:var(--mk-bg);
  border:1.5px solid var(--mk-line) !important;
  border-radius:12px;
  box-shadow:none;
  padding:6px 6px 6px 14px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.mk-mega-field:focus-within{
  border-color:var(--mk-search-navy) !important;
  box-shadow:0 0 0 3px var(--mk-search-soft) !important;
}
.mk-mega-ico{ color:var(--mk-muted); display:flex; flex:0 0 auto; }
.mk-mega-field:focus-within .mk-mega-ico{ color:var(--mk-search-navy); }

/* BeTheme input reset */
.mk-mega-field .mk-mega-input,
.mk-mega-field input[type="text"]{
  flex:1 1 auto; min-width:0;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  border-radius:0 !important;
  padding:8px 2px !important;
  margin:0 !important;
  height:auto !important;
  min-height:0 !important;
  font-size:15px !important;
  line-height:1.4;
  color:var(--mk-ink) !important;
}
.mk-mega-field .mk-mega-input:focus{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.mk-mega-input::placeholder{ color:var(--mk-muted); opacity:1; }
#mkMega #mkmInput{ caret-color:var(--mk-search-navy); text-overflow:ellipsis; }
#mkMega #mkmInput:focus,
#mkMega #mkmInput:focus::placeholder{ color:var(--mk-search-navy) !important; -webkit-text-fill-color:var(--mk-search-navy) !important; opacity:1; }
#mkMega #mkmInput::selection{ background:var(--mk-search-navy); color:#fff; -webkit-text-fill-color:#fff; }

/* BeTheme button reset a Keres gombon */
.mk-mega-submit{
  flex:0 0 auto; cursor:pointer;
  background:var(--mk-brand) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:none !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  font-size:14px; font-weight:700;
  height:auto !important;
  line-height:1.2 !important;
  padding:11px 20px !important;
  border-radius:9px !important;
  transition:background .15s ease, transform .05s ease;
}
.mk-mega-submit:hover{ background:var(--mk-brand-d) !important; }
.mk-mega-submit:active{ transform:translateY(1px); }

/* ======================================================================
   Panel
   ====================================================================== */
.mk-mega-panel{
  position:absolute; top:calc(100% + 8px); left:0; right:0;
  z-index:100001 !important;
  background:var(--mk-bg); border:1px solid var(--mk-line); border-radius:16px;
  box-shadow:0 18px 44px -10px rgba(15,23,42,.24), 0 6px 14px -8px rgba(15,23,42,.12);
  overflow:hidden;
  animation:mkmFade .14s ease;
}
.mk-mega-panel::before{ content:""; position:absolute; top:-8px; left:0; right:0; height:8px; }
@keyframes mkmFade{ from{ opacity:0; transform:translateY(-5px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){ .mk-mega-panel{ animation:none; } }

.mk-mega-cols{ display:grid; grid-template-columns:230px 1fr; }
.mk-mega-rail{ border-right:1px solid var(--mk-line); padding:14px; background:#fbfcfd; }
.mk-mega-main{ padding:14px 16px; min-height:230px; }

.mk-mega-label{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mk-muted); margin:0 4px 8px;
}
.mk-mega-label--mt{ margin-top:18px; }

/* ---- Kategoriak ---- */
.mk-mega-cats{ list-style:none; margin:0; padding:0; }
.mk-mega-cat{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:10px; cursor:pointer;
  color:var(--mk-ink) !important; font-size:14px; font-weight:500;
  text-decoration:none; transition:background .12s ease, color .12s ease;
}
.mk-mega-cat:hover,.mk-mega-cat.is-active{ background:var(--mk-soft); color:var(--mk-brand) !important; }
.mk-mega-cat-ico{
  flex:0 0 auto; width:25px; height:25px; border-radius:0;
  background:transparent; border:0;
  display:flex; align-items:center; justify-content:center; color:var(--mk-brand);
}
.mk-mega-cat:hover .mk-mega-cat-ico,.mk-mega-cat.is-active .mk-mega-cat-ico{ border-color:var(--mk-brand); }
.mk-mega-cat-ico img{display:block;width:25px;height:25px;max-width:none;object-fit:contain;margin:0}
.mk-mega-cat-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- Trending chipek ---- */
.mk-mega-trend{ list-style:none; margin:0; padding:0 4px; display:flex; flex-wrap:wrap; gap:6px; }
.mk-mega-chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 10px; border-radius:999px;
  background:#fff !important; border:1px solid var(--mk-line) !important;
  color:var(--mk-ink) !important;
  box-shadow:none !important; text-transform:none !important;
  font-size:12.5px; font-weight:400;
  height:auto !important; line-height:1.3 !important;
  cursor:pointer; transition:all .12s ease;
}
.mk-mega-chip:hover{ border-color:var(--mk-brand) !important; color:var(--mk-brand) !important; }
.mk-mega-chip svg{ color:var(--mk-brand); flex:0 0 auto; }

/* ======================================================================
   Termek grid
   ====================================================================== */
.mk-mega-grid{ display:grid; grid-template-columns:1fr; gap:9px; }
.mk-mega-grid--featured{ grid-template-columns:1fr; }
.mk-mega-grid .mk-mega-card{ width:100%; }
.mk-mega-card{
  display:flex; align-items:center; gap:12px; min-height:78px; padding:9px 11px 9px 9px; border:1px solid var(--mk-line); border-radius:12px;
  cursor:pointer; background:#fff; text-align:left; text-decoration:none;
  color:var(--mk-ink) !important;
  transition:border-color .12s ease, box-shadow .12s ease, transform .05s ease;
  animation:mkmIn .16s ease both;
}
.mk-mega-card:hover{ border-color:var(--mk-search-navy); box-shadow:0 6px 16px -10px rgba(15,23,42,.28); }
.mk-mega-card:active{ transform:translateY(1px); }
.mk-mega-card--bundle{
  border-color:var(--mk-search-line);
  background:linear-gradient(160deg,#fff,#eff6fc);
  box-shadow:inset 3px 0 0 var(--mk-search-steel);
}
.mk-mega-card--bundle:hover,
.mk-mega-card--bundle:focus-visible{ border-color:#6c99be; background:linear-gradient(160deg,#fff,#e5f0f9); box-shadow:inset 3px 0 0 var(--mk-search-steel),0 6px 16px -10px rgba(35,78,118,.28); }
.mk-mega-card--bundle:focus-visible{ outline:2px solid var(--mk-search-navy); outline-offset:2px; }
@keyframes mkmIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .mk-mega-card{ animation:none; } }

.mk-mega-thumb{
  flex:0 0 auto; width:58px; height:58px; border-radius:9px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,#f4f6f9,#e8edf3); color:var(--mk-brand);
}
.mk-mega-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.mk-mega-info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:2px; }
.mk-mega-name{
  font-size:13.5px; font-weight:600; color:var(--mk-ink); line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.mk-mega-tag{ font-size:11px; color:var(--mk-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mk-mega-benefits{ display:flex; flex-wrap:wrap; align-items:center; gap:3px 10px; margin-top:2px; }
.mk-mega-benefit{ display:inline-flex; align-items:center; gap:4px; color:#334155; font-size:10.5px; font-weight:500; line-height:1.25; white-space:nowrap; }
.mk-mega-benefit svg{ flex:0 0 auto; color:var(--mk-green); }
.mk-mega-price{ flex:0 0 auto; min-width:82px; margin-left:auto; color:var(--mk-brand); font-size:15px; font-weight:800; line-height:1.2; text-align:right; white-space:nowrap; }
.mk-mega-saving{
  width:max-content; max-width:100%;
  border-radius:999px; padding:2px 7px;
  background:rgba(0,179,89,.1); color:#08783f;
  font-size:10.5px; font-weight:700; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Live kiemeles */
.mk-mega-name mark,
.mk-mega-pin-name mark{
  background:linear-gradient(180deg, transparent 62%, rgba(11,26,54,.12) 62%);
  color:var(--mk-search-navy);
  font-weight:700;
  border-radius:2px;
  padding:0 1px;
}

/* ======================================================================
   Pinned exact talalat: csak KULSO keret, teljes kitoltes
   ====================================================================== */
.mk-mega-pin{
  display:flex; align-items:center; gap:14px;
  width:100%;
  border:1.5px solid var(--mk-search-navy);
  background:#fff;
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:12px;
  cursor:pointer; text-decoration:none;
  color:var(--mk-ink) !important;
  box-shadow:none;
  transition:border-color .13s ease, background .13s ease;
  animation:mkmIn .16s ease both;
}
.mk-mega-pin:hover{ background:rgba(11,26,54,.035); }
@media (prefers-reduced-motion:reduce){ .mk-mega-pin{ animation:none; } }

.mk-mega-pin-arrow{ flex:0 0 auto; color:var(--mk-search-navy); display:flex; }

/* Nincs belso keret / hatter a thumbon */
.mk-mega-pin .mk-mega-thumb{
  width:46px; height:46px;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.mk-mega-pin-info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.mk-mega-pin-name{ font-size:14.5px; font-weight:700; color:var(--mk-ink); line-height:1.2; }
.mk-mega-pin-sub{ font-size:12px; font-weight:600; color:var(--mk-brand); }

.mk-mega-pin-price{
  flex:0 0 auto;
  font-size:15px; font-weight:800;
  color:var(--mk-green);
  white-space:nowrap;
}

.mk-mega-empty{ padding:34px 12px; text-align:center; color:var(--mk-muted); font-size:14px; }

/* ---- Allapotok ---- */
.mk-mega-state{ padding:40px 12px; text-align:center; color:var(--mk-muted); font-size:13px; }
.mk-mega-spin{
  width:22px; height:22px; margin:0 auto 8px;
  border:2.5px solid var(--mk-line); border-top-color:var(--mk-brand);
  border-radius:50%; animation:mkmSpin .7s linear infinite;
}
@keyframes mkmSpin{ to{ transform:rotate(360deg); } }

/* ======================================================================
   Lablec: AI sav / ajanlo kartya
   ====================================================================== */
.mk-mega-foot{ border-top:1px solid var(--mk-line); }

.mk-mega-results-actions{ display:flex; justify-content:center; padding:4px 0 1px; background:transparent; }
.mk-mega .mk-mega-all-results{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:28px; padding:3px 2px; border:0; border-radius:0;
  background:transparent; color:#2563eb !important; box-shadow:none;
  font-size:13px; font-weight:700; line-height:1.2; text-align:center;
  transition:color .14s ease, transform .05s ease;
}
.mk-mega .mk-mega-all-results:visited{ color:#2563eb !important; }
.mk-mega .mk-mega-all-results:hover{ background:transparent; color:#1d4ed8 !important; text-decoration:underline !important; text-underline-offset:3px; }
.mk-mega .mk-mega-all-results:focus-visible{ outline:2px solid rgba(37,99,235,.35); outline-offset:3px; }
.mk-mega .mk-mega-all-results:active{ transform:translateY(1px); }
.mk-mega .mk-mega-all-results strong{ color:inherit; font-size:12px; font-weight:800; }
.mk-mega .mk-mega-all-results svg{ flex:0 0 auto; }

.mk-mega-ai{
  width:100%; display:flex; align-items:center; gap:10px;
  border:0 !important; box-shadow:none !important;
  background:var(--mk-soft) !important; color:var(--mk-ink) !important;
  padding:13px 16px !important; border-radius:0 !important;
  cursor:pointer; text-align:left;
  font-size:13px; font-weight:400;
  text-transform:none !important; letter-spacing:normal !important;
  height:auto !important; line-height:1.4 !important;
  transition:background .12s ease;
}
.mk-mega-ai:hover{ background:rgba(255,17,0,.14) !important; }
.mk-mega-ai-ico,.mk-mega-ai-arrow{ flex:0 0 auto; color:var(--mk-brand); display:flex; }
.mk-mega-ai-txt{ flex:1 1 auto; min-width:0; }

.mk-mega-offer{ padding:14px 16px; background:linear-gradient(180deg,#fff,var(--mk-soft)); }
.mk-mega-offer-top{ display:flex; align-items:flex-start; gap:10px; }
.mk-mega-offer-spark{ flex:0 0 auto; color:var(--mk-brand); display:flex; }
.mk-mega-offer-title{ font-size:13.5px; font-weight:700; color:var(--mk-ink); line-height:1.3; }
.mk-mega-offer-desc{ font-size:12px; color:var(--mk-muted); margin-top:3px; line-height:1.4; }
.mk-mega-offer-btns{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }

.mk-mega-btn{
  flex:1 1 auto; border:0 !important; box-shadow:none !important;
  border-radius:9px !important; padding:11px 14px !important;
  font-size:13.5px; font-weight:600;
  text-transform:none !important; letter-spacing:normal !important;
  height:auto !important; line-height:1.2 !important;
  cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:all .13s ease;
}
.mk-mega-btn svg{ flex:0 0 auto; }
.mk-mega-btn-ai,
.mk-mega-btn-ai:visited{ background:var(--mk-brand) !important; color:#fff !important; }
.mk-mega-btn-ai:hover{ background:var(--mk-brand-d) !important; }
.mk-mega-btn-self,
.mk-mega-btn-self:visited{ background:#fff !important; color:var(--mk-ink) !important; border:1px solid var(--mk-line) !important; }
.mk-mega-btn-self:hover{ border-color:var(--mk-brand) !important; color:var(--mk-brand) !important; }

/* ======================================================================
   BeTheme wrapper fixek (ha a kereso nem a sajat headerben van)
   ====================================================================== */
.mcb-wrap-inner,
.mfn-module-wrapper,
.mfn-wrapper-for-wraps,
.mk-hdr-card,
.mk-hdr-cardwrap,
.mk-hdr-main-row,
.mk-hdr-search-box,
.mk-header-molin-search{
  overflow:visible !important;
}
.mcb-wrap-inner-d72790235{
  overflow:visible !important;
  position:relative;
  z-index:100000;
}
.mcb-wrap-inner-2a138e3cb{
  position:relative !important;
  z-index:10 !important;
}

/* ======================================================================
   Mobil
   ====================================================================== */
@media (max-width:640px){
  .mk-mega-cols{ grid-template-columns:1fr; }
  .mk-mega-rail{ border-right:0; border-bottom:1px solid var(--mk-line); }
  .mk-mega-grid{ grid-template-columns:1fr; }
  .mk-mega-main{ min-height:0; }
  .mk-mega-panel{ max-height:80vh; overflow-y:auto; }
  .mk-mega-submit{ padding:11px 14px !important; }
  .mk-mega-card{ gap:9px; min-height:74px; padding-right:9px; }
  .mk-mega-thumb{ width:54px; height:54px; }
  .mk-mega-price{ min-width:72px; font-size:13.5px; }
  .mk-mega-benefits{ gap:2px 8px; }
  .mk-mega-benefit{ font-size:10px; }
  .mk-mega-pin{ gap:9px; padding:10px; }
  .mk-mega-pin-arrow{ display:none; }
  .mk-mega-pin-price{ font-size:13.5px; }
  .mk-mega-results-actions{ padding-top:3px; }
}

/* A pin konteneren ne legyen keret/hatter, csak a benne levo linken */
#mkmPin{
  display:block !important;
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 0 12px !important;
  box-shadow:none !important;
  border-radius:0 !important;
  animation:none !important;
}
#mkmPin > .mk-mega-pin{ margin-bottom:0; }