/* Wygląd „niezaznaczony” */
.choices label{
  position: relative;
  border: 2px solid var(--cs-accent-2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  background: transparent;
}
.choices span{ color: var(--cs-text); }

/* Hover */
.choices label:hover{ border-color: var(--cs-accent); transform: translateY(-1px); }

/* Focus (klawiatura) */
.choices input{ position:absolute; inset:0; opacity:0; }
.choices input:focus-visible + span{
  outline: 2px solid var(--cs-accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Wygląd „zaznaczony” – mocniejszy */
.choices input:checked + span{
  background: var(--cs-accent);
  color: #0a0f0c;
  border-radius: 8px;
  box-shadow: 0 0 0 2px var(--cs-accent), 0 0 14px rgba(108,255,180,.35);
  transform: translateY(-1px) scale(1.02);
}

/* NPS responsywnie (żeby nic nie „uciekało”) */
.choices.nps{ grid-template-columns: repeat(11, minmax(40px,1fr)); overflow-x: auto; }
@media (max-width: 540px){
  .choices.nps{
    grid-template-columns: repeat(6, minmax(44px,1fr)); /* 0–5 w pierwszym wierszu */
    row-gap: 10px;
  }
  .choices.nps label:nth-child(n+7){ margin-top: 0; } /* 6–10 przejdzie do 2. wiersza */
}

/* Skale 1–5 */
.qs .choices[style*="repeat(5"]{ grid-template-columns: repeat(5, minmax(44px,1fr)) !important; }


/* Większe odstępy między sekcjami pytań */
.qs { 
  margin: 26px 0;            /* było 18px */
  padding: 18px 16px 22px;   /* trochę więcej dołu */
}

/* Nagłówek pytania – większy odstęp od treści */
.qs h4, .qs h3 {
  margin: 0 0 14px;
}

/* Mobile: jeszcze więcej powietrza i zwarta typografia */
@media (max-width: 540px) {
  .qs { margin: 28px 0; padding: 16px 14px 24px; }
  .qs h4, .qs h3 { margin-bottom: 16px; line-height: 1.25; }
  .inline label { display:block; margin: 8px 0; } /* żeby radio/checkboxy nie kleiły się w jednym wierszu */
}



/* --- KARTY PYTAŃ (wyraźna ramka + tło) --- */
.qs{
  margin: 22px 0;
  padding: 16px 14px 20px;
  border: 2px solid rgba(108,255,180,.35);     /* zielona ramka */
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  box-shadow: 0 1px 0 rgba(0,0,0,.25) inset;
}

/* Akcent po lewej (opcjonalny pasek) */
.qs::before{
  content:"";
  display:block;
  width: 6px;
  height: 26px;
  border-radius: 4px;
  background: #6cffb4;
  opacity: .55;
  margin-bottom: 10px;
}

/* Nagłówki w kartach (responsywne) */
.qs h3, .qs h4{
  margin: 0 0 12px;
  font-weight: 800;
  /* zmniejszają się na mobile, ale nie za bardzo na desktopie */
  font-size: clamp(18px, 4.5vw, 22px);
  line-height: 1.25;
}

/* Odstęp między nagłówkiem a treścią */
.qs > p:first-of-type{
  margin-top: 2px;
}

/* Siatki wyboru */
.choices{
  display:grid;
  gap:12px;
  grid-auto-rows: 44px;
}

/* Kwadraty */
.choices label{
  position: relative;
  border: 2px solid #3ddc84;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 700;
  cursor:pointer; user-select:none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  background: transparent;
}
.choices span{ color:#e7f5ed; }
.choices label:hover{ border-color:#6cffb4; transform: translateY(-1px); }
.choices input{ position:absolute; inset:0; opacity:0; }
.choices input:focus-visible + span{ outline:2px solid #6cffb4; outline-offset:2px; border-radius:8px; }
.choices input:checked + span{
  background:#6cffb4; color:#0b120f; border-radius:10px;
  box-shadow: 0 0 0 2px #6cffb4, 0 0 14px rgba(108,255,180,.35);
  transform: translateY(-1px) scale(1.02);
}

/* Skale 1–5 */
.qs .choices[style*="repeat(5"]{ grid-template-columns: repeat(5, minmax(44px,1fr)) !important; }

/* NPS – nigdy nie ucieka na mobile */
.choices.nps{ grid-template-columns: repeat(11, minmax(44px,1fr)); overflow-x:auto; }
@media (max-width: 540px){
  .choices.nps{
    grid-template-columns: repeat(6, minmax(46px,1fr)); /* 0–5 w pierwszym rzędzie */
    row-gap: 12px;
  }
  .choices.nps label:nth-child(n+7){ margin-top: 0; } /* 6–10 idzie w drugi rząd */
}

/* Pola input/select pełna szerokość na mobile */
.qs select,
.qs input[type="number"],
.qs textarea{
  width:100%;
  max-width: 680px;
  background:#111; color:#e7f5ed;
  border:1px solid #2a2f2d; border-radius:14px; padding:12px 14px;
}

/* Radio/checkbox w liniach – więcej powietrza */
.inline label{ display:inline-flex; gap:8px; align-items:center; margin-right:18px; margin-top:6px; }
.inline input[type="radio"], .inline input[type="checkbox"]{ width:16px; height:16px; accent-color:#6cffb4; }

/* Ogólny responsywny „oddech” */
@media (max-width: 540px){
  .club-survey-form{ padding: 0 8px; }
  .qs{ margin: 26px 0; padding: 16px 12px 22px; }
  .inline label{ display:block; margin:8px 0; } /* radio/checkboxy w kolumnie */
}

/* ===== Komentarze klientów ===== */
.cs-notes { margin-top: 28px; }
.cs-notes h5 {
  margin: 0 0 14px;
  font-size: clamp(16px, 3.8vw, 20px);
  font-weight: 800;
}
.cs-note {
  background: rgba(255,255,255,.035);
  border: 1px solid #2a2f2d;
  border-radius: 12px;
  padding: 14px;
  margin: 12px 0;
}
.cs-note--pos { background: rgba(108,255,180,.22); border-color: rgba(108,255,180,.45); }
.cs-note--neg { background: rgba(255,74,74,.14);   border-color: rgba(255,74,74,.35);  }

.cs-note__text { margin: 0 0 8px; line-height: 1.5; }
.cs-note__meta { color: #b6c7bd; font-size: 13px; }


/* ====== Przycisk wysyłania ====== */
.club-survey-form .btn {
  display: inline-block;
  margin-top: 24px;
  padding: 14px 30px;
  border-radius: 14px;
  border: 2px solid var(--cs-accent);   /* zielony border od startu */
  background: #0f2f23;                 /* ciemnozielone tło kontrastowe */
  color: var(--cs-accent);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all .25s ease;
}

/* Hover efekt */
.club-survey-form .btn:hover {
  background: var(--cs-accent);
  color: #0a0f0c;
  box-shadow: 0 0 14px rgba(108, 255, 180, .6);
  transform: translateY(-2px);
}

/* Kliknięty */
.club-survey-form .btn:active {
  transform: translateY(0);
  box-shadow: 0 0 6px rgba(108, 255, 180, .3);
}

/* Mobile – pełna szerokość */
@media (max-width: 768px) {
  .club-survey-form .btn {
    display: block;
    width: 100%;
    text-align: center;
  }
}