/* =============================
   CZCIONKI
   ============================= */

/* Potta One -- h1 */
@import url('https://fonts.googleapis.com/css2?family=Potta+One&display=swap');


/* =============================
   Box Sizing Reset
   ============================= */
   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }

/* =============================
   Global Styles
   ============================= */

html {
  font-size: 62.5%;
}

body {
  font-family: 'Work Sans', sans-serif;
  color: #1f3a34;
  margin: 0;
  padding: 0;
  background-color: #f8f1de;
  z-index: 1;
}

:root {
  --vh: 1vh; /* Fallback */
}

body.app-layout {
  height: calc(var(--vh, 1vh) * 100);
  min-height: 100vh; /* fallback dla starszych */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  margin: 0;
}


body.app-layout .container {
  flex: 1;
  overflow-y: hidden;
}


/* Tutaj przewijamy całą stronę 
/* body.info-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

body.info-layout .container {
  flex: 1;
  overflow-y: auto;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
} */

/* Tutaj przewijamy całą stronę bez topbar */
body.info-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden; /* blokuje przewijanie całego body */
}

body.info-layout > #topbar-placeholder {
  flex-shrink: 0; /* Topbar ma stały rozmiar */
}

body.info-layout .container {
  flex: 1; /* zajmuje resztę miejsca */
  overflow-y: auto; /* tylko to przewijamy */
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

body.info-layout:not([data-topbar="true"]) .container {
  min-height: 100vh;
  padding-top: 4rem; /* jeśli chcesz odsunąć od góry */
  padding-bottom: 4rem; /* dla przycisków */
  overflow-y: auto;      /* umożliwia przewijanie */
}







/* =============================
   Responsive Images
   ============================= */
   img {
    max-width: 100%;
    height: auto;
    display: block;
  }

/* =============================
   Typography
   ============================= */

   .text-style-example {
    font-family: 'Work Sans', sans-serif; /* Czcionka podstawowa i zapasowa */
    font-size: 1.6rem;                   /* Rozmiar tekstu – 1.6rem = 16px przy html 62.5% */
    font-weight: 400;                    /* Grubość tekstu: 400 – normalna, 700 – pogrubiona */
    font-style: normal;                 /* Styl czcionki: normal, italic, oblique */
    line-height: 1.5;                   /* Wysokość linii – odstęp między wierszami */
    letter-spacing: 0.05rem;           /* Odstęp między literami */
    word-spacing: 0.1rem;              /* Odstęp między słowami */
    text-align: left;                  /* Wyrównanie: left, right, center, justify */
    text-transform: none;              /* Transformacja tekstu: none, uppercase, lowercase, capitalize */
    text-decoration: none;             /* Dekoracja: none, underline, overline, line-through */
    color: #333333;                    /* Kolor tekstu */
    white-space: normal;               /* Obsługa spacji i łamań: normal, nowrap, pre, etc. */
  }

h1 {
    font-family: 'Potta One', serif; /* Czcionka podstawowa i zapasowa -- Potta One -- */
    font-size: 4rem;                   /* Rozmiar tekstu – 1.6rem = 16px przy html 62.5% */
    font-weight: 700;                    /* Grubość tekstu: 400 – normalna, 700 – pogrubiona */
    font-style: normal;                 /* Styl czcionki: normal, italic, oblique */
    line-height: 1.5;                   /* Wysokość linii – odstęp między wierszami */
    letter-spacing: 0.05rem;           /* Odstęp między literami */
    word-spacing: 0.1rem;              /* Odstęp między słowami */
    text-align: center;                  /* Wyrównanie: left, right, center, justify */
    text-transform: none;              /* Transformacja tekstu: none, uppercase, lowercase, capitalize */
    text-decoration: none;             /* Dekoracja: none, underline, overline, line-through */
    color: #c3782f !important;                    /* Kolor tekstu */
    white-space: normal;               /* Obsługa spacji i łamań: normal, nowrap, pre, etc. */
    margin-bottom: 1rem;               /* Margines pod tekstem */
  } 

  h2 {
    font-family: 'Potta One', serif; /* Czcionka podstawowa i zapasowa */
    font-size: 2rem;                   /* Rozmiar tekstu – 1.6rem = 16px przy html 62.5% */
    font-weight: 400;                    /* Grubość tekstu: 400 – normalna, 700 – pogrubiona */
    font-style: normal;                 /* Styl czcionki: normal, italic, oblique */
    line-height: 1.5;                   /* Wysokość linii – odstęp między wierszami */
    letter-spacing: 0.05rem;           /* Odstęp między literami */
    word-spacing: 0.1rem;              /* Odstęp między słowami */
    text-align: center;                  /* Wyrównanie: left, right, center, justify */
    text-transform: none;              /* Transformacja tekstu: none, uppercase, lowercase, capitalize */
    text-decoration: none;             /* Dekoracja: none, underline, overline, line-through */
    color: #c3782f;                    /* Kolor tekstu */
    white-space: normal;               /* Obsługa spacji i łamań: normal, nowrap, pre, etc. */
    margin-bottom: 1rem;               /* Margines pod tekstem */ 
  } 

  p {
    font-size: 1.6rem;
    line-height: 1.6;
    margin-bottom: 1.6rem;
    color: #1f3a34;
  }

  .small-text {
    font-family: 'Work Sans', sans-serif; /* Czcionka podstawowa i zapasowa */
    font-size: 1.4rem;                   /* Rozmiar tekstu – 1.6rem = 16px przy html 62.5% */
    font-weight: 400;                    /* Grubość tekstu: 400 – normalna, 700 – pogrubiona */
    font-style: normal;                 /* Styl czcionki: normal, italic, oblique */
    line-height: 1.5;                   /* Wysokość linii – odstęp między wierszami */
    letter-spacing: 0.05rem;           /* Odstęp między literami */
    word-spacing: 0.1rem;              /* Odstęp między słowami */
    text-align: left;                  /* Wyrównanie: left, right, center, justify */
    text-transform: none;              /* Transformacja tekstu: none, uppercase, lowercase, capitalize */
    text-decoration: none;             /* Dekoracja: none, underline, overline, line-through */
    color: #f8df99 !important;                    /* Kolor tekstu */
    white-space: normal;               /* Obsługa spacji i łamań: normal, nowrap, pre, etc. */
  }

  .large-text {
    font-family: 'Work Sans', sans-serif; /* Czcionka podstawowa i zapasowa */
    font-size: 3rem;                   /* Rozmiar tekstu – 1.6rem = 16px przy html 62.5% */
    font-weight: 700;                    /* Grubość tekstu: 400 – normalna, 700 – pogrubiona */
    font-style: normal;                 /* Styl czcionki: normal, italic, oblique */
    line-height: 1.5;                   /* Wysokość linii – odstęp między wierszami */
    letter-spacing: 0.05rem;           /* Odstęp między literami */
    word-spacing: 0.1rem;              /* Odstęp między słowami */
    text-align: center;                  /* Wyrównanie: left, right, center, justify */
    text-transform: none;              /* Transformacja tekstu: none, uppercase, lowercase, capitalize */
    text-decoration: none;             /* Dekoracja: none, underline, overline, line-through */
    color: #c3782f;                    /* Kolor tekstu */
    white-space: normal;               /* Obsługa spacji i łamań: normal, nowrap, pre, etc. */
  }

  .long-text {
    font-family: 'Work Sans', sans-serif; /* Czcionka podstawowa i zapasowa */
    font-size: 1.6rem;                   /* Rozmiar tekstu – 1.6rem = 16px przy html 62.5% */
    font-weight: 400;                    /* Grubość tekstu: 400 – normalna, 700 – pogrubiona */
    font-style: normal;                 /* Styl czcionki: normal, italic, oblique */
    line-height: 1.2;                   /* Wysokość linii – odstęp między wierszami */
    letter-spacing: 0.05rem;           /* Odstęp między literami */
    word-spacing: 0.1rem;              /* Odstęp między słowami */
    text-align: left;                  /* Wyrównanie: left, right, center, justify */
    text-transform: none;              /* Transformacja tekstu: none, uppercase, lowercase, capitalize */
    text-decoration: none;             /* Dekoracja: none, underline, overline, line-through */
    color: #1f3a34;                    /* Kolor tekstu */
    white-space: normal;               /* Obsługa spacji i łamań: normal, nowrap, pre, etc. */
  }

  .text-error {
    color: red;
  }

  .center-text {
    text-align: center;
  }
  
  /* =============================
   Utilities
   ============================= */
   .form-link {
    display: block;
    margin-top: 0.75rem;
    font-size: 1.4rem;
    color: #f8df99;
    text-align: left;
    text-decoration: none;
  }
  
  .form-link:hover {
    text-decoration: underline;
  }
  
   .hidden {
    display: none !important;
  }
  
  #password-error {
    color: red;
    font-size: 0.9em;
    display: none;
  }
  
  #password-error:not(.hidden) {
    display: block;
  }


