.main-panel > .content{
  margin-top:0px;
}

button:focus{
  outline:none;
}

/* =========================
   KAFELKI / NAV (INDEX) — POPRAWIONE
   - mobile: grid 2 kolumny, kafel 70px, centrowanie, brak nachodzenia
   - desktop: zostaje flex jak było
   ========================= */

/* box-sizing tylko dla tej sekcji, żeby padding nie rozpychał szerokości */
.nav.nav-pills.nav-pills-primary.nav-pills-icons.bbx-nav,
.nav.nav-pills.nav-pills-primary.nav-pills-icons.bbx-nav *{
  box-sizing:border-box;
}

/* wspólne reset-y dla UL (bootstrap często daje padding-left) */
.nav.nav-pills.nav-pills-primary.nav-pills-icons.bbx-nav{
  list-style:none;
  margin:0;
  padding-left:0; /* kluczowe: kasuje przesunięcie w prawo */
}

/* wygląd wspólny kafelka (kolory, układ ikona + tekst) */
.nav.nav-pills.nav-pills-primary.nav-pills-icons.bbx-nav .nav-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  border-radius:10px;
  background-color: #ffffffcc;
  color:#333;
  text-decoration:none;
  transition:all .3s ease;

  min-height:110px;
  cursor:pointer;
}

.nav.nav-pills.nav-pills-primary.nav-pills-icons.bbx-nav .nav-link i{
  font-size:24px;
  line-height: 26px;
}

/* ===== MOBILE (<= 767.98px) ===== */
@media (max-width:767.98px){

  .nav.nav-pills.nav-pills-primary.nav-pills-icons.bbx-nav{
    display:grid;
    grid-template-columns:repeat(2, 120px); /* 2 kolumny po 70px */
    gap:12px;

    /* centrowanie całego bloku */
    width:100%;
    justify-content:center;

    /* odsunięcie od krawędzi */
    padding:28px 0;
    margin:0 auto;
  }

  .nav.nav-pills.nav-pills-primary.nav-pills-icons.bbx-nav .nav-item{
    text-align:center;
    min-width:0;          /* ważne: kasuje 145px */
    width:70px;
    margin:0;
  }

  .nav.nav-pills.nav-pills-primary.nav-pills-icons.bbx-nav .nav-link{
    /* twarda szerokość kafelka, żeby nie rozpychało kolumn */
    width:120px;
min-width:120px;
max-width:120px;
flex:0 0 120px;

    /* wysokość zostaje OK, tylko poziomy padding musi być mały */
    padding:21px 6px;

    /* zabezpieczenie na tekst */
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

/* ===== DESKTOP (>= 768px) — jak było ===== */
@media (min-width:768px){

  .nav.nav-pills.nav-pills-primary.nav-pills-icons.bbx-nav{
    display:flex;
    flex-wrap:nowrap;
    gap:10px;
    padding:20px;
  }

  .nav.nav-pills.nav-pills-primary.nav-pills-icons.bbx-nav .nav-item{
    text-align:center;
    min-width:145px;
  }

  .nav.nav-pills.nav-pills-primary.nav-pills-icons.bbx-nav .nav-link{
    padding:21px 25px;
    min-width:100%;
  }
}

/* Active state (Twoje, bez zmian) */
.nav-pills.nav-pills-primary .nav-item .nav-link.active,
.nav-pills.nav-pills-primary .nav-item .nav-link.active:focus,
.nav-pills.nav-pills-primary .nav-item .nav-link.active:hover{
  background-color:#f96332;
  color:#fff;
}
/* kontener navbara */
.bbx-navbar-flex{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}

/* prawa strona – całość dociśnięta do prawej */
.bbx-user-header{
  display:flex;
  align-items:center;
  gap:10px;

  margin-left:auto;   /* KLUCZ: wypycha do prawej krawędzi */
}

/* tekst PO LEWEJ stronie avatara */
.bbx-user-text{
  order:1;
  text-align:right;
}

.bbx-user-avatar{
  order:2;
}

/* lekki margines od krawędzi ekranu */
.bbx-user-header{
  padding-right:12px;
}


/* żeby collapse nie rozpychał layoutu */
.navbar-collapse{
  flex-grow:0;
}

/* =========================
   KARTY / OGÓLNE
   ========================= */
.card-subcategories .card-body{ padding-bottom:0; }
.card .card-body{ padding:0; }
.card{ margin-bottom:0; }
.panel-header{ height:110px; padding-top:3px; }

.bbx-nfc-icon{
  display:inline-flex;
  width:35px;
  height:61px;
  margin-right:6px;
  vertical-align:middle;
}
.bbx-nfc-icon svg{
  width:100%;
  height:100%;
  fill:currentColor;
}

  .area-title h1{
    font-size:32px;
    letter-spacing:3.1px;
    line-height:32px;
    text-transform:uppercase;
    margin:14px 0 24px;
    color:#fff;
    background:#000;
    padding:10px;
  }


/* =========================
   DRAWER (MOBILE) — CENTROWANY
   ========================= */
.bbx-hidden-content{ display:none; }

@media (max-width:991.98px){
  .bbx-desktop-tabs{ display:none !important; }
  .bbx-hidden-content{ display:none; }
}
@media (min-width:992px){
  .bbx-drawer,
  .bbx-drawer-overlay{ display:none !important; }
  .panel-header {height: 63px !important}
  .panel-header-img {
      display: none;
    }
}

.bbx-drawer-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0);
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease, visibility .22s ease;
  z-index:1040;
}
.bbx-drawer-overlay.bbx-open{
  opacity:1;
  visibility:visible;
}

