/* Upload file forma - početak */
/* Wrapper Styles */
.upload-file-form {
  color: #000;                          /* High-tech: black text */
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;               /* Stack children vertically */
  align-items: center;                  /* Center items horizontally */
}

/* General Form Styles */
.custom-form {
  width: 100%;
  max-width: 600px;
  padding: 1.5rem;
  border: 1px solid #000;               /* Black border */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);/* Subtle mono shadow is OK */
}

/* Label Styles */
.custom-form__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #000;                          /* High-tech: black (was #333) */
}

/* Input and Textarea Styles */
.custom-form__input,
.custom-form__textarea {
  width: 100%;
  padding: 0.8rem;
  margin-bottom: 1rem;
  border: 1px solid #000;               /* Black border */
  border-radius: 4px;
  font-size: 1rem;
  color: #000;                          /* Black text */
  box-sizing: border-box;
  background-color: white;
}

/* Textarea Specific */
.custom-form__textarea {
  resize: vertical;
  min-height: 120px;
}

/* Button Styles (High-tech: black/white only) */
.custom-form__button {
  background-color: #000;               /* Black button */
  color: #fff;                          /* White text */
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  border: 1px solid #000;               /* Keep border for hover invert */
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.custom-form__button:hover {
  background-color: #fff;               /* Invert on hover */
  color: #000;
}

/* Responsive Typography */
.custom-form__label,
.custom-form__input,
.custom-form__textarea,
.custom-form__button {
  font-size: 1rem;
}

/* Responsive Design */
@media (min-width: 768px) {
  .custom-form {
    max-width: 700px;                   /* Slightly wider on tablets */
    padding: 2rem;
  }
}

@media (min-width: 1024px) {
  .custom-form {
    max-width: 800px;                   /* Wider on desktop screens */
    padding: 2.5rem;
  }
}

@media (max-width: 768px) {
  .custom-form {
    padding: 1rem;
  }
  .custom-form__button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .custom-form {
    margin: 1rem;
    padding: 0.8rem;
  }
  .custom-form__label {
    font-size: 0.9rem;
  }
  .custom-form__input,
  .custom-form__textarea,
  .custom-form__button {
    font-size: 0.9rem;
    padding: 0.6rem;
  }
}

/* File name & form message */
#file-name-display {
  font-size: 0.9rem;
  color: #000;                          /* High-tech: black (was #555) */
  margin-top: 0.5rem;
}

#formMessage {
  color: #000;                          /* High-tech: black (was green) */
  font-weight: bold;
  text-align: center;
  margin-top: 1rem;
  display: block;
}
/* Upload file forma - kraj */