/* Form Input Component Styles */

/* Label Styles */
.form-label {
  display: block;
  text-align: left;
  font-size: clamp(0.6rem, 1.1rem, 1.3rem);
  font-family: "Acumin Pro Condensed Bold";
  color: #000000;
  margin-bottom: 4px;
}

.form-label::after {
  content: "*";
  color: #dc4d28; /* Red color for required field */
  margin-left: 4px;
}

/* Input Field Styles */
.form-input {
  width: 115%;
  padding: 6px 15px;
  border: 1px solid #b1b1b1;
  border-radius: 4px;
  font-size: 12px;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.3s ease;
}

.form-input::placeholder {
  color: #b1b1b1;
  opacity: 1;
  font-size: 14px;
}

.form-input:focus {
  outline: none;
  border: 2px solid #0071c9;
}

.form-input:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Input Group Container (optional) */
.form-input-group {
  width: 80%;
  margin-top: 20px;
  margin-right: 80px;
}

/* Alternative Label Style for non-required fields */
.form-label-optional {
  display: block;
  text-align: left;
  font-size: clamp(0.8rem, 1rem, 1.2rem);
  font-family: "Acumin Pro Condensed Bold";
  color: #000000;
  margin-bottom: 4px;
  margin-top: 6px;
}

/* Spacing modifiers for labels */
.form-label-spacetop {
  padding-top: 4px;
}

.form-label-spacetop-two {
  padding-top: 14px;
  margin-bottom: 0px;
}

.form-label-spacetop-three {
  padding-top: 8px;
}

/* Mobile Responsive Styles */
@media (max-width: 767px) {
  .form-label {
    font-size: 14px;
    margin-bottom: 6px;
  }
  
  .form-label-optional {
    font-size: 14px;
    margin-bottom: 6px;
  }
  
  .form-input {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    font-size: 16px; /* Better for mobile touch */
  }
  
  .form-input-group {
    width: 100%;
    margin: 25px 0 0 0;
    margin-right: 0;
  }
  
  .form-input::placeholder {
    font-size: 16px;
  }
}

/* Tablet Responsive Styles */
@media (min-width: 768px) and (max-width: 1024px) {
  .form-input-group {
    width: 100%;
    margin-right: 0;
  }
  
  .form-input {
    width: 100%;
  }
}

/* Error State Styles */
.form-input-error {
  border-color: #dc4d28 !important;
}

.error-message {
  color: #dc4d28;
  font-size: 12px;
  margin-top: 5px;
  text-align: left;
  font-family: "Acumin Pro Condensed Medium";
}

@media (max-width: 767px) {
  .error-message {
    font-size: 14px;
  }
}

/* Success State Styles */
.form-input-success {
  border-color: #28a745 !important;
}

@media screen and (min-width: 2001px) {
  .form-input-group{
    width: 90%;
  }
}