/* =============================
  Emotki
   ============================= */
/* Ogólne ustawienia dla wszystkich ikon */
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  vertical-align: middle;
  margin: 0 4px;
}

/* Indywidualne ikonki — tylko tło */
.icon-mapa {
  background-image: url('/assets/img/emotki/mapa.png');
}

.icon-lokalizacja {
  background-image: url('/assets/img/emotki/lokalizacja.png');
}

.icon-qr {
  background-image: url('/assets/img/emotki/qr.png');
}

.icon-odznaka {
  background-image: url('/assets/img/emotki/odznaka.png');
}

.icon-trop {
  background-image: url('/assets/img/emotki/trop.png');
}

.icon-pytajnik {
  background-image: url('/assets/img/emotki/pytajnik.png');
}

.icon-rodzina {
  background-image: url('/assets/img/emotki/rodzina.png');
}

.icon-dom {
  background-image: url('/assets/img/emotki/dom.png');
}

.icon-kompas {
  background-image: url('/assets/img/emotki/kompas.png');
}

.icon-celownik {
  background-image: url('/assets/img/emotki/celownik.png');
}

.icon-darmowe {
  background-image: url('/assets/img/emotki/darmowe.png');
}

.icon-koperta {
  background-image: url('/assets/img/emotki/koperta.png');
}

