/* Gaya untuk form chat secara keseluruhan */

.form-chat {

  background-color: #fff;

  padding: 24px;

  border-radius: 12px;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

  max-width: 500px;

  margin: 0 auto;

  font-family: Arial, sans-serif;

  display: flex;

  flex-direction: column;

  gap: 16px;

}

.form-chat input,

.form-chat textarea {

  margin-bottom: 0px !important;

}

/* Gaya untuk input text dan number di dalam form chat */

.form-chat input[type="text"],

.form-chat input[type="number"] {

  width: 100%;

  padding: 12px;

  border: 1px solid #ccc;

  border-radius: 8px;

  font-size: 16px;

  transition: border-color 0.3s, box-shadow 0.3s;

}



.form-chat input[type="text"]:focus,

.form-chat input[type="number"]:focus {

  border-color: #3b82f6; /* Biru ketika fokus */

  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);

  outline: none;

}



/* Gaya untuk error message */

.form-chat p.text-red-500 {

  color: #ef4444;

  font-size: 14px;

  margin-top: 2px !important;

  margin-bottom: 0px !important;

}



/* Tombol submit (disable state) */

.form-chat button.mute {

  background-color: #555; /* Warna abu-abu untuk tombol yang tidak aktif */

  color: #fff; /* Warna teks lebih pucat */

  cursor: not-allowed; /* Menunjukkan bahwa tombol tidak dapat diklik */

  transform: none; /* Tidak ada efek transformasi ketika tombol dinonaktifkan */

  opacity: 0.6; /* Membuat tombol terlihat lebih redup */

}



/* Tombol submit (disabled state) ketika dihover */

.form-chat button.mute:hover {

  background-color: #111; /* Tetap abu-abu saat dihover */

}



/* Tombol submit */

.form-chat button {

  background-color: #22c55e; /* Hijau */

  color: white;

  font-weight: 600;

  padding: 12px 20px;

  border-radius: 8px;

  font-size: 16px;

  cursor: pointer;

  border: none;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  transition: background-color 0.3s, transform 0.2s;

}



.form-chat button:hover {

  background-color: #16a34a; /* Hijau lebih gelap ketika hover */

}



.form-chat button:active {

  transform: scale(0.98); /* Efek klik */

}



/* Ikon WhatsApp */

.form-chat .icon-wa svg {

  margin-bottom: -2px;

  fill: white;

}



/* Responsif mobile */

@media (max-width: 600px) {

  .form-chat {

    padding: 10px 16px;

    width: 100%;

  }



  .form-chat input[type="text"],

  .form-chat input[type="number"] {

    font-size: 14px;

    padding: 10px;

  }



  .form-chat button {

    padding: 10px 18px;

    font-size: 14px;

  }

}