/* ===================================================================== */
/*  File: forms.css                                                     */
/*  Purpose: Stilizacija formi za kontakt, prijavu, učlanjenje itd.     */
/*  Author: Udruženje e-Razvoj | https://erazvoj.com                   */
/*  Last Updated: 2025-05-XX                                            */
/* ===================================================================== */

/* === Sekcija forme (može imati pozadinu ili padding) === */
.form-section {
  padding: 50px 20px;                   /* Unutrašnji razmak: gore/dole 50px, levo/desno 20px */
  background-color: #f9f6fb;           /* Svetla pozadina – u skladu sa brendingom sajta */
}

/* === Glavni kontejner forme (centriranje i širina) === */
.form-container {
  max-width: 800px;                    /* Ograničena maksimalna širina */
  margin: auto;                        /* Horizontalno centriranje */
  background-color: #fff;              /* Bela pozadina forme */
  padding: 40px;                       /* Unutrašnji razmak unutar kontejnera */
  border-radius: 10px;                 /* Zaobljeni uglovi kontejnera */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Blaga senka ispod forme */
}

/* === Naslovni tekst iznad forme (napomene, poziv na akciju) === */
.form-note {
  margin-bottom: 25px;                 /* Razmak ispod teksta */
  font-size: 1.1em;                    /* Nešto veći font od standardnog */
  color: #555;                         /* Tamnosiva boja za bolju čitljivost */
  text-align: center;                 /* Centriran tekst */
}

/* === Poruke o grešci, upozorenju ili uspehu === */
.form-alert {
  padding: 12px 20px;                  /* Unutrašnji razmak */
  margin-bottom: 20px;                /* Razmak ispod poruke */
  border-radius: 5px;                 /* Zaobljeni uglovi */
  font-weight: 600;                   /* Podebljan tekst */
}

.form-alert.error {
  background-color: #fdd;             /* Svetloroze pozadina za greške */
  color: #900;                        /* Tamnocrvena boja teksta */
}

.form-alert.success {
  background-color: #dff0d8;          /* Svetlozelena pozadina za uspeh */
  color: #3c763d;                     /* Tamnozelena boja teksta */
}

/* === Pojedinačna input i textarea polja === */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="tel"],
input[type="number"],
textarea {
  width: 100%;                        /* Polja zauzimaju punu širinu kontejnera */
  padding: 12px 15px;                 /* Unutrašnji razmak */
  border: 1px solid #ccc;             /* Svetlosiva ivica */
  border-radius: 6px;                 /* Zaobljeni uglovi */
  font-size: 1rem;                    /* Standardna veličina teksta */
  font-family: 'Poppins', sans-serif; /* Standardni font sajta */
  box-sizing: border-box;            /* Ukupna dimenzija uključuje padding i border */
  margin-bottom: 15px;               /* Razmak između polja */
  background-color: #fff;            /* Bela pozadina */
  color: #333;                       /* Tamnosiva boja teksta */
}

textarea {
  min-height: 120px;                 /* Minimalna visina za textarea */
  resize: vertical;                 /* Dozvoljeno vertikalno razvlačenje */
}

/* === Checkbox ili radio blok sa tekstom pored === */
.radio-block,
.checkbox-wrapper-single {
  margin-bottom: 15px;              /* Razmak ispod svakog bloka */
  display: flex;                    /* Fleks raspored: ikonica + tekst */
  align-items: flex-start;         /* Poravnanje uz gornju ivicu */
  gap: 10px;                        /* Razmak između checkbox/radio i teksta */
  font-size: 1rem;                  /* Standardna veličina teksta */
}

.radio-block input,
.checkbox-wrapper-single input {
  margin-top: 4px;                  /* Blago pomeranje radi poravnanja */
}

/* === Google reCAPTCHA kontejner === */
.g-recaptcha {
  margin: 20px 0;                   /* Razmak gore i dole */
}

/* === Stil za formu za učlanjenje (posebna klasa) === */
.uclanjenje-form {
  margin-top: 30px;                 /* Razmak iznad specijalne forme */
}

/* === Dugme za slanje forme se definiše u buttons.css sa klasom .btn-submit === */
/* Primer: <button type="submit" class="btn btn-submit">Pošalji</button> */