.icon-telefon {
  background-image: url('/assets/img/emotki/telefon.png');
}


/* =============================
   Containers
   ============================= */
  
  /* Jeśli poprawnie działa wyświetlanie to usuwamy ten fragment */
   /*.container {
    /* max-width: 100%; */
    /* padding: 1rem; */

  /*}*/


   .container {
    width: 100%;                      /* Szerokość kontenera – pełna szerokość rodzica */
    max-width: 400px;                 /* Maksymalna szerokość – ogranicza kontener na większych ekranach */
    margin: 0 auto;
    padding: 2rem 1.5rem;              /* padding: góra/dół 2rem, lewo/prawo 1.5rem */
    box-sizing: border-box;            /* Wycentrowanie poziome */
    box-shadow: none; /* Cień dla efektu głębi */
    background-color: #f8f1de;           /* Tło kontenera */
    /* background-image: url('...'); */ /* Opcjonalnie: tło obrazkowe */
    /* background-size: cover; */       /* Rozmiar tła – dopasowanie */
    /* background-position: center; */  /* Pozycjonowanie tła */
    padding-top: 0.1rem;
    /* padding: 20px; */               /* Przykład: padding we wszystkich kierunkach */
  
    border-radius: 0 0 6px 6px;       /* Zaokrąglenie dolnych rogów */
    /* border: 1px solid #ccc; */      /* Opcjonalna ramka wokół kontenera */
  
    display: flex;                    /* Ustawienie jako kontener Flexbox */
    flex-direction: column;          /* Układ dzieci w kolumnie */
    gap: 2rem;                        /* Odstęp między dziećmi Flexboxa */
  
    /* align-items: center; */         /* Wyrównanie dzieci w osi poprzecznej */
    /* justify-content: center; */     /* Wyrównanie dzieci w osi głównej */
    /* flex-wrap: wrap; */             /* Dzieci zawijają się w razie potrzeby */
    overflow-x: hidden;
  }

.container--szop {
  background: url('../../assets/img/tlo-szop.png') no-repeat center center/cover;
}

/* =============================
   Responsive Pages
   ============================= */

/* Duże ekrany – layouty responsywne */
@media (min-width: 768px) {
  body.app-layout .container {
    width: 60%;
    max-width: 800px;
    margin: 0 auto;
  }

  body.info-layout .container {
    flex: 1; /* dodane aby poprawnie działał topbar */
    width: 80%;
    max-width: 1000px;
    margin: 0 auto;
  }
}

@media (min-width: 1200px) {
  body.app-layout .container {
    max-width: 900px;
  }
  body.info-layout .container {
    max-width: 1100px;
  }
}

