/* ============================================
   MOBILE FORMS OPTIMIZATION
   Touch-friendly form controls
   ============================================ */

@media (max-width: 768px) {

/* Form Groups */
.form-group,
.mb-3 {
  margin-bottom: 20px !important;
}

/* Labels */
label,
.form-label {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #212529 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Text Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
.form-control {
  width: 100% !important;
  padding: 5px 40px !important;
  font-size: 16px !important; /* Prevent iOS zoom */
  line-height: 1.5 !important;
  border: 2px solid #e9ecef !important;
  border-radius: 12px !important;
  background: #f8f9fa !important;
  transition: all 0.2s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  min-height: 50px !important;
}

input:focus,
.form-control:focus,
textarea:focus,
select:focus {
  border-color: #19861C !important;
  background: white !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(25, 134, 28, 0.1) !important;
}

/* Textareas */
textarea,
textarea.form-control {
  min-height: 120px !important;
  resize: vertical !important;
  font-family: inherit !important;
}

/* Select Dropdowns */
select,
.form-select {
  padding: 14px 40px 14px 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 16px !important;
  cursor: pointer !important;
}

/* Checkboxes & Radio Buttons */
input[type="checkbox"],
input[type="radio"] {
  width: 24px !important;
  height: 24px !important;
  margin-right: 12px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.form-check {
  display: flex !important;
  align-items: center !important;
  padding: 12px !important;
  background: #f8f9fa !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  min-height: var(--mobile-touch-target) !important;
}

.form-check-label {
  font-size: 15px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  cursor: pointer !important;
  flex: 1 !important;
}

/* File Upload */
input[type="file"] {
  display: none !important;
}

.file-upload-wrapper {
  position: relative !important;
  width: 100% !important;
}

.file-upload-btn {
  width: 100% !important;
  padding: 16px !important;
  border: 2px dashed #dee2e6 !important;
  border-radius: 12px !important;
  background: #f8f9fa !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  min-height: 120px !important;
  justify-content: center !important;
}

.file-upload-btn:active {
  background: #e9ecef !important;
  border-color: #19861C !important;
}

.file-upload-btn i {
  font-size: 32px !important;
  color: #6c757d !important;
}

.file-upload-text {
  font-size: 15px !important;
  color: #495057 !important;
  font-weight: 500 !important;
}

.file-upload-hint {
  font-size: 13px !important;
  color: #6c757d !important;
}

/* Submit Buttons */
button[type="submit"],
.btn-submit,
.btn-primary {
  width: 100% !important;
  padding: 16px 24px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #19861C 0%, #5cb85c 100%) !important;
  border: none !important;
  color: white !important;
  min-height: 54px !important;
  box-shadow: 0 4px 12px rgba(25, 134, 28, 0.3) !important;
  transition: all 0.2s ease !important;
}

button[type="submit"]:active,
.btn-primary:active {
  transform: scale(0.98) !important;
  box-shadow: 0 2px 8px rgba(25, 134, 28, 0.2) !important;
}

/* Secondary Buttons */
.btn-secondary {
  width: 100% !important;
  padding: 14px 24px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  background: #f8f9fa !important;
  border: 2px solid #e9ecef !important;
  color: #495057 !important;
  min-height: 50px !important;
}

/* Danger/Delete Buttons */
.btn-danger {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
}

/* Button Groups */
.btn-group-mobile {
  display: flex !important;
  gap: 12px !important;
  margin-top: 20px !important;
}

.btn-group-mobile .btn {
  flex: 1 !important;
}

/* Form Validation */
.is-invalid,
input.is-invalid,
textarea.is-invalid,
select.is-invalid {
  border-color: #dc3545 !important;
  background: #fff5f5 !important;
}

.invalid-feedback {
  display: block !important;
  font-size: 14px !important;
  color: #dc3545 !important;
  margin-top: 6px !important;
  padding-left: 4px !important;
}

.is-valid,
input.is-valid,
textarea.is-valid {
  border-color: #28a745 !important;
  background: #f0fff4 !important;
}

.valid-feedback {
  display: block !important;
  font-size: 14px !important;
  color: #28a745 !important;
  margin-top: 6px !important;
  padding-left: 4px !important;
}

/* Floating Labels (Optional Enhancement) */
.form-floating {
  position: relative !important;
}

.form-floating > label {
  position: absolute !important;
  top: 18px !important;
  left: 16px !important;
  font-size: 16px !important;
  color: #6c757d !important;
  pointer-events: none !important;
  transition: all 0.2s ease !important;
  font-weight: 400 !important;
}

.form-floating > input:focus ~ label,
.form-floating > input:not(:placeholder-shown) ~ label,
.form-floating > textarea:focus ~ label,
.form-floating > textarea:not(:placeholder-shown) ~ label {
  top: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #19861C !important;
}

/* Character Counter */
.character-counter {
  text-align: right !important;
  font-size: 13px !important;
  color: #6c757d !important;
  margin-top: 6px !important;
}

.character-counter.warning {
  color: #fd7e14 !important;
}

.character-counter.danger {
  color: #dc3545 !important;
  font-weight: 600 !important;
}

/* Loading State */
button.loading,
.btn.loading {
  position: relative !important;
  color: transparent !important;
  pointer-events: none !important;
}

button.loading::after,
.btn.loading::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 20px !important;
  height: 20px !important;
  margin: -10px 0 0 -10px !important;
  border: 3px solid rgba(255,255,255,0.3) !important;
  border-top-color: white !important;
  border-radius: 50% !important;
  animation: button-spin 0.6s linear infinite !important;
}

@keyframes button-spin {
  to { transform: rotate(360deg); }
}

/* Form Steps/Wizard */
.form-steps {
  display: flex !important;
  justify-content: space-between !important;
  margin-bottom: 32px !important;
  padding: 0 !important;
  list-style: none !important;
}

.form-step {
  flex: 1 !important;
  text-align: center !important;
  position: relative !important;
}

.form-step::before {
  content: "" !important;
  position: absolute !important;
  top: 20px !important;
  left: 50% !important;
  width: 100% !important;
  height: 2px !important;
  background: #e9ecef !important;
  z-index: -1 !important;
}

.form-step:first-child::before {
  display: none !important;
}

.form-step-number {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #e9ecef !important;
  color: #6c757d !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 8px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}

.form-step.active .form-step-number {
  background: #19861C !important;
  color: white !important;
}

.form-step.completed .form-step-number {
  background: #28a745 !important;
  color: white !important;
}

.form-step-label {
  font-size: 13px !important;
  color: #6c757d !important;
  font-weight: 500 !important;
}

.form-step.active .form-step-label {
  color: #19861C !important;
  font-weight: 600 !important;
}


} /* End of @media (max-width: 768px) */