/* Drawer – zawsze na środku, ale:
 - startuje poza ekranem po LEWEJ
 - zamyka siÄ™ w PRAWO (po przeciwnej stronie) */
 .bbx-drawer{
   position:fixed;
   top: 46px;
   left: 50%;
   height: 93%;
   width: 97vw;
   max-width:720px;
   background: #ffffff;
   box-shadow: inset 0px 1px 7px 0px rgb(0 0 0 / 56%);
  /* START: poza ekranem po LEWEJ */
   transform:translateX(-50%) translateX(-140%);
   transition:transform .28s ease;
   z-index:1050;
   display:flex;
   flex-direction:column;
   border-radius: 10px;
}
/* wariant rozmiaru tylko dla panelu mapy */
.bbx-drawer.bbx-drawer--map{
  top: 40px;
  height: 92vh;
  width: 98vw;
  max-width: 1200px;
}

@media (max-width: 768px){
  .bbx-drawer.bbx-drawer--map{
    top: 50px;
    height: 100vh;
    width: 99vw;
    max-width: none;
    border-radius: 10px;
  }
}

.bbx-drawer-img {
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);

    width: 100%;
    max-width: 600px;     /* dostosuj pod design */
    z-index: 1;
    pointer-events: none;
}
.panel-header-img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    width: 100%;         /* albo konkretna szerokość */
    max-width: 600px;   /* opcjonalnie */
    pointer-events: none; /* żeby nie łapał klików */
}

/* OTWARTY: na środku */
.bbx-drawer.bbx-open{
  transform:translateX(-50%) translateX(0);
}

/* ZAMYKANIE: wylot w PRAWO */
.bbx-drawer.bbx-exit-right{
  transform:translateX(-50%) translateX(140%);
}

.bbx-drawer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.bbx-drawer-title{
  font-weight:600;
  font-size:15px;
  line-height:1.2;
}
.bbx-drawer-close{
  border:0;
  background:transparent;
  font-size:26px;
  line-height:1;
  padding:0 6px;
  cursor:pointer;
}
.bbx-drawer-body{
  padding: 50px 10px;
  overflow:auto;
}
@media (max-width:480px){
  .bbx-drawer{ max-width:none; }
}

/* =========================
   SLIDER: LISTA <-> SZCZEGÓŁY
   ========================= */
.bbx-pane-nav{
  position:relative;
  overflow:hidden;
  width:100%;
  min-height:100vh;
}

/* oba panele jako warstwy 1:1 */
.bbx-pane{
  position:absolute;
  top:5px;
  left:0;
  width:100%;
  transition:transform .32s ease;
  will-change:transform;
}

/* START: lista na środku, szczegóły po lewej */
.bbx-pane--list{ transform:translateX(0%); z-index:2; }
.bbx-pane--details{ transform:translateX(-100%); z-index:1; }


.bbx-peak-details h4{
  margin:0 0 10px;
  font-weight:600;
}
.bbx-peak-meta{
  opacity:.75;
  margin-bottom:14px;
}
.bbx-peak-desc{ line-height:1.45; }

