/*
css project - Kamil/Parkiety Jabłoński
Rok: 2026
*/

:root{
  --green-dark:#004731;
  --green:#0b5f46;
  --green-light:#a9cdb6;
}

*{box-sizing:border-box;font-family:"Rubik",sans-serif;}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:url("tlo.png") center/cover no-repeat;
  filter: blur(10px);
  transform: scale(1.1);
  z-index:-2;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.15);
  z-index:-1;
  transition: 0.15s ease;
}

body{
  margin:0;
  min-height:100svh;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  padding: 15px;
}
.app{
  width:100%;
  max-width:420px;
  height:740px;
  max-height:100svh;

  border-radius:28px;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 40px rgba(0,0,0,.25);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.header{
  padding:16px;text-align:center;
  background:linear-gradient(135deg,var(--green),var(--green-dark));
}
.header img{height:38px;}

.stepsBar{padding:12px 20px;background:#eef4f1;}

.progressInfo{font-size:13px;color:#004731;font-weight:600;margin-bottom:6px;}

.progressTrack{
  width:100%;height:6px;
  background:#cfded6;border-radius:10px;overflow:hidden;margin-bottom:8px;
}
.progressFill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--green),#6fbf9e,var(--green-dark));
  transition:width .4s ease;border-radius:10px;
  box-shadow:0 0 10px rgba(11,95,70,.5);
}

.dots{display:flex;justify-content:space-between;}
.dot{width:10px;height:10px;border-radius:50%;background:#bbb;cursor:pointer;transition:.3s;}
.dot.active{background:var(--green-light);}
.dot.current{background:var(--green);transform:scale(1.4);box-shadow:0 0 12px rgba(11,95,70,.6);}

.content{position:relative;flex:1;overflow:hidden;}

.step{
  position:absolute;inset:0;padding:25px;
  transform:translateX(100%);opacity:0;transition:.4s;
}
.step.active{transform:translateX(0);opacity:1;}
.step.prev{transform:translateX(-100%);}

label{font-weight:600;margin-top:15px;display:block;}

input{
  width:100%;padding:14px;margin-top:6px;
  border-radius:14px;border:1px solid #ccc;
}

.tiles{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:15px;
}

.tile{
  padding:20px;
  border:1px solid #ccc;
  border-radius:16px;
  cursor:pointer;
  text-align:center;
  font-weight:600;
  transition:.2s;
  background:#fff;
}
.tile:hover{transform:scale(1.04);}
.tile:active{transform:scale(.97);box-shadow:0 0 6px rgba(11,95,70,.4) inset;}
.tile.active{
  border-color:var(--green);
  background:#e6f4ef;
  box-shadow:0 0 18px rgba(11,95,70,.35);
  animation:pop .25s ease;
}
@keyframes pop{0%{transform:scale(.9);}100%{transform:scale(1);}}

.buttons{margin-top:30px;display:flex;justify-content:space-between;}
button{
  padding:12px 22px;
  border:none;
  border-radius:16px;
  cursor:pointer;
  font-weight:600;
  transition:.2s;
}
.next{background:linear-gradient(135deg,var(--green-light),var(--green));}
.prev{background:#ccc;}
.finish{
  width:100%;
  margin-top:25px;
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  color:white;
  box-shadow:0 0 20px rgba(11,95,70,.6);
}

.successBox{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:30px;
  animation:fadeUp .6s ease;
}
.checkmark{
  width:90px;
  height:90px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  color:white;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:48px;
  box-shadow:0 0 25px rgba(11,95,70,.6);
  margin-bottom:20px;
  animation:pop .4s ease;
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(30px);}
  to{opacity:1;transform:translateY(0);}
}

.hidden{display:none;}

#sizeTiles{
  max-height:300px;
  overflow-y:auto;
  padding-right:6px;
  display:grid;
  grid-template-columns:1fr;
}
.sizeGroupTitle{
  margin-top:10px;
  margin-bottom:4px;

  font-size:13px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;

  color:#004731;

  border-bottom:none;
}

.infoLink{
  display:inline-block;
  background:#e6f4ef;
  padding:6px 10px;
  border-radius:10px;
  margin-top:6px;
  font-size:13px;
  color:#004731;       
  text-decoration:none;   
  font-weight:600;
  cursor:pointer;
  opacity:0.85;
  transition:.2s;
}
.infoLink:hover{
  opacity:1;
  color:#0b5f46;
}

.colorTiles{
  grid-template-columns:repeat(2,1fr);
  max-height:320px;
  overflow-y:auto;
  padding-right:6px;
}

.colorTile{
  padding:10px;
}

.colorTile img{
  width:100%;
  height:90px;
  object-fit:cover;
  border-radius:10px;
  margin-bottom:6px;
}

.colorTile span{
  display:block;
  font-size:12px;
}

.colorTiles::-webkit-scrollbar{
  width:6px;
}
.colorTiles::-webkit-scrollbar-thumb{
  background:#0b5f46;
  border-radius:10px;
}
.colorTiles::-webkit-scrollbar-track{
  background:#e6f4ef;
}
.classTiles{
  grid-template-columns:1fr;
}

.classTile{
  text-align:left;
}

.classTile img{
  width:100%;
  height:150px;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:8x;
}

.classTile strong{
  display:block;
  margin-bottom:4px;
}

.classTile p{
  font-size:12px;
  font-weight:400;
  margin:0;
  color:#333;
}
.classTiles{
  max-height:340px;
  overflow-y:auto;
  padding-right:6px;
}
.fancySuccess strong{
  color:#004731;
  font-weight:700;
}
.footerAuthor{
  width:100%;
  text-align:center;
  font-size:11px;
  color:#004731;
  padding:10px 0 12px;
  background:linear-gradient(180deg,#f3f8f6,#e6f4ef);
  border-top:1px solid rgba(11,95,70,.15);
  letter-spacing:0.3px;
}

.footerAuthor span{
  display:block;
  font-size:10px;
  opacity:0.7;
}

.footerAuthor strong{
  font-size:12px;
  font-weight:700;
  color:#0b5f46;
}

.footerAuthor strong{
  font-weight:700;
}

.footerAuthor span{
  font-size:10px;         
  color:#0b5f46;
}

/* === Krok 2 – wzory ułożenia (większe kafelki) === */
#patternTiles{
  grid-template-columns:1fr;
}

#patternTiles .classTile{
  padding:14px;
}

