/* ======================
   SEKJA FORMULARZ & KONTAKT
====================== */

/* kontakt – wrapper formularza */
.contact-section#kontakt {
  padding: 60px 0;
}

/* centrowanie wewnętrznego kontenera */
.contact-section#kontakt .form-container {
  display: flex;
  justify-content: center;
  padding: 0 16px;
}

/* główna karta formularza */
.contact-section#kontakt .contact-card {
  background: #fff;
  max-width: 600px;
  width: 100%;
  border-radius: var(--border-radius-m);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  padding: 28px 24px;
  transition: box-shadow .25s ease;
}

.contact-section#kontakt .contact-card:hover {
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.12);
}

/* nagłówki w karcie */
.contact-section#kontakt .contact-card h2 {
  margin-bottom: 24px;
  font-size: 1.8em;
  color: var(--color-accent);
  text-align: center;
}

/* etykiety pól */
.contact-section#kontakt .contact-card label {
  display: block;
  margin-top: 16px;
  font-weight: 500;
}

/* tekstowe pola formularza i select */
.contact-section#kontakt .contact-card input[type="text"],
.contact-section#kontakt .contact-card input[type="email"],
.contact-section#kontakt .contact-card input[type="tel"],
.contact-section#kontakt .contact-card textarea,
.contact-section#kontakt .contact-card select {
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: var(--border-radius-s);
  transition: border-color .2s;
}

.contact-section#kontakt .contact-card input[type="text"]:focus,
.contact-section#kontakt .contact-card input[type="email"]:focus,
.contact-section#kontakt .contact-card input[type="tel"]:focus,
.contact-section#kontakt .contact-card textarea:focus,
.contact-section#kontakt .contact-card select:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* checkbox – przywracamy auto-width */
.contact-section#kontakt .contact-card input[type="checkbox"] {
  width: auto;
  margin: 0;
  padding: 0;
}

/* SELECT – dropdown arrow */
.contact-section#kontakt .contact-card select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'10'%20height%3D'7'%20viewBox%3D'0%200%2010%207'%20xmlns%3D'http://www.w3.org/2000/svg'%3E%3Cpath%20d%3D'M1%200l4%204%204-4'%20stroke%3D'%23e2611e'%20stroke-width%3D'2'%20fill%3D'none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 7px;
  padding-right: 36px;
  cursor: pointer;
}

/* FORM ACCEPTANCE – poprawione wyrównanie */
.contact-section#kontakt .contact-card .form-acceptance {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
}

.contact-section#kontakt .contact-card .form-acceptance label {
  line-height: 1.3;
}

/* przycisk Wyślij */
.contact-section#kontakt .contact-card .submit-btn {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 14px;
  font-size: 1em;
  font-weight: 600;
  text-align: center;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: var(--border-radius-s);
  cursor: pointer;
  transition: background .2s;
}

.contact-section#kontakt .contact-card .submit-btn:hover {
  background: var(--color-accent-hover);
}

/* gwiazdka przy wymaganym polu */
.required {
  color: var(--color-accent);
  margin-left: 4px;
  font-weight: 600;
}

/* komunikaty sukcesu / błędów */
.form-message {
  padding: 1rem;
  border-radius: var(--border-radius-s);
  margin-bottom: 1rem;
  font-weight: 500;
}
.form-message--success {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}
.form-message--error {
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ef9a9a;
}


/* Style dla walidacji formularza */

/* Kontener pola, gdy wystąpi błąd */
.form-group.error input,
.form-group.error textarea,
.form-group.error select {
    border-color: #d9534f; /* Czerwona ramka */
    box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.2); /* Czerwona poświata */
}

/* Etykieta pola, gdy wystąpi błąd */
.form-group.error label {
    color: #d9534f; /* Czerwony tekst etykiety */
}

/* Komunikat o błędzie (domyślnie pusty) */
small.error {
    display: block;
    margin-top: 5px;
    min-height: 1.2em; /* Zapobiega "skakaniu" layoutu */
    color: #d9534f; /* Czerwony tekst błędu */
    font-size: 0.875em;
    font-weight: 600;
}

/* ── Kompaktowe odstępy między polami (desktop) ───────────────────────────── */
@media (min-width: 1024px) {

  /* zmniejsz przerwy wokół grup/form-row (na wypadek gdy pola są w <p> lub .form-group) */
  .contact-section#kontakt .contact-card .form-group,
  .contact-section#kontakt .contact-card .form-row,
  .contact-section#kontakt .contact-card p {
    margin: 0 0 12px;  /* było domyślnie większe */
  }

  /* ciaśniej label + pole */
  .contact-section#kontakt .contact-card label {
    margin-top: 8px;       /* było 16px */
    margin-bottom: 6px;    /* dodane, żeby label był bliżej pola */
  }

  /* odstępy samych pól */
  .contact-section#kontakt .contact-card input[type="text"],
  .contact-section#kontakt .contact-card input[type="email"],
  .contact-section#kontakt .contact-card input[type="tel"],
  .contact-section#kontakt .contact-card textarea,
  .contact-section#kontakt .contact-card select {
    margin-top: 6px;       /* było 8px */
    margin-bottom: 8px;    /* dodane – mniejszy dystans do następnego labela */
  }

  /* kompaktowy fieldset/legend (jak na screenie masz ramkę) */
  .contact-section#kontakt fieldset {
    margin: 0;
    padding: 8px 12px;     /* było przeważnie większe w domyślnych stylach */
  }
  .contact-section#kontakt legend {
    margin-bottom: 8px;
    padding: 0 6px;
  }

  /* komunikaty błędów – niższa wysokość żeby nie rozpychały układu */
  .contact-section#kontakt small.error {
    margin-top: 4px;
    min-height: 0.9em;     /* było 1.2em */
  }
}

/* Opcjonalnie: minimalnie ciaśniejsza karta (jeśli chcesz) */
/*
.contact-section#kontakt .contact-card {
  padding: 24px 20px;  // było 28px 24px
}
*/