/* Style dla panelu konta */
.account-panel{
  padding:20px;
}
.account-header{
  display:flex;
  align-items:center;
  margin-bottom:20px;
  padding-bottom:15px;
  border-bottom:1px solid #eee;
}
.account-avatar{
  width:60px;
  height:60px;
  border-radius:50%;
  background:#f96332;
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-size:24px;
  margin-right:15px;
}
.account-info h4{
  margin:0 0 5px 0;
}
.account-info p{
  margin:0;
  color:#666;
}
.account-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.btn-account{
  align-items: center;
  padding:12px 15px;
  background:#f96332;
  border:1px solid #ddd;
  border-radius:8px;
  color:#ffffff;
  text-decoration:none;
  transition:all 0.2s;
  text-align: center;
  justify-content: center;
  align-content: flex-end;
  flex-direction: row;
  flex-wrap: nowrap;
}
.btn-account:hover{
  background:#e9ecef;
  border-color:#ccc;
}
.btn-account i{
  margin-right:10px;
  font-size:18px;
}
.btn-logout{
  background:#fef2f2;
  color:#dc2626;
  border-color:#fecaca;
}
.btn-logout:hover{
  background:#fee2e2;
  border-color:#fca5a5;
}

/* ===== BBX MODAL (email recovery) ===== */
.bbx-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000;
  padding:16px;
}
.bbx-modal-overlay.bbx-open{ display:flex; }

.bbx-modal{
  width:100%;
  max-width:520px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.35);
  overflow:hidden;
}
.bbx-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.bbx-modal-title{
  font-weight:700;
  font-size:15px;
  margin:0;
}
.bbx-modal-close{
  border:0;
  background:transparent;
  font-size:26px;
  line-height:1;
  padding:0 6px;
  cursor:pointer;
}
.bbx-modal-body{ padding:16px; }
.bbx-modal-body p{
  margin:0 0 12px;
  color:#555;
  line-height:1.4;
}

.bbx-field{
  width:100%;
  padding:12px 12px;
  border:1px solid #ddd;
  border-radius:10px;
  outline:none;
}
.bbx-field:focus{ border-color:#f96332; }

.bbx-modal-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
}
.bbx-btn{
  border:0;
  border-radius:10px;
  padding:12px 14px;
  cursor:pointer;
  width:100%;
}
.bbx-btn-primary{
  background:#f96332;
  color:#fff;
}
.bbx-btn-secondary{
  background:#f1f5f9;
  color:#111;
}
.bbx-help{
  font-size:13px;
  margin-top:10px;
  color:#666;
}
.bbx-error{
  font-size:13px;
  margin-top:10px;
  color:#dc2626;
  display:none;
}
.bbx-error.bbx-show{ display:block; }
.bbx-loading{
  opacity:.65;
  pointer-events:none;
}

