/* =====================================================================
   Pinceklub – MOBIL nézet (csak telefonon aktív: max-width 767px)
   Cél: egyszerűsített, nagy gombos, egy-kezes kezelés.
   Desktopon egyetlen szabály sem érvényesül.
   ===================================================================== */
@media (max-width: 767px) {

  html { -webkit-text-size-adjust: 100%; }

  body {
    /* alsó menü + iPhone safe-area */
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* --- Fejléc kompaktabb --- */
  header { padding: .5rem .75rem !important; }
  header img { height: 2.5rem !important; width: 2.5rem !important; }
  header h1 { font-size: 1rem !important; letter-spacing: .12em !important; }

  /* --- Fő tartalom --- */
  main { padding: .75rem !important; }

  /* Kártyák/rácsok egy hasábba, nagy célfelülettel */
  .m-stack, .grid.grid-cols-2, .grid.grid-cols-3, .grid.grid-cols-4 { }
  .m-tap, button, .btn-gold, .btn-outline, a.btn-gold, a.btn-outline {
    min-height: 48px;
  }
  button, .btn-gold, .btn-outline { font-size: 1rem !important; }

  /* Űrlapelemek: 16px, hogy iOS ne zoomoljon */
  input, select, textarea { font-size: 16px !important; padding: .7rem !important; }

  /* Táblázatok vízszintesen csúsztathatók, ne törjék szét a nézetet */
  main table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; }
  main table th, main table td { padding: .4rem .5rem !important; font-size: .8rem; }

  /* Kevésbé fontos elemek elrejtése mobilon */
  .m-hide { display: none !important; }

  /* Nyugta / blokk előnézet mobilon is olvasható */
  .receipt-preview { transform: none !important; width: 100% !important; }
}

/* --- Alsó mobil menü --- */
#mobileNav { display: none; }
@media (max-width: 767px) {
  #mobileNav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #000; border-top: 1px solid #78350f;
    padding: .25rem .25rem calc(.25rem + env(safe-area-inset-bottom, 0px));
  }
  #mobileNav a, #mobileNav button {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: .45rem .1rem;
    font-size: .62rem; text-transform: uppercase; letter-spacing: .04em;
    color: #b8860b; background: none; border: none; font-weight: 700;
  }
  #mobileNav .ic { font-size: 1.25rem; line-height: 1; }
  #mobileNav .active { color: #d4af37; }
  #mobileNav span.lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

}
/* A "Több" fiók alapból MINDEN nézetben rejtett (asztali gépen sosem látszik) */
#mobileSheet { display: none; }
#mobileSheet {
  position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.75);
}
@media (max-width: 767px) {
  #mobileSheet.open { display: block; }
}
#mobileSheet .sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #141414; border-top: 1px solid #b8860b;
  border-radius: 1rem 1rem 0 0; padding: 1rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
}
#mobileSheet .sheet a, #mobileSheet .sheet button {
  display: block; width: 100%; text-align: left;
  padding: .85rem 1rem; margin-bottom: .5rem;
  border: 1px solid #b8860b; border-radius: .5rem;
  color: #d4af37; font-weight: 700; background: none;
}

/* --- Mobil kosár (staff nézet): alsó sáv + felcsúszó panel --- */
#mCartBar { display: none; }
@media (max-width: 767px) {
  #mCartBar {
    display: flex; align-items: center; gap: .75rem;
    position: fixed; left: 0; right: 0; z-index: 55;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    background: #141414; border-top: 1px solid #b8860b;
    padding: .6rem .9rem;
  }
  #mCartBar .lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: #9ca3af; }
  #mCartBar .tot { flex: 1; text-align: right; font-weight: 900; color: #fff; font-size: 1.15rem; }
  #mCartBar button {
    background: #b8860b; color: #000; font-weight: 800; text-transform: uppercase;
    font-size: .72rem; letter-spacing: .06em; padding: .55rem .9rem; border-radius: .5rem; border: none;
  }

  /* Kosárpanel mobilon alapból elrejtve, megnyitva felcsúszó lapként */
  .m-cart-panel {
    position: fixed !important; left: 0; right: 0; bottom: 0; top: auto !important;
    z-index: 65; border-radius: 1rem 1rem 0 0;
    max-height: 85vh; overflow-y: auto;
    padding: 1.25rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateY(105%); transition: transform .25s ease;
  }
  body.m-cart-open .m-cart-panel { transform: translateY(0); }
  body.m-cart-open { overflow: hidden; }
}

/* ==========================================================
   Mobil: virtuális billentyűzet nyitva – több hely a listának
   ========================================================== */
@media (max-width: 767px) {
  /* Amikor a keresőmező aktív, a fejléc, az asztalválasztó és a
     kosár-sáv összecsukódik, hogy a terméklista maradjon a képernyőn. */
  body.kbd-open header,
  body.kbd-open #table-picker,
  body.kbd-open #order-success,
  body.kbd-open #mCartBar,
  body.kbd-open nav.m-bottom-nav { display: none !important; }

  body.kbd-open #browser-toolbar {
    position: sticky; top: 0; z-index: 40;
    background: #0b0b0b; padding-bottom: .5rem;
  }
  /* A lista magasságát a valóban látható területhez kötjük */
  body.kbd-open #browser-area {
    max-height: calc(var(--kbd-vh, 100vh) - 7.5rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #kbd-done { display: none; }
  body.kbd-open #kbd-done {
    display: block; position: fixed; right: .75rem; z-index: 60;
    top: calc(var(--kbd-vh, 100vh) - 3.25rem);
  }
}
