/* ================================================================= */
/*                      FORMULARZ KONTAKTOWY                         */
/* ================================================================= */

/* Pola tekstowe formularza (Imię, E-mail, Treść) */
.mail_kol { 
  display: block;                  /* Każde pole ląduje w nowej linii */
  clear: both;                     /* Zapobiega doklejaniu się pól do napisów obok */
  width: 100%;                     /* Rozciąga pole na pełną szerokość kontenera */
  max-width: 100%;                 /* Blokuje rozszerzanie poza ekran */
  box-sizing: border-box;          /* Uwzględnia padding w szerokości pola */
  font-size: 16px; 
  color: #ffffff; 
  font-style: italic; 
  background-color: transparent; 
  border: 1px solid green; 
  padding: 5px; 
  margin-top: 5px;                 /* Estetyczny odstęp od tekstu "Imię i nazwisko" itp. */
  margin-bottom: 20px;             /* Odstęp pod polem, żeby następna etykieta na nie nie wchodziła */
}

/* Wspólne style dla przycisków Wyślij i Wyczyść */
.mail_prz { 
  display: inline-block; 
  font-size: 16px;  
  color: #ffffff; 
  background-color: #000000; 
  border: 2px solid green; 
  padding: 5px 8px; 
  margin-top: 10px;                /* Odsuwa przyciski w dół od pola tekstowego */
  cursor: pointer;
}

/* Przycisk WYŚLIJ (ciągła ramka) */
.mail_wys { 
  border-style: solid; 
  margin-right: 10px;              /* Odstęp między przyciskiem Wyślij a Wyczyść */
}

/* Przycisk WYCZYŚĆ (kropkowana ramka) */
.mail_wyc { 
  border-style: dotted; 
}

.form-title {
  margin-bottom: 26px;
  align-items: center;
  text-align: center;
  font-size: 24px;
}

/* ================================================================= */
/*         NOWE, NIEZALEŻNE STYLE DLA EKRANU PODZIĘKOWANIA           */
/* ================================================================= */

/* Zewnętrzny kontener rozciągnięty na 100% (cała szerokość ekranu) */
.pasek_wyslane {
  width: 100% !important;
  background-color: rgba(0, 0, 0, 0.4);
  border-top: 1px solid green;
  border-bottom: 1px solid green;
  margin: 20px 0;
  padding: 15px 0;
  clear: both;
  /* Zielona poświata skierowana w dół, identyczna z poświatą paska z tagami/menu */
  -webkit-box-shadow: 0 10px 10px -6px green;
  -moz-box-shadow: 0 10px 10px -6px green;
  box-shadow: 0 10px 10px -6px green; 
}

/* Środkowy kontener tekstowy (wyśrodkowany, max 600px na PC) */
.for_wyslane {
  width: 100% !important;
  max-width: 600px !important;
  min-height: 130px;  
  margin: 0 auto !important;
  padding: 0 15px !important;
  box-sizing: border-box !important;
  font-size: 24px;  
  text-align: center !important;    
}

/* Nowy identyfikator - całkowicie odporny na reguły ze style.css */
#effect-wyslane {
  display: flex !important;
  flex-direction: column !important; /* Elementy jeden pod drugim */
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  min-height: 70px !important;
  white-space: normal !important;
  word-wrap: break-word !important;
}

.tekst_potwierdzenia {
  font-size: 24px;
  line-height: 1.4;
  color: #ffffff;
  padding-bottom: 15px;
}

/* Przycisk powrotu stylizowany identycznie jak dawne kafelki podmenu */
.przycisk_powrotu {
  display: inline-block !important;  
  margin: 15px auto !important;
  padding: 8px 20px !important;      
  line-height: normal !important;   
  background-color: rgba(0,255,0,0.1) !important;
  -webkit-box-shadow: 0 7px 6px -6px green !important;
  -moz-box-shadow: 0 7px 6px -6px green !important;
  box-shadow: 0 7px 10px -6px green !important;  
  border: 2px solid green !important; 
  border-radius: 8px !important;   
  white-space: nowrap !important;
  transition: background-color 0.3s ease;
}

.przycisk_powrotu:hover {   
  background-color: rgba(0, 255, 102, 0.25) !important;
}

