.wa-container {
  position: fixed;
  bottom: 0px;
  right: 0px;
  width: 300px;
  z-index: 999;
  
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  box-shadow: 0px 0px 25px rgb(44 147 225 / 20%);
  border-radius: 10px 10px 0px 0px;
  overflow: hidden;
  transition:all ease .3s !important;
}

.wa-header {
  background-color: #25d366;
  color: white;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 10px;
}
/* .wa-container input,  */
.wa-container #submit
{transition: all ease .3s;}

/* .wa-container input:hover,  */
.wa-container #submit:hover
{ scale:1.05; }

.wa-header img { width: 24px; }
.wa-header span { font-weight: bold; flex-grow: 1; }

.wa-content {
  background: white;
  max-height: 0; /* Fully collapsed */
  transition: max-height 0.3s ease-out;
  overflow: hidden;
}

.wa-content input:focus{
    border:2px solid #8c9bb3;
    outline:none;
    
    border: 2px solid #3d90c4;
    box-shadow: 0px 0px 15px rgb(44 147 225 / 10%);
}

.wa-content ::placeholder {
  color: #8c9bb3 ;
  opacity: 1; /* penting untuk Firefox */
}
/* When this class is added via JS, the form slides up */
.wa-content.expanded {
  max-height: 300px; 
}

.wa-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}



.wa-body input {
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: .3em;
  outline:none;
}

.wa-body button {
  background-color: #25d366;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}

.wa-body button:hover { background-color: #128c7e; }

.input-error {
    border: 1.5px solid #d93025 !important;
    background-color: #fff8f8;
}

/* Optional: Subtle animation for the error */
#wa-error {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}