:root{
  --maincolor: #0d525b;     /* kolor headera */
  --maincolor-fade: #2a676f;     /* kolor headera */
  --bg:  #2a2a2a;
  --bg-light: #e5e7eb;
    --bg-light2: #f0f2f4;
  --text:#111;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.10);
  --ok: #10b981;            /* zielony */
  --warn: #f59e0b;          /* bursztyn */
  --danger: #ef4444;        /* czerwony */
}

:root {
    --unit-100vh: 100vh;
}
@supports (height: 100dvh) {
    :root {
        --unit-100vh: 100dvh;
    }
}

html, body { 
  height: 100%; 
  padding-top: env(safe-area-inset-top);
}

html, body, #page-full { overscroll-behavior-y: contain; }

body { background-color: var(--maincolor) !important; }


@media (max-width: 576px) {
  .icon { flex: 0 0 30%; } /* 3 w rzędzie przy wąskim ekranie */
}

.bg-monkrynosek-gray-dark {
  background-color: var(--bg) !important;
}

.bg-monkrynosek-gray-light {
  background-color: var(--bg-light) !important;
}

.bg-monkrynosek-gray-light2 {
  background-color: var(--bg-light2) !important;
}

.bg-monkrynosek-dark {
  background-color: var(--maincolor) !important;
}

.bg-monkrynosek-fade {
  background-color: #156771 !important;
  color: #FFF !important;
}

.rounded-top-l-m {
  border-top-left-radius: 20px !important;
}

.rounded-top-r-m {
  border-top-right-radius: 20px !important;
}

.rounded-bottom-l-m {
  border-bottom-left-radius: 20px !important;
}
.rounded-bottom-r-m {
  border-bottom-right-radius: 20px !important;
}

.rounded-bottom-m {
  border-bottom-right-radius: 20px !important;
  border-bottom-left-radius: 20px !important;
}

.card-handle {
    width: 60px;
    height: 4px;
    background: #ccc;
    border-radius: 2px;
    margin: 8px auto;
}

ul.timeline {
  list-style-type: none;
  position: relative;
  padding-left: 0;
  margin-left: 15px; /* odsunięcie od lewej */
}

/* główna pionowa linia */
ul.timeline:before {
  content: '';
  position: absolute;
  top: 25px;        /* zaczyna się od środka pierwszej ikonki */
  bottom: 10px;        /* kończy się na dole listy */
  left: 19px;       /* dopasuj do środka ikon */
  width: 2px;
  background: #ccc; /* szara linia */
  z-index: 1;
}

ul.timeline > li {
  margin: 20px 0;
  position: relative;
  z-index: 2; /* żeby ikonki były nad linią */
}

.mx-0-5 {
  margin-right: 0.15rem !important;
  margin-left: 0.15rem !important;
}

.m-card {
  margin-right: 15px !important;
  margin-left: 15px !important;
}

#footer-bar-rounded {
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 98;
  box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.2);
  min-height: 60px;
  display: flex;
  text-align: center;
  transition: all 300ms ease;

}

.dropdown-item i {
  min-width: 1.5rem;
  text-align: center;
}

/* fallback → dvh gdy dostępne */
.min-vh-100-dvh { min-height: 100vh; }
@supports (min-height: 100dvh) {
  .min-vh-100-dvh { min-height: 100dvh; }
}

/* bezpieczne marginesy dla notcha / gest bar */
.pb-safe  { padding-bottom: env(safe-area-inset-bottom, 0); }
.pt-safe  { padding-top:    env(safe-area-inset-top, 0); }

.coupon .kanan {
    border-left: 2px dotted #ddd;
    width: 60px !important;
    position:relative;
    margin-right: 33px;
}

.coupon .kanan .info::after, .coupon .kanan .info::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--bg-light2);
    border-radius: 100%;
}
.coupon .kanan .info::before {
    top: -10px;
    left: -10px;
}

.coupon .kanan .info::after {
    bottom: -10px;
    left: -10px;
}
.coupon .time {
    font-size: 1.6rem;
}

.info {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
}

.page-container {

}

#page-full {
  display:flex;
  flex-direction:column;
  flex: 1 1 auto;
  min-height: 100%;
  min-width: 0;
  position: relative;
  overflow-x: clip; 
   max-width: 768px;
   margin: 0 auto;
}



/*-Footer Menu-*/
.bottom-button {

}