.ez-advanced-form-control {
    gap: 5px;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 2px solid var(--input-border-color);
    border-radius: 10px;
}

.ez-advanced-form-control.required{
    border: 2px solid var(--input-required-color);
}

.ez-advanced-form-control.disabled{
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.ez-advanced-form-control:hover {
    border: 2px solid #b9b7b7;
}

.ez-advanced-form-control .header {
    display: flex;
    position: absolute;
    background-color: var(--white-color);
    top: -10px;
    margin-left: 15px;
    padding: 0px 10px;
}

.ez-advanced-input {
    border-radius: 10px;
    margin: 15px 0px 0px 0px;
    background-color: var(--white-color);
    height: 100%;
    font-size: var(--text-sm);
    width: 100%;
}

.ez-advanced-input.disabled{
    pointer-events: none;
    opacity: 0.7;
}

.ez-advanced-input:focus-visible {
    outline: none;
}

.ez-advanced-input.input-sm {
    padding: 5px 15px 15px 25px;
}

/* Responsive Input Styles */
@media (max-width: 780px) {
    .ez-input, 
    .ez-advanced-input {
        font-size: 16px; /* Prevents zoom on iOS */
        min-height: 44px; /* Touch-friendly height */
    }
    
    .ez-advanced-form-control {
        font-size: 14px;
    }
    
    .ez-advanced-input.input-sm {
        padding: 5px 10px 15px 15px;
    }
}

@media (max-width: 550px) {
    .ez-input, 
    .ez-advanced-input {
        padding: 12px 10px;
    }
    
    .ez-advanced-input.input-sm {
        padding: 5px 10px 15px 10px;
    }
}