/* Bottom tab bar — mobile-only "app-like" nav, site-wide.
   Supersedes the floating call button (#float-cta) and back-to-top (#btt)
   on mobile widths, so there's one consistent bottom zone instead of two. */
.mobile-tabbar{display:none}

/* Default-hidden so desktop never shows sheet-only chrome. Must come BEFORE
   the media query below — same specificity, so source order decides, and
   these need to lose once the media query's own display rules kick in. */
.hdr-nav-mhead{display:none}
.hdr-nav-grid,.hdr-nav-call{display:none}
.hdr-nav-backdrop{display:none}

@media(max-width:768px){
  .mobile-tabbar{
    display:flex;
    position:fixed;left:0;right:0;bottom:0;z-index:1000;
    background:#fff;
    border-top:1px solid var(--brd,#e2e8f0);
    box-shadow:0 -4px 20px rgba(0,0,0,.08);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .mtb-item{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    text-decoration:none;color:var(--gray,#64748b);background:none;border:none;
    font-family:inherit;cursor:pointer;padding:4px 2px;min-height:48px;
  }
  .mtb-icon{font-size:20px;line-height:1}
  .mtb-label{font-size:10px;font-weight:600;white-space:nowrap}

  .mtb-cta{position:relative;color:var(--blue2,#2563eb)}
  .mtb-cta .mtb-cta-icon{
    width:46px;height:46px;border-radius:50%;
    background:#fff;
    color:#fff;font-size:20px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 14px rgba(37,99,235,.35),0 0 0 2px var(--blue2,#2563eb);
    margin-top:-22px;
    overflow:hidden;
  }
  .mtb-cta .mtb-cta-icon img{width:66%;height:66%;object-fit:contain}

  body.has-mobile-tabbar{padding-bottom:64px}
  /* #btt (back-to-top) stays hidden — no separate control needed on mobile.
     #float-cta (persistent green call button) stays visible everywhere,
     repositioned to sit just above the tab bar instead of its
     desktop scroll-triggered bottom-right spot. */
  #btt{display:none!important}
  #float-cta{
    display:flex!important;
    width:56px;height:56px;border-radius:50%;
    padding:0;justify-content:center;align-items:center;
    right:16px;bottom:78px;
    box-shadow:0 6px 18px rgba(34,197,94,.45);
  }
  #float-cta .cta-icon{font-size:24px}
  #float-cta #cta-txt{display:none}
  #float-cta.hidden{opacity:1!important;pointer-events:auto!important;transform:none!important}
  /* When a page's own sticky price bar is showing (body.has-order, set by
     each service page's order-total JS), it docks to the same bottom edge
     as this button. Lift the button above the price bar so it stays
     visible on top of it instead of being covered by it. */
  body.has-order #float-cta{bottom:150px}

  /* "Konto" popup (client/partner cabinet links), anchored above the tab bar. */
  .mtb-account-menu{
    display:none;position:fixed;right:12px;bottom:80px;z-index:900;
    background:#fff;border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.25);
    padding:8px;min-width:200px;
  }
  .mtb-account-menu.show{display:block}
  .mtb-account-menu a{
    display:block;padding:11px 12px;border-radius:10px;text-decoration:none;
    color:var(--text,#0f172a);font-size:13.5px;font-weight:600;font-family:'Inter',sans-serif;
  }
  .mtb-account-menu a:hover{background:var(--blue-pale,#eff6ff)}

  /* Header burger removed on every page — "Więcej" in the bottom bar opens the same menu now. */
  .burger{display:none!important}

  /* Login/register moved out of the cramped topbar into the bottom tab bar's
     "Konto" item — showing both would be redundant. */
  .topbar-login{display:none}

  /* Language switcher: show only the active language; tap it to reveal the rest. */
  .topbar-langs:not(.expanded) .lb:not(.on){display:none}

  /* "Więcej" menu — a real bottom sheet: dark backdrop, slides up from the
     bottom edge with rounded top corners, instead of dropping down from the
     header. Shared by every page's #hn nav. */
  .hdr-nav-backdrop{display:none}
  body.nav-sheet-open .hdr-nav-backdrop{
    display:block;position:fixed;inset:0;background:rgba(15,23,42,.55);
    z-index:997;animation:hdrBackdropIn .25s ease-out;
  }
  @keyframes hdrBackdropIn{from{opacity:0}to{opacity:1}}

  #hn.hdr-nav{
    display:flex!important;position:fixed!important;top:auto!important;left:0;right:0;bottom:0;
    flex-direction:column;
    max-height:82vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:#fff;border-radius:20px 20px 0 0;
    box-shadow:0 -12px 40px rgba(15,23,42,.25);
    padding:0 0 calc(84px + env(safe-area-inset-bottom));
    z-index:999;
    transform:translateY(105%);
    transition:transform .32s cubic-bezier(.32,.72,0,1);
  }
  #hn.hdr-nav.open{transform:translateY(0)}
  .hdr-nav-handle{
    width:36px;height:4px;border-radius:2px;background:var(--brd,#e2e8f0);
    margin:10px auto 2px;flex-shrink:0;
  }
  .hdr-nav-mhead{
    display:flex!important;align-items:center;justify-content:space-between;
    padding:14px 20px 16px;margin-bottom:6px;border-bottom:1px solid var(--brd);
    font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;color:var(--text);
    flex-shrink:0;
  }
  .hdr-nav-mhead button{
    background:var(--off);border:none;border-radius:50%;width:32px;height:32px;
    font-size:15px;color:var(--gray);cursor:pointer;
  }
  body.nav-sheet-open #float-cta{display:none!important}
  /* Old horizontal-nav links stay for desktop only; mobile gets one unified grid below. */
  #hn > a:not(.hdr-nav-call){display:none}
  .hdr-cta{display:none}

  /* One consistent grid for everything — info pages and services alike, same
     card style throughout, so the panel doesn't read as two different UIs. */
  .hdr-nav-grid{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:4px 16px 18px;
  }
  .hdr-nav-grid a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    background:#fff;border:1px solid var(--brd);border-radius:14px;
    padding:10px 4px;box-shadow:0 2px 8px rgba(15,23,42,.05);
    text-decoration:none;text-align:center;
    min-height:88px;min-width:0;overflow:hidden;
  }
  .hng-icon{
    width:36px;height:36px;border-radius:50%;flex-shrink:0;
    background:var(--green-pale,#f0fdf4);border:1px solid var(--green-light,#dcfce7);
    display:flex;align-items:center;justify-content:center;font-size:17px;
  }
  .hng-label{
    font-size:10.5px;line-height:1.25;font-weight:700;color:var(--text3);
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
    width:100%;overflow-wrap:break-word;word-break:break-word;
    white-space:normal!important;
  }

  .hdr-nav.open .hdr-nav-call{
    display:block;margin:4px 20px 20px;padding:16px;text-align:center;
    background:linear-gradient(135deg,var(--green2),var(--green))!important;color:#fff!important;
    border:none!important;border-radius:14px;font-size:15px;font-weight:800;font-family:'Montserrat',sans-serif;
    box-shadow:0 6px 18px rgba(34,197,94,.35);text-decoration:none;
  }
}