.przycisk_powrotu a {
  font-size: 18px !important;
  font-weight: bold !important;
  color: #ffffff !important;
  text-decoration: none;
}

/* --- RESPONSYWNOŚĆ DLA SMARTFONÓW (PODZIĘKOWANIE) --- */
@media (max-width: 600px) {
  .pasek_wyslane {
    padding: 10px 0 !important;
    margin: 10px 0 !important;
  }
  
  .tekst_potwierdzenia {
    font-size: 18px !important; /* nieco mniejsza czcionka na telefonie, żeby nic się nie ucinało */
    padding-bottom: 10px;
  }

  .przycisk_powrotu {
    padding: 10px 25px !important; /* wygodniejszy do kliknięcia palcem przycisk */
  }
}

/* ================================================================= */
/* 1. POPRAWKA EKRANU POTWIERDZENIA (FormToEmail.php)                */
/* ================================================================= */

.pasek_wyslane {
  display: block !important;
  clear: both !important;
  width: 100% !important;
  float: none !important;
  border-top: none !important;      /* Całkowite usunięcie linii nad "Dziękujemy" */
  border-bottom: none !important;   /* Całkowite usunięcie linii pod przyciskiem */
  /* Pozostawiamy wyłącznie cień skierowany w dół */
  -webkit-box-shadow: 0 10px 10px -6px green !important;
  -moz-box-shadow: 0 10px 10px -6px green !important;
  box-shadow: 0 10px 10px -6px green !important; 
}

.for_wyslane {
  float: none !important;
  display: block !important;
  clear: both !important;
}

#effect-wyslane {
  width: 100% !important;
  height: auto !important;
}


/* ================================================================= */
/* 2. KLASYCZNY UKŁAD FORMULARZA (Etykiety po lewej)                 */
/* ================================================================= */

/* Kontener grupujący dla każdego wiersza (etykieta + ramka obok siebie) */
.form-group {
  display: flex;
  align-items: baseline;       /* Pionowe środkowanie dla pól jednolinijkowych */
  margin-bottom: 10px;
  width: 100%;
}

/* Osobny kontener dla obszaru wiadomości (etykieta wyrównana do góry) */
.form-group-textarea {
  display: flex;
  align-items: flex-start;   /* Etykieta ląduje przy górnej krawędzi dużego pola */
  margin-bottom: 10px;
  width: 100%;
}

/* Styl dla etykiet tekstowych po lewej stronie */
.form-group label,
.form-group-textarea label {
  width: 180px;              /* Stała szerokość zapewnia równe rozpoczęcie się ramek */
  min-width: 180px;
  color: #ffffff;
  font-size: 16px;
  text-align: left;
  padding-right: 10px;
  box-sizing: border-box;
}

/* Pierwsze dwa pola (Imię i E-mail) - zgrabne, węższe ramki */
.mail_kol { 
  display: inline-block;
  width: 320px;              /* Estetyczna szerokość dla krótszych danych */
  max-width: 100%;
  box-sizing: border-box;
  font-size: 16px; 
  color: #ffffff; 
  font-style: italic; 
  background-color: transparent; 
  border: 1px solid green; 
  padding: 5px; 
}

/* Pole "Treść wiadomości" - szersze, dające więcej miejsca na wpisywanie */
textarea.mail_kol {
  width: 500px;
  height: 150px;
}

/* Przesunięcie sekcji przycisków, aby wyrównać je do lewej krawędzi ramek */
.form-actions {
  padding-left: 180px;       /* Wartość identyczna z szerokością etykiet label */
  width: 100%;
  box-sizing: border-box;
}


/* ================================================================= */
/* 3. RESPONSYWNOŚĆ (Automatyczny powrót do pionu na telefonach)    */
/* ================================================================= */
@media (max-width: 768px) {
  .form-group,
  .form-group-textarea {
    flex-direction: column;  /* Na smartfonach etykiety lądują nad ramkami */
    align-items: stretch;
  }
  
  .form-group label,
  .form-group-textarea label {
    width: 100%;
    padding-bottom: 5px;
  }
  
  .mail_kol,
  textarea.mail_kol {
    width: 100% !important;  /* Na telefonie ramki rozciągają się do krawędzi ekranu */
  }
  
  .form-actions {
    padding-left: 0;
    text-align: center;      /* Przyciski na środku na telefonach */
  }
}