/* =============================
  Ikony
   ============================= */
   .home-icon {
    display: inline-block;
    height: 100%; /* wysokość względem topbara */
    aspect-ratio: 1/1; /* zachowaj kwadrat */
    width: auto; /* ważne: zapewnia proporcje */
    min-width: 30px; /* NOWE: minimalna szerokość, żeby był widoczny */
    background-image: url('../../assets/img/ikona-domek.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
  }
  

/* =============================
   Buttons
   ============================= */

/* Bazowy styl przycisku */
.btn {
  display: inline-block;
  padding: 1rem 1.5rem;
  font-size: 1.6rem;
  font-weight: 500;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  text-align: center;
  text-decoration: none;
  margin-bottom: 1rem;

}

/* Główny wariant – pomarańczowy */
.btn-primary {
  background-color: #c3782f;
  color: #f5e9d3;
}

.btn-primary:hover {
  background-color: #a66422;
}

/* Dodatkowy wariant – morski */
.btn-secondary {
  background-color: #2e8377;
  color: #f5e9d3;
}

.btn-secondary:hover {
  background-color: #22695f;
}

/* Mniejsze przyciski – np. dla mess box */
.btn-small {
  padding: 0.6rem 1rem;
  font-size: 1.4rem;
}

/* Pełna szerokość – jeden przycisk na całą linię */
.btn-full {
  width: 100%;
  display: block;
}

/* Układ przycisków obok siebie */
.btn-row {
  display: flex;
  gap: 1rem;
  width: 100%;
}

/* Przyciski dzielące miejsce w .btn-row */
.btn-half {
  flex: 1 1 50%;
}

/* Info Buttons */
.info-buttons {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.button-group-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 2rem;
}


/* =============================
   PWA Install Button   - to będzie do wyrzucenia
   ============================= */
   #install-pwa-btn {
    background-color: transparent;
    border: 1px solid #c3782f;
    color: #c3782f;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    margin: 0 0.5rem;
  }
  
  #install-pwa-btn:hover {
    background-color: #c3782f;
    color: white;
  }
  
/* =============================
   Form Inputs
   ============================= */

   .form-input {
    width: 100%;
    padding: 1rem;
    font-size: 1.6rem;
    border: 1px solid #c3782f;
    border-radius: 5px;
    background-color: #fdf6e3;
    color: #1f3a34;
    box-sizing: border-box;
    margin-bottom: 1.5rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  
  .form-input:focus {
    outline: none;
    border-color: #a66422;
    box-shadow: 0 0 0 2px rgba(195, 120, 47, 0.2);
  }

  .form-input {
    margin-bottom: 2rem;
  }  

  /* =============================
   Authentication Form
   ============================= */
.auth-form {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.form-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 2rem;
}

.form-section {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  margin-bottom: 2rem; /* odstęp od dołu */
  padding-bottom: 2rem;
}


/* =============================
   Topbar
   ============================= */
.topbar-wrapper {
  width: 100%;
  margin: 0 auto;
  background-color: #f2e6c9;
  padding: 0 0px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 6px 6px 0 0;
  border-bottom: 1px solid #ddd;
}

.user-topbar {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  background-color: #f2e6c9;
  color: #444;
  font-size: 1rem;
  line-height: 1;
  min-height: 56px; /* zapewniamy min wysokość */
}


.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.topbar-home:hover {
  color: #000;
}

#topbar-content {
  font-weight: 600;
  font-size: 1.6rem;
  cursor: pointer;
}

/* Ukrywanie topbar */

[data-topbar="false"] .topbar-wrapper {
  display: none !important;
}

/* Menu hamburger */

#hamburger-icon {
  width: 36px;
  height: 36px;
  background-image: url('../../assets/img/ikona-hamburger.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

#close-icon {
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}

#close-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10000;
  color: #f8f1de;
}

/* =============================
   Fullscreen Menu
   ============================= */
#fullscreen-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #3b2e2a;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#fullscreen-menu.hidden,
#close-icon.hidden {
  display: none !important;
}

#fullscreen-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

#fullscreen-menu li {
  margin: 1.2rem 0;
  font-size: 1.5rem;
}

#fullscreen-menu a,
#fullscreen-menu li {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

#fullscreen-menu a:hover,
#fullscreen-menu li:hover {
  color: #f1c40f;
  cursor: pointer;
}

/* =============================
   Map View
   ============================= */
.powiaty-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 2rem auto 0;
  text-align: center;
  max-width: 400px;
}