#patternTiles .classTile img{
  height:150px;       /* większe zdjęcie */
}

#patternTiles .classTile strong{
  font-size:16px;
}

#patternTiles .classTile p{
  font-size:13px;
  line-height:1.4;
}
/* ===== Wymiary – wersja premium ===== */

.sizeInfo{
  background:#e6f4ef;
  border-left:4px solid #0b5f46;
  padding:8px 12px;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  color:#004731;
  margin-bottom:10px;
}

.widthBox, .lengthBox{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.widthBox .tile, .lengthBox .tile{
  padding:14px 6px;
  font-size:14px;
}

.lengthBox{
  margin-top:10px;
  animation:fadeUp .3s ease;
}
/* ===== Podsumowanie premium ===== */


.lengthTotal{
  color:#0b5f46;
  font-weight:700;
  background:#e6f4ef;
  padding:6px 10px;
  border-radius:10px;
  font-size:13px;
}
.lengthNote{
  font-size:11px;
  color:#0b5f46;
  font-weight:500;
  background:#e6f4ef;
  padding:2px 6px;
  border-radius:6px;
  margin-left:1px;
}

.lengthNote::before{
  content:"i";
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#0b5f46;
  color:white;
  font-size:10px;
  font-weight:700;
  margin-right:4px;
}
.step{
  display: flex;
  flex-direction: column;
}

input.error {
  border: 2px solid #e53935;
  background: #ffecec;
}

input.valid {
  border: 2px solid #43a047;
  background: #f0fff3;
}

#formError {
  margin-top: 10px;
  font-size: 13px;
  color: #e53935;
}
button.next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.imgModal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.75);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.imgModal.hidden{display:none;}

.imgModalContent{
  background:white;
  padding:10px;
  border-radius:16px;
  max-width:90%;
  max-height:90%;
  position:relative;
  animation:fadeUp .3s ease;
}

.imgModalContent img{
  max-width:100%;
  max-height:80vh;
  border-radius:12px;
}

