/* STYLE LOADED */
/* === KONTENER === */
.personalization-block{
  border:1px solid #e3e6ea;
  border-radius:12px;
  background:#ffffff;
  margin-bottom:18px;
  overflow:hidden;
}

.personalization-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  background:#f6f7f9;
  cursor:pointer;
}

.personalization-title{
  font-weight:600;
  font-size:15px;
}

.personalization-meta{
  font-size:12px;
  color:#6c757d;
}

.personalization-toggle{
  font-size:16px;
  color:#555;
}

.personalization-content{
  padding:18px;
  background:#fff;
}

/* === TRYB === */
.team-switch{
  display:flex;
  gap:10px;
  margin-bottom:16px;
}

.team-switch button{
  flex:1;
  padding:11px;
  border-radius:10px;
  border:1px solid #4862A3;
  background:#fff;
  font-weight:600;
  cursor:pointer;
}

.team-switch button.active{
  background:#4862A3;
  color:#fff;
  border-color:#4862A3;
}

/* === INPUTY GLOBALNE === */
.personalization-content input{
  border-radius:8px;
  border:1px solid #dcdfe4;
  padding:12px;
  font-size:14px;
}

.personalization-content input:focus{
  outline:none;
  border-color:#0d6efd;
  box-shadow:0 0 0 2px rgba(13,110,253,.1);
}

/* === NAZWA DRUŻYNY === */
.team-name-wrap{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:14px;
}

.team-name-wrap input{
  flex:1;
  font-weight:600;
}

.team-apply{
  padding:0 14px;
  height:44px;
  border-radius:8px;
  background:#e9f2ff;
  color:#4862A3;
  font-weight:600;
  font-size:14px;
  display:flex;
  align-items:center;
  cursor:pointer;
  white-space:nowrap;
}

.team-apply:hover{
  background:#dbe9ff;
}

/* === AUTO NUMERY === */
.auto-numbers{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  margin-bottom:16px;
  background:#f8f9fb;
  border:1px dashed #d8dde3;
  border-radius:10px;
}

.auto-numbers span{
  font-size:13px;
  color:#555;
}

.auto-numbers input{
  width:90px;
  text-align:center;
}

.auto-numbers button{
  padding:9px 14px;
  border-radius:8px;
  border:1px solid #4862A3;
  background:#4862A3;
  color:#fff;
  font-weight:600;
  cursor:pointer;
}

.auto-numbers button:hover{
  background:#4862A3;
}

/* === WIERSZE === */
.personalization-row{
  display:grid;
  grid-template-columns:1.5fr 1fr 120px;
  gap:10px;
  margin-bottom:10px;
}

.personalization-row input[readonly]{
  background:#fff;
  cursor:pointer;
  font-weight:600;
}

.item-separator{
  height:1px;
  background:#eef0f3;
  margin:14px 0;
}

/* === MOBILE === */
@media(max-width:768px){
  .personalization-row{
    grid-template-columns:1fr;
  }
}

/* === POPUP ROZMIARU === */
.size-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.size-popup{
  background:#fff;
  border-radius:16px;
  padding:20px;
  width:90%;
  max-width:360px;
  animation:popIn .2s ease-out;
}

.size-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  justify-items:center;
  align-items:center;
  margin-top:14px;
}

.size-btn{
  width:100%;
  text-align:center;
  border:2px solid #e5e7eb;
  padding:14px 0;
  border-radius:12px;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  transition:.15s;
}

.size-btn:hover{
  border-color:#4862a3;
  background:#f3f6ff;
}
@keyframes popIn{
  from{transform:scale(.95);opacity:0}
  to{transform:scale(1);opacity:1}
}
/* =========================
   MOBILE UX – DOPASOWANIE
   ========================= */
@media(max-width: 768px){

  /* nagłówek produktu */
  .personalization-header{
    padding:12px 14px;
  }

  .personalization-title{
    font-size:14px;
  }

  .personalization-meta{
    font-size:11px;
  }

  /* przełącznik trybu */
  .team-switch{
    flex-direction:column;
    gap:8px;
  }

  .team-switch button{
    padding:12px;
    font-size:15px;
  }

  /* nazwa drużyny */
  .team-name-wrap{
    flex-direction:column;
    align-items:stretch;
  }

  .team-apply{
    justify-content:center;
    height:42px;
    font-size:14px;
  }

  /* numerowanie */
  .auto-numbers{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .auto-numbers span{
    font-size:12px;
  }

  .auto-numbers input{
    width:100%;
    font-size:16px;
    padding:12px;
  }

  .auto-numbers button{
    width:100%;
    padding:12px;
    font-size:15px;
  }

  /* wiersze – JEDNA KOLUMNA */
  .personalization-row{
    grid-template-columns:1fr;
    gap:8px;
  }

  .personalization-row input{
    font-size:15px;
    padding:13px;
  }

  /* rozmiar jako duży przycisk */
  .personalization-row input[readonly]{
    text-align:left;
    background:#f8f9fb;
  }

  /* popup rozmiarów */
  .size-popup{
    padding:16px;
  }

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

  .size-btn{
    padding:14px 0;
    font-size:15px;
  }
}
/* =========================
   WALIDACJA PÓL
   ========================= */
.input-error{
  border:2px solid #e74c3c !important;
  background:#fff5f5;
  animation: shake .25s linear 1;
}

@keyframes shake{
  0%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  50%{transform:translateX(4px)}
  75%{transform:translateX(-4px)}
  100%{transform:translateX(0)}
}

/* =========================
   GOTOWY PRODUKT
   ========================= */
.personalization-block.is-complete{
  border:2px solid #2ecc71;
  background:#f6fffa;
}

.personalization-block.is-complete .personalization-header{
  background:#e9f8f0;
}

.personalization-block.is-complete .personalization-title::after{
  content:" ✔";
  color:#2ecc71;
  font-weight:700;
}

/* =========================
   NIEKOMPLETNY
   ========================= */
.personalization-block.is-incomplete{
  border:2px solid #f1c40f;
}

/* =========================
   SMOOTH APPEAR
   ========================= */
.personalization-block{
  animation: fadeIn .25s ease-out;
}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
.input-error{
  border:2px solid #D9534F !important;
  background:#fff5f5;
}

.input-ok{
  border:2px solid #4862a3 !important;
  background:#f4f6ff;
}
.personalization-block.done{
  border:2px solid #4862a3;
  background:#f7f9ff;
}

.personalization-block.error{
  border:2px solid #D9534F;
}
@media(max-width:768px){
  .personalization-row{
    grid-template-columns:1fr;
  }

  .team-switch button{
    padding:14px;
    font-size:15px;
  }

  .size-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .team-name-wrap{
    flex-direction:column;
  }

  .team-apply{
    width:100%;
    border-radius:10px;
  }
}