/* Specific CSS for Website Audit Form Only */

/* This file contains only the styles needed for the audit form to avoid conflicts */

/* Form Container Styles */

.audit-form-container {
  max-width: 42rem;
  /* max-w-2xl */
  margin-top: 1.875rem;
  /* max-lg:mt-7.5 */
}

@media (max-width: 768px) {
  .audit-form-container {
    margin-top: 0.625rem !important;
    /* max-md:!mt-2.5 */
  }
}

/* Form Layout */

.audit-form-fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* gap-3 */
}

/* Input fields container - horizontal layout for inputs only */
.audit-form-inputs {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .audit-form-inputs {
    flex-direction: row;
  }
}

/* Input Fields */

.audit-form-input {
  width: 100%;
  height: 60px;
  padding: 0.75rem 1.25rem;
  /* py-3 px-5 */
  background-color: white;
  border: 2px solid #d1d5db;
  /* border-gray-300 */
  border-radius: 9999px;
  /* rounded-full */
  color: #374151;
  /* text-gray-700 */
  outline: none;
  transition: all 0.3s;
}

.audit-form-input::-moz-placeholder {
  color: #6b7280;
  /* placeholder-gray-500 */
}

.audit-form-input::placeholder {
  color: #6b7280;
  /* placeholder-gray-500 */
}

.audit-form-input:hover {
  border-color: #ff3131;
  /* hover:border-primary */
}

.audit-form-input:focus {
  border-color: #ff3131;
  /* focus:border-primary */
  box-shadow: 0 0 0 2px rgba(255, 49, 49, 0.2);
  /* focus:ring-2 focus:ring-primary/20 */
}

@media (max-width: 1280px) {
  .audit-form-input {
    height: 50px;
    /* max-xl:h-[50px] */
  }
}

/* Field Containers */

.audit-form-field {
  flex: 1 1 0%;
}

.audit-form-button-container {
  flex-shrink: 0;
}

/* Error Messages */

.audit-form-error {
  color: #ef4444;
  /* text-red-500 */
  font-size: 0.875rem;
  /* text-sm */
  margin-top: 0.25rem;
  /* mt-1 */
  display: none;
}

.audit-form-error.show {
  display: block;
}

/* Submit Button */

.audit-form-submit {
  height: 60px;
  padding: 1.25rem 2.1875rem;
  /* px-[35px] py-5 */
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: white;
  border-radius: 9999px;
  transition: all 0.7s;
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
}

.audit-form-submit:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

.audit-form-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 1280px) {
  .audit-form-submit {
    height: 50px;
    padding: 0.75rem 1.5625rem;
    /* max-xl:py-3 max-xl:px-[25px] */
    font-size: 14px;
  }
}

/* Loading Text */

.audit-form-loading {
  display: none;
}

.audit-form-loading.show {
  display: inline;
}

.audit-form-submit-text.hide {
  display: none;
}

/* Message Containers */

.audit-form-messages {
  margin-top: 1rem;
  /* mt-4 */
  display: none;
}

.audit-form-messages.show {
  display: block;
}

.audit-form-success {
  background-color: #dcfce7;
  /* bg-green-100 */
  border: 1px solid #4ade80;
  /* border-green-400 */
  color: #15803d;
  /* text-green-700 */
  padding: 0.75rem 1rem;
  /* px-4 py-3 */
  border-radius: 0.5rem;
  /* rounded-lg */
  display: none;
}

.audit-form-error-msg {
  background-color: #fee2e2;
  /* bg-red-100 */
  border: 1px solid #f87171;
  /* border-red-400 */
  color: #b91c1c;
  /* text-red-700 */
  padding: 0.75rem 1rem;
  /* px-4 py-3 */
  border-radius: 0.5rem;
  /* rounded-lg */
  display: none;
}

.audit-form-success.show,
.audit-form-error-msg.show {
  display: block;
}

/* Info Text */

.audit-form-info {
  font-size: 0.875rem;
  /* text-sm */
  color: #4b5563;
  /* text-gray-600 */
  margin-top: 0.75rem;
  /* mt-3 */
  max-width: 32rem;
  /* max-w-lg */
}

.audit-form-info-icon {
  margin-right: 0.25rem;
  /* mr-1 */
  color: #ff3131;
  /* text-primary */
}