.imgModalClose{
  position:absolute;
  top:6px;
  right:12px;
  font-size:28px;
  cursor:pointer;
  font-weight:700;
  color:#004731;
}
.colorTile::after{
  content:"Kliknij lupkę aby powiększyć";
  display:block;
  font-size:10px;
  color:#0b5f46;
  margin-top:4px;
}
textarea{
  width:100%;
  padding:14px;
  border-radius:14px;
  border:1px solid #ccc;
  margin-top:6px;
  resize:none;
  min-height:52px;   /* taka sama wysokość jak input */
  font-size:16px;
  line-height:1.4;
}

.rodoBox{
  margin-top:15px;
  font-size:12px;
}

.checkboxLabel{
  display:flex;
  gap:8px;
  margin-bottom:10px;
  cursor:pointer;
}

.checkboxLabel input{
  margin-top:3px;
}

.rodoLink{
  color:#0b5f46;
  font-weight:700;
  cursor:pointer;
  text-decoration:underline;
}
.rodoBox{
  margin-top:14px;
  font-size:11px;
  color:#333;
}

.rodoItem{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-bottom:8px;
  cursor:pointer;
  line-height:1.4;
}

.rodoItem input{
  display:none;
}

.rodoItem span:first-of-type{
  width:14px;
  height:14px;
  border:2px solid #0b5f46;
  border-radius:4px;
  margin-top:2px;
  flex-shrink:0;
  position:relative;
}

