/* RESET DAN UMUM */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-image: url(../background/kikov3.jpg);
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  padding: 10px;
  /* Menghindari elemen terlalu dekat dengan tepi layar di mobile */
}

/* KONTENER UTAMA */
.container {
  background: rgb(114 2 2 / 74%);
  border: 5px solid yellow;
  padding: 15px;
  border-radius: 10px;
  text-align: center;
  width: 100%;
  max-width: 400px;
  box-shadow: 0px 0px 15px rgba(255, 255, 0, 0.5);
  /* Efek glow */
}

.container h2 {
  color: rgb(255, 251, 0);
  font-weight: bold;
  font-size: 24px;
  margin-left: 10px;
}

/* GAYA UNTUK SELECT */
select {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #f1f506;
  font-size: 16px;
  margin-top: 10px;
}

/* GAYA UNTUK LABEL KENDALA */
.label-kendala {
  color: #f5e500;
  font-weight: bold;
  font-size: 15px;
  margin-top: 15px;
  display: block;
}

/* ANIMASI KILAT */
@keyframes lightning {
  0%,
  100% {
    filter: drop-shadow(0px 0px 10px yellow);
  }

  50% {
    filter: drop-shadow(0px 0px 50px white);
  }
}

.logo-lightning {
  width: 180px;
  display: block;
  margin: 0 auto 10px;
  margin-left: 115px;
}

/* GAYA INPUT, TEXTAREA, BUTTON */
input,
textarea,
button {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border-radius: 5px;
  border: 1px solid #f8f8f4;
  font-size: 16px;
  box-sizing: border-box;
  /* Mencegah elemen melampaui lebar container */
}

/* GAYA BUTTON */
button {
  background-color: green;
  color: white;
  border: none;
  cursor: pointer;
  font-weight: bold;
}

button:hover {
  background-color: darkgreen;
}

/* NOTE */
.note {
  margin-top: 15px;
  font-size: 14px;
  color: #f5e500;
  margin-bottom: 10px;
}

/* FOOTER */
.foot {
  font-size: 12px;
  background-color: yellow;
  margin-right: 20px;
  margin-left: 20px;
}

/* RESPONSIF UNTUK MOBILE */
@media (max-width: 600px) {
  .container {
    margin-bottom: -21px;
    width: 90%;
  }

  .logo-lightning {
    width: 150px;
    margin-left: 100px;
  }

  .container h2 {
    font-size: 20px;
  }

  input,
  textarea,
  button {
    font-size: 14px;
  }

  .note {
    font-size: 12px;
  }
}

/* Styling label agar turun sedikit */
label[for="complaint_type"] {
  display: block;
  margin-top: 10px;
  margin-bottom: 5px;
  /* Menambahkan sedikit jarak antara label dan dropdown */
  font-weight: bold;
  font-size: 14px;
  color: #f8f6f6;
}

/* Styling dropdown */
select#complaint_type {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
}

select#complaint_type:focus {
  outline: none;
  border-color: #fcfaf9;
}

.input-container {
  position: relative;
  margin-bottom: 15px;
}

.input-container i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #555;
}

.input-container input {
  width: 100%;
  padding: 10px 10px 10px 35px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}
/* Gaya untuk label yang menggantikan tombol input file */
.file-upload-label {
  color: white;
}

/* Warna teks untuk input file setelah memilih file */
input[type="file"] {
  color: white; /* Menjadikan tulisan "No file chosen" berwarna putih */
}