html {
  background-color: transparent;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: #ff4c34;
}

.form-control.transparent-option {
    color: #B6B6B6;
}

.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip,
.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip {
  display: block;
  padding-top: 5px;
}

.invalid-feedback {
  display: none;
  width: 100%;
  color: #ff4c34;
}

#app-form.modal-open {
  position: relative;
}

.arrow-rotate {
  transition: all 0.15s ease-in-out;
}
[aria-expanded=true] .arrow-rotate {
  transform: rotate(180deg);
}

.required-input::after {
  content: "*";
  color: #ff4c34;
}

.preview-size {
  width: 34px;
  height: 34px;
  object-fit: cover;
}

.collapse {
  display: block;
  opacity: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
  transition: all 0.15s ease-in-out;
}
.collapse.show {
  opacity: 1;
  height: auto;
  position: relative;
}

.list-group {
  position: absolute;
  max-height: 300px;
  max-width: 100%;
  overflow-y: scroll;
  box-shadow: var(--normal-shdw);
}

.remove-image {
  position: absolute;
  cursor: pointer;
  background-color: white;
  border-radius: 100%;
  width: 16px;
  height: 16px;
  top: -5px;
  right: -5px;
}
.remove-image svg {
  padding: 1px;
}

input {
  animation-duration: 0.01s;
  animation-name: none;
}
input:-webkit-autofill {
  animation-name: autofillStart;
}

@keyframes autofillStart {}

/* Mobile-friendly responsive styles */
@media (max-width: 768px) {
    #app-form {
        padding: 10px !important;
    }
    
    #app-form .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    #app-form .form-control,
    #app-form .form-control-sm {
        font-size: 13px; /* Prevents zoom on iOS */
        width: 100%;
    }
    
    #app-form .d-flex {
        flex-wrap: wrap;
    }
    
    #app-form .flex-column-xs {
        flex-direction: column !important;
    }
    
    #app-form .gap-15,
    #app-form .gap-20 {
        gap: 15px !important;
    }
    
    #app-form .btn {
        width: 100%;
        padding: 12px;
        font-size: 16px;
    }
    
    #app-form .btn-success {
        margin-top: 10px;
    }
    
    #app-form .g-recaptcha {
        transform: scale(0.85);
        margin: 0 auto;
    }
    
    #app-form .list-services {
        max-width: 100%;
        left: 0;
        right: 0;
    }
    
    #app-form .service-list {
        position: relative;
    }
    
    #app-form .preview-size {
        width: 50px;
        height: 50px;
    }
    
    #app-form .logo-powered-container {
        margin-top: 20px;
        justify-content: center;
    }
    
    #app-form .logo-powered svg {
        width: 120px;
        height: auto;
    }
    
    /* Ensure no horizontal scroll */
    body#app-form {
        overflow-x: hidden;
        max-width: 100%;
    }
    
    #app-form .row {
        margin-left: 0;
        margin-right: 0;
    }
    
    #app-form .col {
        padding-left: 0;
        padding-right: 0;
    }
    
    /* Address input group */
    #app-form .address-input-group {
        flex-wrap: wrap;
    }
    
    #app-form .address-input-group .btn {
        width: auto;
        min-width: 44px; /* Touch target size */
    }
    
    /* Form labels */
    #app-form .form-label {
        font-size: 13px;
        margin-bottom: 5px;
    }
    
    /* Textarea */
    #app-form textarea {
        min-height: 80px;
        resize: vertical;
    }
    
    /* Checkbox and radio */
    #app-form .form-check {
        align-items: flex-start;
    }
    
    #app-form .form-check-input {
        margin-top: 4px;
        min-width: 18px;
        min-height: 18px;
    }

}

@media (max-width: 480px) {
    #app-form .g-recaptcha {
        transform: scale(0.75);
    }
    
    #app-form .btn {
        padding: 10px;
        font-size: 14px;
    }
}

/*# sourceMappingURL=lead_form.css.map */