.powiat-button {
  width: 100%;
  padding: 0.75rem 1.5rem;
  border: none;
  background-color: #3b2e2a;
  color: #f8f1de;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
  text-decoration: none;
}

.powiat-button:hover {
  background-color: #473731;
}

/* =============================
   Start Panel
   ============================= */
#trop-panel {
  background-color: #f2e6c9;
  padding: 10px;
  margin: 20px 0;
  border-radius: 6px;
  text-align: center;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

#trop-panel h3 {
  margin-bottom: 10px;
}

.trop-buttons button {
  margin: 0 10px;
  padding: 10px 15px;
  border: none;
  background-color: #3b6a70;
  color: #f8f1de;
  border-radius: 4px;
  cursor: pointer;
}

.trop-buttons button:hover {
  background-color: #2a595d;
}

#continue-trop-btn.hidden {
  display: none;
}

/* =============================
   Gminy
   ============================= */
.gminy-container {
  margin-top: 2rem;
  text-align: center;
}

.gmina-button {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0.5rem auto;
  padding: 0.75rem 1rem;
  border: none;
  background-color: #3b2e2a;
  color: #f8f1de;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.gmina-button:hover {
  background-color: #473731;
}

.gmina-info {
  background-color: #ede2c4;
  border: 1px solid #e0c88a;
  padding: 15px;
  border-radius: 6px;
  margin-top: 1rem;
  text-align: center;
}

#current-point-section,
#completed-points-section {
  background-color: #fffbea;
  border: 1px solid #e0c88a;
  padding: 15px;
  border-radius: 6px;
  margin-top: 2rem;
}

#mark-point-btn {
  margin-top: 1rem;
  padding: 10px 20px;
  background-color: #c3782f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#mark-point-btn:hover {
  background-color: #a66422;
}

#completed-points-list {
  list-style-type: none;
  padding-left: 0;
  margin-top: 1rem;
}

#completed-points-list li {
  background-color: #f1e4c5;
  border: 1px solid #cce5d6;
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 6px;
  text-align: left;
}

/* =============================
   Info Container
   ============================= */
.info-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 600px;
  margin: 0rem auto;
  padding-top: 0;
  padding-right: 2rem;
  padding-bottom: 2rem;
  padding-left: 2rem;
  background: transparent;
  border-radius: 8px;
  box-shadow: none;
  text-align: center;
}

.info-container p {
  margin-bottom: 1rem;
  line-height: 1.6;
}


/* =============================
   Ocena Gwiazdki
   ============================= */

.rating-box {
  margin-top: 1rem;
  text-align: center;
}

.rating-box .star {
  background: url('/assets/img/star-empty.png') no-repeat center;
  background-size: contain;
  width: 32px;
  height: 32px;
  border: none;
  cursor: pointer;
  margin: 0 0.2rem;
}

.rating-box .star.active {
  background-image: url('/assets/img/star-full.png');
}

.rating-box p {
  margin-top: 0.5rem;
  font-weight: 500;
}


/* =============================
   Problem Reporting
   ============================= */
#report-problem-btn {
  margin-top: 10px;
  padding: 10px 16px;
  background-color: #d9534f;
  color: white;
  border: none;
  border-radius: 6px;
}

/* =============================
   Dodatkowe
   ============================= */

   html, body {
    overflow-x: hidden;
  }
    
/* =============================
   Widok: zgłoszenie.html
   ============================= */


  /* 📬 Komunikat po wysłaniu */
.success-box {
  display: none;
  flex-direction: column;
  padding: 2rem;
  text-align: center;
  gap: 1.5rem;
}

.success-box:not(.hidden) {
  display: flex;
}

.success-box img {
  width: 80px;
  margin-bottom: 1rem;
}

.success-button {
  margin-top: 2rem;
}
 
 /* =============================
   Stopka
   ============================= */
   
  .main-footer {
    display: none;
    background-color: #f7f7f7;
    text-align: center;
    padding: 1rem;
    font-size: 0.9rem;
    color: #555;
    border-top: 1px solid #ccc;
  }
  
  .footer-links {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
  }
  
  .footer-links a {
    color: #555;
    text-decoration: none;
  }
  
  .footer-links a:hover {
    text-decoration: underline;
  }
  
  /* Pokazujemy tylko na szerszych ekranach */
  @media (min-width: 768px) {
    .main-footer {
      display: block;
    }
  }