.rodoItem input:checked + span::after{
  content:"";
  position:absolute;
  left:3px;
  top:0px;
  width:4px;
  height:8px;
  border:solid #0b5f46;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

.rodoLink{
  margin-left: 4px;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.step-rodo{
  max-height: calc(100vh - 200px); /* było 140px – zwiększamy */
  overflow-y: auto;

  padding: 10px 12px 30px;  /* dół większy żeby button miał miejsce */
  box-sizing: border-box;
}


.step-rodo::-webkit-scrollbar{
  width:6px;
}
.step-rodo::-webkit-scrollbar-thumb{
  background:#0b5f46;
  border-radius:10px;
}
.rodoBox{
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rodoItem{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}

/* chowamy systemowy checkbox */
.rodoItem input{
  display: none;
}

/* nasze pudełko */
.rodoItem span:first-of-type{
  width: 16px;
  height: 16px;
  border: 2px solid #0b5f46;
  border-radius: 4px;
  flex-shrink: 0;
  position: relative;
  margin-top: 2px;
}

/* ptaszek */
.rodoItem span:first-of-type::after{
  content: "";
  position: absolute;
  left: 3px;
  top: 0px;
  width: 5px;
  height: 9px;
  border: solid #0b5f46;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
}

/* zaznaczone */
.rodoItem input:checked + span::after{
  opacity: 1;
}

/* link RODO */
.rodoLink{
  margin-left: 4px;
  color: #0b5f46;
  text-decoration: underline;
  cursor: pointer;
  font-size: 12px;
}
.classTile{
  position: relative;
}

.classTile::after{
  content:"🔍";
  position:absolute;
  top:6px;
  right:6px;
  background:rgba(255,255,255,0.85);
  border-radius:50%;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
}
.colorTile.disabled{
  opacity:0.4;
  position:relative;
  overflow:hidden;
  cursor:not-allowed;
}

.colorTile.disabled::before{
  content:"🔒";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  font-size:34px;   /* większa i czytelna */
  opacity:0.9;
}


/* TEKST NA DOLE – wewnątrz kafelka */
.colorTile.disabled::after{
  content:"Dostępne tylko przy szczotkowaniu";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  text-align:center;

  background:linear-gradient(
    to top,
    rgba(0,63,45,0.95),
    rgba(0,63,45,0.85)
  );

  color:#fff;
  font-size:11px;
  font-weight:600;
  padding:6px 6px 7px;
  border-radius:0 0 12px 12px;
  line-height:1.25;
  letter-spacing:0.2px;
}

@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

.colorTile.shake{
  animation: shake 0.35s ease;
}
.colorTile{
  position: relative;
}

.colorTile::before{
  content:"🔍";
  position:absolute;
  top:6px;
  right:6px;
  background:rgba(255,255,255,0.85);
  border-radius:50%;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
  z-index:2;
}



@keyframes fadeIn{
  from{opacity:0; transform:translateY(-5px);}
  to{opacity:1; transform:translateY(0);}
}

.step.shake{
  animation: shake .35s;
}

@keyframes shake{
  0%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  50%{transform:translateX(6px)}
  75%{transform:translateX(-4px)}
  100%{transform:translateX(0)}
}
.stepError{
  margin-top:10px;
  color:#b00020;
  font-size:14px;
  text-align:center;

  min-height:18px;   /* 👈 rezerwuje miejsce */
  opacity:0;
  transition:opacity .2s ease;
}

.stepError.hidden{
  opacity:0;
}

.stepError:not(.hidden){
  opacity:1;
}
.buttons{
  display:flex;
  justify-content:space-between;
  gap:12px;
}

.buttons button{
  flex: 0 0 auto;   /* 🔒 NIE POZWALA SIĘ ŚCISKAĆ */
}
.tiles.error .tile{
  border-color:#e53935;
  box-shadow:0 0 12px rgba(229,57,53,.35);
}
.tile.error{
  outline:2px solid #c00;
  animation: shake .35s;
}
.tiles.error .tile{
  border-color:#e53935;
  box-shadow:0 0 12px rgba(229,57,53,.35);
}

.inputWrap.error input{
  border-color:#e53935;
  box-shadow:0 0 8px rgba(229,57,53,.3);
}
.lengthBox.error .tile{
  border-color:#e53935;
  box-shadow:0 0 12px rgba(229,57,53,.35);
}

.widthBox.error .tile{
  border-color:#e53935;
  box-shadow:0 0 12px rgba(229,57,53,.35);
}
@media (max-width: 768px) {

  body {
    padding: 0;
    margin: 0;
  }

  .app{
    width:100%;
    max-width:420px;
    height:100svh;
    border-radius:22px;
  }

  .content {
    padding: 10px 5px;
  }

  .step {
    padding: 10px 5px;
  }

  label {
    font-size: 16px;
    margin-bottom: 8px;
  }

  .tiles {
    gap: 8px;
  }

  .tile {
    padding: 10px;
  }

  .tile img {
    max-height: 120px;
    object-fit: cover;
  }

  input, textarea {
    font-size: 16px;
    padding: 10px;
  }

  .buttons {
    margin-top: 15px;
  }

}
@media (max-width: 768px) {
  .header img {
    max-height: 50px;
  }

  .stepsBar {
    margin-bottom: 10px;
  }
}
@media (max-width: 768px){
  .app{
    height: calc(100svh - 16px);
    max-height: calc(100svh - 16px);
  }

  body{
    padding:5px;
  }
}
button{
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

button:focus{
  outline: none;
}

button:focus-visible{
  outline: none;
}
*{
  -webkit-tap-highlight-color: transparent;
}
button{
  -webkit-appearance: none;
  appearance: none;
}
button,
button *,
.next,
.prev {
  color: #004731 !important;
  text-decoration: none !important;
}

button:focus,
button:active,
.next:focus,
.prev:focus {
  color: #004731 !important;
  outline: none !important;
}

button {
  -webkit-appearance: none;
  appearance: none;
  background-image: none;
  border: none;
}

/* jeśli to przypadkiem <a> */
a.next,
a.prev,
a.next:visited,
a.prev:visited,
a.next:active,
a.prev:active {
  color: #004731 !important;
  text-decoration: none !important;
}

/* usuwa niebieskie podświetlenie kliknięcia na telefonie */
* {
  -webkit-tap-highlight-color: transparent;
}
html, body {
  overflow-x: hidden;
}
body {
  overscroll-behavior-x: none;
}
html, body {
  height: 100%;
  overflow: hidden;
}

.app {
  height: 100svh;
  overflow: hidden;
}

.content {
  overflow: hidden;
}

.step-rodo {
  overflow: hidden;
}
html, body {
  height: 100%;
  overflow: hidden;
}

.app {
  height: 100svh;
  overflow: hidden;
}

.content {
  overflow: hidden;
}

.step-rodo {
  overflow-y: auto;   /* tylko tu wolno scroll */
  overscroll-behavior: contain;
}
.finish{
  color:#fff !important;
  font-size:13px;
  font-weight:500;
  letter-spacing:0.2px;
  padding:16px 20px;
}
/* efekt hover dla linków infoLink */
.infoLink {
  display: inline-block;
  background: #e6f4ef;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 13px;
  color: #004731;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.85;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}

.infoLink:hover {
  transform: scale(1.05);                            /* lekko powiększa link */
  box-shadow: 0 6px 18px rgba(11, 95, 70, 0.3);     /* delikatny cień */
  background: #d4e8df;                               /* jaśniejsze podświetlenie tła */
  opacity: 1;                                        /* pełna widoczność */
}
.tile {
  position: relative;
}

.tile .bottom-note {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75em;
  color: #888;
}
.tile .subtitle {
  display: block;      /* powoduje nową linię */
  font-size: 0.8em;    /* mniejszy tekst */
  color: #666;         /* subtelny szary */
  margin-top: 4px;     /* odstęp od nazwy */
}
.tile[data-value="Surowe"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
/* Sub-step faza */
.subStep {
  margin-top: 15px;
  padding: 12px 15px;
  border-radius: 12px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  transition: all 0.3s ease;
}

.subStepTitle {
  font-weight: 500;
  margin-bottom: 8px;
  color: #333;
  font-size: 14px;
}

/* Efekt przy pojawieniu się */
.subStep.hidden {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  padding: 0 15px;
}

.subStep:not(.hidden) {
  max-height: 200px; /* dostosuj w zależności od treści */
  opacity: 1;
  margin-top: 15px;
}
/* Sub-krok wyglądający jak normalne kafelki */
.subStepTiles {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid #ddd;
}

.subStepTiles label {
  font-weight: 600;
  font-size: 14px;
  display: block;
  margin-bottom: 10px;
  color: #444;
}

.subStepTiles .tiles {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.subStepTiles .tile {
  flex: 1 1 calc(50% - 6px);
  min-width: 120px;
  background-color: #f6f6f6;
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.subStepTiles .tile.active {
  border: 2px solid #007acc;
  background-color: #e0f3ff;
}

.subStepTiles .tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}
.customModal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 999;
}

.customModal:not(.hidden) {
  opacity: 1;
  pointer-events: all;
}

.customModalContent {
  background-color: #fff;
  padding: 20px 25px;
  border-radius: 12px;
  text-align: center;
  max-width: 350px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.modalButtons {
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
}

.modalButtons button {
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: 0.2s;
}

.modalButtons button:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

#modalYes { background-color: #007acc; color: #fff; }
#modalNo { background-color: #f0f0f0; color: #333; }

.customModal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 999;
}

.customModal:not(.hidden) {
  opacity: 1;
  pointer-events: all;
}

.customModalContent {
  background-color: #fff;
  padding: 20px 25px;
  border-radius: 12px;
  text-align: center;
  max-width: 350px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.modalButtons {
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
}

.modalButtons button {
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: 0.2s;
}

.modalButtons button:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

#modalYes { background-color: #007acc; color: #fff; }
#modalNo { background-color: #f0f0f0; color: #333; }
.fazaStatus {
  font-weight: bold;
}

.fazaStatus.tak {
  color: green;
}

.fazaStatus.nie {
  color: red;
}

/* Drobna wskazówka */
.fazaHintTip { font-size: 0.8em; color: #555; margin-left: 4px; }

.fazaStatus.tak { color: green; font-weight: bold; font-size: 0.8em; margin-left: 6px; cursor: pointer; }
.fazaStatus.nie { color: red; font-weight: bold; font-size: 0.8em; margin-left: 6px; cursor: pointer; }
.hidden { display: none; }
.modalButtons {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 15px;
}

.modalButtons button {
  flex: 1;
  padding: 12px 0;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95em;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent; /* domyślnie brak ramki */
}

/* TAK – zielony */
#modalYes {
  background-color: #f3f8f6;	
  color: #fff;
  border: 2px solid #0b5f46;
}
#modalYes:hover {
  background-color: #e6f4ef;	
  box-shadow: 0 4px 12px rgba(11,95,70,0.3);
}

/* NIE – jasne tło z zieloną ramką */
#modalNo {
  background-color: #f3f8f6;
  color: #0b5f46;
  border: 2px solid #0b5f46;
}
#modalNo:hover {
  background-color: #e6f4ef;
  box-shadow: 0 4px 12px rgba(11,95,70,0.2);
}
.modalButtons button:focus,
.modalButtons button:active {
  outline: none;       /* usuwa systemowy focus */
  background: transparent; /* usuwa niebieskie tło */
  color: #0b5f46;      /* zachowuje Twój kolor tekstu */
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* opcjonalny cień dla głębi */
}
/* Styl przycisków Dalej i Finish */
button.next, 
button.finish {
  font-family: 'Rubik', sans-serif; /* spójny font */
  font-weight: 600;                 /* pogrubienie dla czytelności */
  font-size: 14px;                  /* odpowiedni rozmiar */
  color: #fff;                       /* biały tekst */
  text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* delikatny cień dla kontrastu */
  background: linear-gradient(135deg, #0b5f46, #004731); /* gradient zielony */
  border-radius: 16px;
  padding: 14px 24px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* Efekt hover */
button.next:hover, 
button.finish:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  background: linear-gradient(135deg, #0d704f, #006544); /* jaśniejszy gradient przy hover */
}

/* Efekt aktywny przy kliknięciu */
button.next:active, 
button.finish:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.next {
  color: #fff !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
}
/* Styl przycisku Wstecz taki sam jak Dalej/Finish */
button.prev {
  font-family: 'Rubik', sans-serif; /* spójny font */
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  background: linear-gradient(135deg, #0b5f46, #004731); /* ten sam gradient co Dalej */
  border-radius: 16px;
  padding: 14px 24px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  cursor: pointer;
}

/* Hover efekt */
button.prev:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  background: linear-gradient(135deg, #0d704f, #006544); /* jaśniejszy gradient przy hover */
}

/* Efekt kliknięcia */
button.prev:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
/* Styl przycisku Wstecz */
button.prev {
  font-family: 'Rubik', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #000; /* czarny tekst, bo tło szare */
  background: #dedede; /* szare tło */
  border-radius: 16px;
  padding: 14px 24px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  cursor: pointer;
  text-shadow: none; /* cień tekstu niepotrzebny na szarym tle */
  border: none;
}

/* Hover efekt */
button.prev:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  background: #cfcfcf; /* ciut ciemniejsze szare na hover */
}

/* Efekt kliknięcia */
button.prev:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  background: #bfbfbf; /* jeszcze ciemniejsze przy kliknięciu */
}

.infoLength {
  color: #004731;              /* ciemny zielony premium */
  font-weight: 600;            /* pogrubienie */
  font-size: 13px;
  margin-left: 6px;
  text-decoration: underline dotted; /* eleganckie podkreślenie */
  cursor: pointer;
  transition: all 0.2s ease;
}

.infoLength:hover {
  color: #003824;              /* ciemniejszy odcień przy hover */
  transform: scale(1.05);      /* delikatne powiększenie */
  text-shadow: 0 1px 2px rgba(0,0,0,0.2); /* lekki cień dla premium efektu */
}
.backBtn {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;          /* biały tekst */
  background-color: #004731; /* zielony premium */
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.backBtn:hover {
  background-color: #003824; /* ciemniejszy zielony przy hover */
  transform: scale(1.05);
}
.sizeHighlight{
  color:#fff;
  background:#004731;
  font-weight:800;
  padding:2px 8px;
  border-radius:6px;
  margin:0 2px;
  font-size:0.95em;
}
.summary{
  background:linear-gradient(180deg,#f3f8f6,#e6f4ef);
  border-radius:20px;
  padding:12px;
  box-shadow:0 0 18px rgba(11,95,70,.2);
  animation:fadeUp .4s ease;
  border:2px solid #cfe3d9;
}

.summaryTitle{
  text-align:center;
  font-size:16px;
  font-weight:700;
  color:#004731;
  margin-bottom:10px;
}

.summary div{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  padding:8px 10px;
  border-bottom:1px dashed rgba(11,95,70,0.25);
}

.summary div:last-child{
  border-bottom:none;
}

.summary span{
  font-size:12px;
  color:#004731;
}

.summary strong{
  font-size:13px;
  color:#0b5f46;
  text-align:right;
  font-weight:700;
}
.summarySizes{
  grid-column:1 / -1;
  margin-top:10px;
}

.summarySizeGroup{
  margin-top:6px;
}

.summarySizePattern{
  font-weight:700;
  font-size:13px;
  color:#004731;
  margin-bottom:2px;
}

.summarySizeValue{
  font-size:12px;
  padding-left:6px;
  line-height:1.4;
}
body{
  overflow-y:auto;
}
.summarySizes{
  grid-column:1 / -1;
  width:100%;
}

.summarySizeValue{
  font-size:12px;
  line-height:1.4;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.summarySizes div{
display:block;
}
.summarySizePattern{
  font-weight:700;
  font-size:13px;
  color:#004731;
  margin-top:6px;
}

.summarySizeValue{
  font-size:12px;
  line-height:1.4;
  margin-left:0;
  padding-left:0;
}
.summarySizeGroup{
  margin-bottom:8px;
}
.summarySizes{
grid-column:1 / -1;
margin-top:10px;
}

.summarySizeBlock{
margin-top:8px;
}

.summarySizeTitle{
font-weight:700;
font-size:13px;
color:#004731;
}

.summarySizeLine{
font-size:12px;
line-height:1.4;
}
.summarySizes div{
display:block;
}
.summarySizes,
.summarySizes *{
  display:block !important;
  text-align:left !important;
}
.summarySizeLine{
  font-size:12px;
  line-height:1.4;
}
.summarySizes{
  text-align:right;
}

.summarySizeLine{
  font-size:12px;
  line-height:1.4;
  text-align:right;
}
.summarySizes strong{
  display:block;
  text-align:left;
  margin-top:6px;
}

.summarySizeLine{
  font-size:12px;
  line-height:1.4;
  text-align:right;
}
.summarySizes{
  text-align:right;
  padding-right:0;
  margin-right:0;
}

.summarySizeLine{
  text-align:right;
  margin-right:0;
}
.summarySizeLine{
  display:flex;
  justify-content:flex-end; /* pcha zawartość do prawej */
  width:100%;
}

.summarySizeValue{
  text-align:right;
}
.summarySizes{
  margin-top:6px;
}

.summarySizeItem{
  display:flex;
  flex-direction:column;
  align-items:flex-end;   /* 🔥 to przykleja wszystko do prawej */
  margin-bottom:6px;
}

.summarySizePattern{
  font-weight:700;
  font-size:13px;
  text-align:right;
}

.summarySizeValue{
  font-size:12px;
  text-align:right;
}
/* Wymiary w podsumowaniu */
.summarySizes{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-end;   /* przykleja wszystko do prawej */
}

.summarySizeItem{
  width:100%;
  text-align:right;       /* wyrównanie tekstu */
  margin-bottom:6px;
}

.summarySizePattern{
  font-weight:700;
  font-size:13px;
}

.summarySizeValue{
  font-size:12px;
}
/* ===== Wymiary w podsumowaniu ===== */

.summarySizes{
  grid-column: 1 / -1;   /* zajmuje całą szerokość summary */
  width:100%;
  margin-top:6px;
}

.summarySizes > span{
  display:block;
  font-weight:700;
  font-size:13px;
  margin-bottom:6px;
}

.summarySizeItem{
  text-align:right;
  margin-bottom:6px;
}

.summarySizePattern{
  font-weight:700;
  font-size:13px;
}

.summarySizeValue{
  font-size:12px;
}
/* ===== Wymiary w podsumowaniu ===== */

.summarySizes{
  grid-column: 1 / -1;       /* zajmuje całą szerokość summary */
  width:100%;

  display:flex;
  flex-direction:column;
  align-items:flex-end;      /* 👈 wyrównuje wszystko do prawej */
}

.summarySizes > span{
  align-self:flex-start;     /* napis "Wymiary" zostaje po lewej */
  font-weight:700;
  font-size:13px;
  margin-bottom:6px;
}

.summarySizeItem{
  text-align:right;
  margin-bottom:6px;
}

.summarySizePattern{
  font-weight:700;
  font-size:13px;
}

.summarySizeValue{
  font-size:12px;
}
.summarySizes{
  display:flex;
  flex-direction:column;
  align-items:flex-end; /* całość do prawej */
  text-align:right;
}

.summarySizeItem{
  text-align:right;
  width:100%;
}

.summarySizePattern{
  font-weight:700;
}

.summarySizeValue{
  text-align:right;
}
.summarySizes{
  padding-right:0;
  margin-right:0;
}
#summaryBox div{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}

#summaryBox span{
  color:#555;
}

#summaryBox strong{
  text-align:right;
}
.summarySizes{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  width:100%;
}

.summarySizeItem{
  text-align:right;
  width:100%;
}
.summarySizes{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  width:100%;
  margin-top:6px;
}

.summarySizes span{
  color:#555;
}

.summarySizesContent{
  text-align:right;
}

.summarySizeItem{
  margin-bottom:4px;
}

.summarySizePattern{
  font-weight:700;
}

.summarySizeValue{
  font-size:13px;
}
#summaryBox > div{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:6px;
}

.summarySizes{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  width:100%;
}

.summarySizesContent{
  margin-left:auto;
  text-align:right;
}

.summarySizeItem{
  margin-bottom:6px;
}

.summarySizePattern{
  font-weight:700;
}

.summarySizeValue{
  font-size:13px;
}
.summarySizes{
  display:flex;
  justify-content:space-between;
  width:100%;
}

.summarySizes span{
  flex-shrink:0;
}

.summarySizesContent{
  margin-left:auto;
  text-align:right;
  max-width:70%;
}
.summarySizesContent{
  margin-left:auto;
  text-align:right;
  width:100%;
}
.summarySizeItem{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}
.summarySizeItem{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  margin-bottom:4px;
}

.summarySizePattern{
  font-size:12px;
  font-weight:600;
}

.summarySizeValue{
  font-size:12px;
  opacity:.85;
  margin-bottom:2px;
}
.summarySizeValue{
  text-align:right;
  width:100%;
}
.summarySizes{
  display:block;
  text-align:right;
}

.sumPattern{
  font-weight:700;
  margin-top:6px;
}

.sumSize{
  font-weight:500;
  margin-bottom:4px;
}
.sizeItem{
  text-align:right;
  max-width:260px;
  margin-left:auto;
  padding:14px 0;
  border-bottom:1px dashed #b7c7c2;
}

.sizePattern{
  font-weight:700;
  color:#0f4b3a;
  margin-bottom:6px;
}

.sizeValue{
  color:#333;
  font-size:14px;
}
#summarySizes{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}
.sizesList{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:6px;
}

.sizeItem{
  text-align:right;
}

.sizePattern{
  font-weight:700;
  color:#0f4b3a;
  text-transform:capitalize;
}

.sizeValue{
  font-size:14px;
  color:#333;
}
#summaryBox{
  max-height:100%;
  overflow-y:auto;
  padding-right:6px;
}
.sizePattern{
  font-weight:600;
  font-size:13px;
  color:#0f4b3a;
  text-transform:capitalize;
  margin-bottom:1px;
}
.sizesList{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:4px;
}
.infoLength{
  grid-column:1/-1;
  margin-top:6px;
  font-size:13px;
  color:#2563eb;
  cursor:pointer;
}

.infoLength:hover{
  text-decoration:underline;
}
.infoLength{
grid-column:1/-1;
margin-top:8px;
font-size:13px;
color:#2563eb;
cursor:pointer;
text-align:center;
}

.infoLength:hover{
text-decoration:underline;
}
.infoIcon{
  margin-left:8px;
  cursor:pointer;
  font-size:16px;
  opacity:0.7;
  transition:0.2s;
}

.infoIcon:hover{
  opacity:1;
  transform:scale(1.15);
}
.lengthInfo{
  text-align:center;
  margin-top:4px;
}

.lengthInfoClick{
  font-size:12px;
  color:#004731;
  cursor:pointer;
  opacity:0.9;
  transition:0.2s;
}

.lengthInfoClick:hover{
  opacity:1;
  text-decoration:underline;
}