/* ===== EMAIL STATUS UI ===== */
.bbx-email--unverified{ color:#dc2626 !important; font-weight:600; }
.bbx-email--verified{ color:#16a34a !important; font-weight:600; }



/* info o wysłaniu linku */
.bbx-email-sent{
  margin-top:10px;
  font-size:13px;
  line-height:1.35;
  color:#0f172a;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  padding:10px 12px;
  border-radius:10px;
  display:none;
}
.bbx-email-sent.bbx-show{ display:block; }
.bbx-email-error{
  margin-top:10px;
  font-size:13px;
  line-height:1.35;
  color:#dc2626;
  background:#fff1f2;
  border:1px solid #fecdd3;
  padding:10px 12px;
  border-radius:10px;
  display:none;
}
.bbx-email-error.bbx-show{ display:block; }
.bbx-resend-link{
  display:none;
  margin-top:10px;
  font-size:13px;
  line-height:1.35;
  color:#0f172a;
  text-decoration:underline;
  cursor:pointer;
}
.bbx-resend-link.bbx-show{ display:inline-block; }

/* ===== USERNAME CHANGE UI ===== */
.bbx-username-actions{
  margin-top:10px;
}
.bbx-username-link{
  display:none;
  font-size:13px;
  line-height:1.35;
  color:#0f172a;
  text-decoration:underline;
  cursor:pointer;
}
.bbx-username-link.bbx-show{ display:inline-block; }

.bbx-username-sent{
  margin-top:10px;
  font-size:13px;
  line-height:1.35;
  color:#0f172a;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  padding:10px 12px;
  border-radius:10px;
  display:none;
}
.bbx-username-sent.bbx-show{ display:block; }

.bbx-username-error{
  margin-top:10px;
  font-size:13px;
  line-height:1.35;
  color:#dc2626;
  background:#fff1f2;
  border:1px solid #fecdd3;
  padding:10px 12px;
  border-radius:10px;
  display:none;
}
.bbx-username-error.bbx-show{ display:block; }
.nav.nav-pills.nav-pills-primary.nav-pills-icons.bbx-nav
.nav-item .nav-link.active,
.nav.nav-pills.nav-pills-primary.nav-pills-icons.bbx-nav
.nav-item .nav-link.active:hover,
.nav.nav-pills.nav-pills-primary.nav-pills-icons.bbx-nav
.nav-item .nav-link.active:focus{
background-color:#f96332 !important;
color:#fff !important;
}
.bbx-drawer-close--floating{
  position:absolute;
  top:10px;
  right:12px;
  z-index:20;
  border:0;
  background: rgb(255 255 255);
  border:1px solid #00000045;
  width:38px;
  height:38px;
  border-radius:50%;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.bbx-drawer-close--floating:hover{
  background:rgba(0,0,0,.12);
}

@media (max-width:480px){
  .bbx-drawer-close--floating{
    top:27px;
    right:17px;
  }
}
#bbxDrawerTitle {
  display:none;
}


.bbx-user-avatar{
  width: 40px;
  height: 40px;
  border-radius:50%;
  object-fit:cover;
  background:#e5e7eb;
}

.bbx-user-text{
  display:inline-block;
  flex-direction:column;
  line-height:1.1;
}

.bbx-user-hello{
  font-size:12px;
  opacity:.7;
  margin-top: 10px;
}

.bbx-user-name{
  font-size:12px;
  font-weight:600;
  padding:0;
}
.navbar .navbar-brand {
    padding-top: 0px !important;
    margin-right: 0px !important;

}
.navbar.navbar-absolute {
    padding-top: 20px;
}
/* kontener przewijania w pionie */
/* =========================
   PEAKS: LISTA (zamiast tabeli / trail-map)
   ========================= */

.bbx-peaks-list-wrap{
  max-height: 71vh;                 /* scroll tylko listy */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 8px 0 0;
}

.bbx-peaks-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* pojedynczy element listy */
.bbx-peak-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding: 12px 12px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: #fff;

  text-decoration:none;
  color: inherit;

  /* żeby nie "wyjeżdżało" w drawerze */
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

.bbx-peak-item:active{
  transform: scale(0.99);
}

/* lewa kolumna: nazwa + wysokość */
.bbx-peak-left{
  min-width:0;                      /* klucz dla ellipsis */
  flex: 1 1 auto;
}

.bbx-peak-name{
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 2px;
  font-size: 14px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bbx-peak-sub{
  font-size: 13px;
  color: #777;
  line-height: 1.2;
  margin:0;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* prawa kolumna: ikonka statusu */
.bbx-peak-status{
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}

.bbx-peak-status i{
  font-size: 18px;
}

/* status: tło + kolor ikony */
.bbx-status--done{ background: rgba(24, 206, 15, 0.12); }
.bbx-status--done i{ color: #18ce0f; }

.bbx-status--pending{ background: rgba(255, 178, 43, 0.16); }
.bbx-status--pending i{ color: #ffb236; }

.bbx-status--todo{ background: rgba(255, 54, 54, 0.10); }
.bbx-status--todo i{ color: #ff3636; }

/* progres na dole */
#bbxPeaksProgressLink{
  text-decoration: none;
}
@media (max-width: 991.98px) {
    .navbar-expand-lg>.container, .navbar-expand-lg>.container-fluid {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}
#navAccountAvatar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
  padding-right:12px;

  text-decoration:none;
  color:inherit;
  cursor:pointer;
}

#navAccountAvatar:hover{
  opacity:.85;
}
.bg-white {
  background-color: #ffffff00 !important;
    color: white;
}
:root{
  --screen-bg-a: url("/assets/img/home-bg-kopia.jpg");
  --screen-bg-b: url("/assets/img/home-bg-kopia.jpg");
}

.screen-bg{
  position: fixed;
  inset: 0;
  height: 100dvh;
  width: 100vw;
  pointer-events: none;
  transform: translateZ(0);
  will-change: opacity, transform;
  z-index: 0;
}

.screen-bg::before,
.screen-bg::after{
  content: "";
  position: absolute;
  inset: 0;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  filter: saturate(1.05) contrast(1.05);
  transition: opacity 0.35s ease;
}

.screen-bg::before{
  background-image: var(--screen-bg-a);
  opacity: 1;
}

.screen-bg::after{
  background-image: var(--screen-bg-b);
  opacity: 0;
}

body.bbx-bg-swap .screen-bg::before{
  opacity: 0;
}

body.bbx-bg-swap .screen-bg::after{
  opacity: 1;
}

/* overlay przyciemniający ponad obiema warstwami tła */
.screen-bg > .screen-bg-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.20),
    rgba(0,0,0,0.35) 50%,
    rgba(0,0,0,0.55)
  );
  z-index: 9;
}


.footer {
    padding: 6px 0;
    position: relative;
    background-color: #ffffff;
}